Vuecli项目搭建和配置

前言：Vue已经成为前端最热门的框架之一，而webpack则是非常常见的前端部署框架，结合这两者优点的，就是Vue-cli脚手架了，利用它可以快速搭建一个vue项目，当然，vue完全是可以单独适用于任何前端框架中的，即使跳过此章，后续的文章阅读也不受影响。

第0步：安装node.js

node.js官网下载地址：

http://nodejs.cn/download/

选择适合系统的版本下载，安装流程简单，在此不做说明，安装完成后，打开控制台(win+R输入cmd回车打开)，在控制台中输入指令node -v回车执行，显示版本号则为安装成功

第1步：安装vue-cli插件

打开控制台，执行

npm install -g @vue/cli

安装vue-cli插件最新版本，界面如下：

然后执行

npm install -g @vue/cli-init

安装项目创建辅助工具

第2步：创建项目

打开控制台,进入想要创建项目的文件夹中，本文中的测试项目创建于D:\公众号测试项目，流程如下:

说明:输入盘符D:是进入指定的盘中，cd指令用于进入指定的文件夹,文件夹路径可以直接在文件夹的地址栏复制，执行

vue init webpack testvuecli

创建项目，testvuecli为本文中的项目名称，项目名称建议为纯英文，可以避免很多奇奇怪怪的麻烦，按下回车会出现需要填写的基本内容，按回车确定，出现的内容和说明如下：

1、项目名称，填写testvuecli

2、项目说明，忽略即可

3、项目作者，也可以忽略

4、编译方式，默认选择第一项即可

5、是否启用路由，路由是非常强大的一个工具，强烈建议使用

6、是否启用严格编译，如果选是则会对所有的不严谨的语法和标点符号空格等都进行提示，非常烦人，如果没有特别的严格要求，建议选n（否）

7、是否启用单元测试，建议选否

8、是否启用自动化测试，建议选否

9、最后一项是使用何种辅助工具，选择第一项，安装npm，回车，项目开始创建，安装完成后界面如下:

至此，项目创建完成，打开项目文件夹可以看到变成了以下情况:

第3步：配置项目

1、调整编译路径，打开testvuecli\config\index.js，将build一项中的assetsPublicPath项的值改为'./'，否则编译后的项目路径会有问题

index.js文件中的dev中的port则是项目运行时的本地端口号，默认是8080，可以根据自己电脑情况修改为其他端口号

2、项目路径下输入

npm install --save vuex

安装vuex

第4步：启动项目

在控制台进入项目路径下，执行

npm run dev

就可以启动项目，默认在8080端口就可以打开新建的项目，界面如下:

浏览器打开localhost:8080

为了方便运行项目，不用每次都打开控制台敲指令，我们可以新建一个记事本，输入

npm run dev

保存

改名运行.bat

以后直接双击运行就可以运行项目了，也可以发送快捷方式到桌面或者其他地方启动。

Vuecli脚手架的搭建到这里已经基本完成，还有一些配置在这里三言两语说不清楚，后续的例子中将会在实例中补充说明。