使用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项目就搭建完成了。