Vue学习（二） ：第一个Vue项目

OS: Windows 10 Home 64bit

Chocolatey version: 0.10.13

npm version: 6.4.1

yarn version: 1.16.0

git version: 2.21.0.windows.1

1. 安装Chocolatey

管理员权限打开PowerShell，Copy-Paste-Enter以下文本。

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

2. 安装nodejs&npm&cnpm|yarn

# full install with npm
cinst nodejs.install
# install cnpm - npm's taobao version
npm install -g cnpm --registry=https://registry.npm.taobao.org
# install yarn(a better dependency manage tool compared to npm)
cinst yarn

3. 安装git

下载地址: https://git-scm.com/downloads

4. vuejs开发环境搭建

# 安装脚手架Vue CLI 2.9.6
npm i -g vue-cli
# 升级到Vue CLI 3
npm uninstall -g vue-cli
npm install -g @vue/cli

5. 创建第一个项目

Vue CLI 2.9.6

# 准备一个存放项目的工作区
>cd /d D:
>md gs-workspace
>cd gs-workspace
# 创建一个基于webpack模板的项目(需要git、npm支持)
>vue init webpack gs-project

? Project name gs-project
? Project description A Vue.js project
? Author shuvidora <2245862630@qq.com>
? Vue build standalone # ↑↓选第1项
? Install vue-router? Yes # 路由插件
? Use ESLint to lint your code? Yes # 代码检查工具
? Pick an ESLint preset Standard # ↑↓选第1项
? Set up unit tests No # 单元测试
? Setup e2e tests with Nightwatch? No # 测试框架
? Should we run `npm install` for you after the project has been created? (recommended) npm # ↑↓选第1项npm或第2项yarn安装依赖或者第3项稍后安装

# 构建成功消息！
   vue-cli · Generated "gs-project".

Vue CLI 3

vue create gs-project

6. 在浏览器运行Vue项目

>cd gs-project
>cnpm run dev

# 运行成功消息！
 DONE  Compiled successfully in 4279ms                                                                          10:43:26

 I  Your application is running here: http://localhost:8080

浏览器访问http://localhost:8080

同一个项目多次run端口号不变，不同项目端口号存在差异