使用vue-cli创建项目

安装node.js

下载node.js安装包,在安装时选择全部组件，勾选Add to Path

查看是否安装成功
安装完成后打开命令提示符,输入node -v,会输出nodej.s的版本,再输入npm -v会输出npm的版本

C:\Users\繁星>node -v
v8.11.3

C:\Users\繁星>npm -v
5.6.0

修改npm路径
npm 是 Node.js 标准的软件包管理器。

因为npm路径的下载包路径是在c盘,一般是C:\Users\YOU\AppData\Roaming\npm\node_modules我们不希望软件包放在c盘,在d盘下新建两个文件夹 D:\npm\node_cache 和 D:\npm\node_global ,在命令提示符下输入以下代码修改配置

npm config set prefix "D:\npm\node_global"
npm config set cache "D:\npm\node_cache"

在系统环境变量PATH,添加路径D:\npm\node_global以后所安装的模块都会安装到此路径下

安装cnpm

安装淘宝的npm,国内镜像,下载软件包快一些

npm install cnpm -g

-g 全局安装,安装成功就会在npm软件包下载路径下多出一个文件夹D:\npm\node_global\node_modules\cnpm\

安装vue-cli

cnpm install vue-cli -g
# 测试是否可以安装成功
# 查看可以使用哪些模板创建vue应用,这里我们使用webpack
vue list

使用vue-cli创建项目

在项目目录下输入cmd,进入命令提示符,输入vue init webpack myvue创建项目

# 进入项目目录
cd myvue
# 安装项目所需要的软件包(package.json)
npm install
# 运行项目
npm run dev

编译成功后会有项目的地址,默认是http://localhost:8080