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

作者：小土豆

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

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

微信公众号：不知名宝藏程序媛(关注"不知名宝藏程序媛"免费领取前端电子书籍。文章公众号首发，关注公众号第一时间获取最新文章。)

码字不易，点赞鼓励哟~

 

一.前言

　　本篇文章主要是使用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中配置的路由匹配渲染的。

 

　　

作者：小土豆

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

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

微信公众号：不知名宝藏程序媛(关注"不知名宝藏程序媛"免费领取前端电子书籍。文章公众号首发，关注公众号第一时间获取最新文章。)

码字不易，点赞鼓励哟~