使用vue-cli搭建项目开发环境

一.前言

　　本篇文章主要是使用vue-cli搭建一个简单的vue项目，这个项目在其他文章中作为代码演示的环境会一直使用。

　　注意：默认大家的电脑已经安装nodejs，所以这里不总结nodejs的安装。

二.新建项目目录

　　这里呢，我们需要先创建一个目录存放我们的项目。我自己在E:\\MyStudy下创建了一个test目录。

　　

　　接下了就可以开始了。

三.安装vue-cli脚手架

　　　安装vue-cli脚手架使用的命令为：npm install --save-dev vue-cli（局部安装vue-cli）

　　　

　　　安装完成后的目录

　　　

四.使用webpack初始化目录

　　接着我们使用webpack初始化项目目录，用到的命令为：vue init webpack VueDemo。

　　

　　初始化完成后的项目目录

　　

　　

　　

　　注意：在执行这个命令之前呢，还需要有一个操作。因为前面我们安装vue-cli时是局部安装，所以直接在命令行执行vue命令是执行不了了，因此我们需要将vue-cli的安装路径添加到环境变量中。

　　局部安装完成后vue-cli的安装路径和安装程序如下

　　

　　   然后我们需要将vue命令所在的目录E:\MyStudy\test\node_modules\.bin添加到环境变量中（添加方法可自行百度）。

　　 　添加完成后就可以成功使用vue-cli提供的命令了。

　　    假如添加完成后还无法执行vue命令，则需要重新启动一下cmd命令行即可。

五.启动项目

　　启动项目我们需要进入到【E:\MyStudy\test\VueDemo】，执行npm run dev

　　

六.浏览器访问

　　

　　

　　到此，一个简单的vue项目就搭建完成了。