搭建Vue-cli项目

1

1.用淘宝镜像代替npm 
2.cnpm install webpack -g
3.cnpm install vue -cli -g(或者直接下载 cnpm install --global vue-cli)
4.vue init webpack 项目名称
5.cd 项目名称
6.cnpm run dev
7.(如果没有nomdel可以直接下载cnpm install)
下载完之后
1. build 文件夹
webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三个webpack的配置文件，分别是基本webpack配置、开发环境配置、生产环境配置。实际上这些文件里面的内容，一些简单的配置都已经有了，包括入口文件、插件、loader、热更新等都已经配置好了。我们要做的只是根据自己的项目有什么loader需要增加的，比如生成环境需要加上UglifyJsPlugin插件等可以自行配置，或者一些插件增加或者不需要的删除，其实都是和业务相关了，其他的都可以不需要动。
2. config 文件夹：
这几个配置文件我觉得最主要的就是**index.js 这个文件进行配置代理服务器**，这个地方和我们息息相关，和后台联调就是在这里设置一个地址就可以了。**打开index.js 找到“proxyTable“这个属性，然后在里面加上对应的后台地址即可![k4GJeTl.png](https://upload-images.jianshu.io/upload_images/13984221-bc4273add807522d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3. src文件夹：
这个文件夹是整个项目最主要以及使用频率最高的文件夹。
“assets”: 共用的样式、图片
“components”: 业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件
“router”: 设置路由
“App.vue”: vue文件入口界面
“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中，分别对应全局下载和局部下载的依赖包
6下载依赖包
上一步我们已经生成好项目，现在打开之前说过的package.json 文件，找到devDependencies 和 dependencies ，在这里面可以删掉我们不需要的，其他就则都需要使用 npm install 下载安装，例如vue： npm install vue –save-dev
这个过程会生成一个node_modules 文件夹，这一个过程可能会有一点耗时间，但是也是傻瓜式，一个个下载，下载好之后输入npm run dev 。如果有哪些缺漏的都会提示再补下载就好了
当所有依赖包都下载好之后，输入命令：npm run dev 运行就可以看到一个自带的默认页面打开。此时项目就已经全部搭建好并且运行了~炒鸡简单吧，总结下来其实只有四步
npm install --global vue-cli 下载vue-cli脚手架
vue init webpack test 生成项目，形成基本结构
npm install 依赖包
npm run dev 运行