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

做者：小土豆biubiubiu

博客园：www.cnblogs.com/HouJiao/

掘金：https://juejin.im/user/58c61b4361ff4b005d9e894d

简书：https://www.jianshu.com/u/cb1c3884e6d5

微信公众号：土豆妈的碎碎念（扫码关注，一块儿吸猫，一块儿听故事，一块儿学习前端技术）

码字不易，点赞鼓励哟~

一.前言

　　本篇文章主要是使用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项目就搭建完成了。

 

 

　　　还有一点须要注意，看这里！！！

　　　咱们初始化项目的时候并无安装vue-router，项目会有如下几个特色

　　　1.项目的src目录下不会自动生成一个叫router目录。

　　　2.HelloWorld组件的展现是经过在App组件中引入而展现的。

　　　　

　　   而假如初始化的时候安装了vue-router，那和初始化没有安装vue-router的区别以下:

　　   1. 项目的src目录下会自动生成一个叫router目录，router目录下会有一个index.js文件，里面配置了HelloWorld组件匹配的路由。

　　   2.HelloWorld组件的渲染和展现是经过\router\index.js中配置的路由匹配渲染的。