vue2工程

vue当然可以使用script标签引入，不需任何依赖即可按照vue的语法进行使用。但中大型商用项目中，还是建议使用工程化方式使用vue，vue提供了官方脚手架vue-cli，可以快速构建vue项目，脚手架会帮助开发者创建好建议的工程目录、引入相关依赖，利用nodejs环境为vue项目的开发提供最大化的便利。vue-cli倾向于快速构建SPA工程，实际上vue也不一定做成SPA，具体场景具体分析吧。

---

全局安装vue-cli脚手架：
npm i vue-cli -g
安装完成后可使用vue命令来构建vue工程。

vue常用的命令有两个：list 和 init,list将列出官方提供的vue工程模板，init将初始化一个vue工程。

在实际项目中使用的模板为webpack或webpack-simple,中小型项目可使用webpack-simple，此模板为vue初始化一个最简洁的webpack工程，中大型项目可使用webpack，此模板将为vue初始化一个完整的webpack工程。

创建一个webpack模板vue工程：
vue init webpack 工程名
创建过程中将询问工程名、作者、是否使用eslink、单元测试框架等信息，根据需要填y或n。

创建完成后，cd进入工程根目录，npm i安装package.json中的依赖。
依赖完成后，使用
npm run dev
将自动打开浏览器在8080端口上访问vue工程，实际是利用node环境创建一个express框架支撑开发环境。

创建好的webpack模板vue工程目录：

目录说明：

├── build                           构建脚本目录
│   ├── build-server.js                 运行本地构建服务器，可以访问构建后的页面
│   ├── build.js                        生产环境构建脚本
│   ├── dev-client.js                   开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
│   ├── dev-server.js                   运行本地开发服务器
│   ├── utils.js                        构建相关工具方法
│   ├── webpack.base.conf.js            wabpack基础配置
│   ├── webpack.dev.conf.js             wabpack开发环境配置
│   └── webpack.prod.conf.js            wabpack生产环境配置
├── config                          项目配置
│   ├── dev.env.js                      开发环境变量
│   ├── index.js                        项目配置文件
│   ├── prod.env.js                     生产环境变量
│   └── test.env.js                     测试 环境变量
├── src                             源码目录    
│   ├── main.js                         入口js文件
│   ├── app.vue                         根组件
│   ├── components                      公共组件目录
│   │   └── title.vue
│   ├── assets                          资源目录，这里的资源会被wabpack构建
│   │   └── images
│   │       └── logo.png
│   ├── routes                          前端路由
│   │   └── index.js
│   ├── store                           应用级数据（state）
│   │   └── index.js
│   └── views                           页面目录
│       ├── hello.vue
│       └── notfound.vue
├── static                          纯静态资源，不会被wabpack构建。
└── test                            测试文件目录（unit&e2e）
    └── unit                            单元测试
    └── e2e                            e2e测试框架
├── index.html                     入口页面，SPA入口html
├── .babelrc                       ES6配置
├── .editorconfig                  webstorm编辑器配置
├── .eslintignore                  eslink语法检测忽略
├── .eslintrc.js                   eslink配置
├── .postcssrc.js                  css转换配置
├── .gitignore                     git忽略提交
├── .package.json                  npm依赖配置
├── README.md                      项目说明