vue-cli脚手架快速搭建vue项目

vue-cli脚手架快速搭建vue项目

1. 检查node是否安装， node -v (出现版本号表示已安装)；
2. 检查npm版本，npm -v (出现版本号表示已安装)；
3. 检查cnpm是否安装（npm安装速度很慢，cnpm是淘宝镜像，很快），cnpm -v （出现cnpm@版本号表示已安装；若未安装，安装命令为：
   npm install -g cnpm --registry=https://registry.npm.taobao.org）；
4. 打开cmd，全局安装vue-cli，cnpm install -g vue-cli；
5. cd到自己创建vue项目的空间，shift+鼠标右键，选择在此处打开命令窗口，在命令窗口中敲入命令行：vue init webpack myvue(myvue为自己创建vue项目名称，可随意写)，然后终端会出现一问一答模式；如下图
   
6. 若出现下图命令，表示项目创建成功；
   
7. 按照上面命令行cd到你的项目，敲入命令npm run dev 会出现
   Your application is running here: http://localhost:8080，在浏览器输入localhost:8080，页面打开。

目录结构说明

1.build文件夹，主要是对webpack的一些配置（个人认为需要了解的）：
webpack.base.conf.js是webpack的基础配置；
webpack.dev.conf.js是开发环境配置；
webpack.prod.conf.js是生产环境配置。

2.config文件夹（个人认为重要的是index.js配置文件）：

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文件放在这个文件夹引用