基于vue-cli搭建VUE.js项目

准备工作

1、node.js
2、vue-cli
3、webpack

开始安装

1. Node.js 点击去下载Node.js
   傻瓜式安装即可（记录安装路径，也可自选，路径不能包含中文），安装完毕后需要检查环境变量是否自动配置。
2. vue-cli
   之前已经安装过脚手架的小伙伴，打开命令行输入vue -V ，查看脚手架的版本，低于3.0则需要重新安装，首先命令行输入npm uninstall -g vue-cli卸载已经安装的脚手架，等待卸载成功后，输入npm install -g @vue/cli重新安装最新版本，安装完毕后输入vue -V 查看是否安装成功。
3. webpack
   输入npm i webpack -g直接安装脚手架，webpack4还要单独安装，可输入npm i webpack-cli -g安装，安装完毕后输入webpack -v 查看是否安装成功。

搭建工程

1. 在工作空间中打开cmd命令行，输入vue create 项目名 直接回车，创建项目

2. 创建成功后，输入vue init webpack 项目名 安装模板，会弹出一系列的问句 ，一直回车即可。
   直到出现下列问句：
   （1）“Project name”：这个是项目名称，默认是输入时的那个名称，想改的话直接输入修改，也可以直接回车

   （2）“Install vue-router”:是否需要vue-router，这里默认选择使用，这样生成好的项目就会有相关的路由配置文件

   （3）“Use ESLint to lint your code”:是否使用ESLint，默认使用，这样会生成相关的ESLint配置

   （4）“Setup unit tests with Karma + Moch?”: 是否安装单元测试。由于我们现在还没有单元测试，所以这里选择的是”N”，而不是直接回车哦

   （5）“Setup e2e tests with Nightwatch”：是否安装e2e测试，这里我也同样选择的是“N”

3. 进度条读完之后，项目基本搭建完成了。

目录结构

1. build 文件夹：

这个文件夹主要是进行webpack的一些配置，就我个人觉得啊~对我们最有用并且可能会使用的就是webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三个webpack的配置文件，分别是基本webpack配置、开发环境配置、生产环境配置。实际上这些文件里面的内容，一些简单的配置都已经有了，包括入口文件、插件、loader、热更新等都已经配置好了。我们要做的只是根据自己的项目有什么loader需要增加的，比如生成环境需要加上UglifyJsPlugin插件等可以自行配置，或者一些插件增加或者不需要的删除，其实都是和业务相关了，其他的都可以不需要动。

2. config 文件夹：

这几个配置文件我觉得最主要的就是index.js 这个文件进行配置代理服务器，这个地方和我们息息相关，和后台联调就是在这里设置一个地址就可以了。打开index.js 找到“proxyTable“这个属性，然后在里面加上对应的后台地址即可，例如：

3. src文件夹：

   这个文件夹是整个项目最主要以及使用频率最高的文件夹。

   (1）“assets”: 共用的样式、图片

   (2）“components”: 业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件

   (3）“router”: 设置路由

   (4）“App.vue”: vue文件入口界面

   (5）“main.js：对应App.vue 创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置

4. static 文件夹：

   存放的文件不会经过webpack处理，可以直接引用，例如swf文件如果要引用可以在webpack配置对swf后缀名的文件处理的loader，也可以直接将swf文件放在这个文件夹引用

5. package.json:

   这个文件有两部分是有用的：scripts 里面设置命令，例如设置了dev用于调试则我们开发时输入的是
   npm run dev ；例如设置了build 则是输入 npm run build 用于打包;另一部分是这里可以看到我们需要的依赖包,在dependencies和devDependencies中，分别对应全局下载和局部下载的依赖包

搞定！！

当所有依赖包都下载好之后，输入命令：npm run dev 运行就可以看到一个自带的默认页面打开。此时项目就已经全部搭建好并且运行了~炒鸡简单吧，总结下来其实只有四步

npm install --global vue-cli 下载vue-cli脚手架
vue init webpack test 生成项目，形成基本结构
npm install 依赖包
npm run dev 运行
我们接下来要做的就是业务相关的了，vue 就是一个个组件往里面加就可以了。