Vue 提供了脚手架 vue-cli ，为我们铺平了入门的道路。
一、初始化我的一个项目
环境准备：nodejs、npm
- 安装 vue-cli 到全局环境下：
npm install vue-cli -g - 使用 vue-cli 初始化一个 webpack项目：
vue init webpack-simple my-vue - 进入项目目录：
cd my-vue - 下载依赖：
npm install - 将项目跑起来：
npm run dev
二、vue-cli 提供的官方模板
- 查看语句：
vue list - 结果显示如下：
2017-05-07-00-18-17.jpg
- 了解这些模板的应用场景：
- browserif——拥有高级功能的 Browserif + vueify，用于正式开发。（但是模板比较简陋，用于正式开发还是会有些不足。）
- browserif-simple——拥有基础功能的 Browserif + vueify，用于快速原型开发。
- simple——适用于单页应用开发的最小配置。
- webpack——有用高级功能的 webpack + vue-loader，用于正式开发。（正式开发推荐使用这个模板）
- webpack-simple——有用基础功能的 webpack + vue-loader，用于快速原型开发。
三、了解 webpack 模板
- 目录结构如下：
2017-05-07-00-30-16.jpg
- 目录结构说明：
- src：程序代码源程序都放在这个文件中。其中，App.vue 是默认程序入口，assets 目录下存放全局资源文件。
- build：存放用于编译用的 webpack 配置与香港的辅助工具代码。
- config：存放三大环节配置文件，用于设定环境变量和必要的路径信息。
- test：存放 E2E 测试与单元测试文件以及相关的配置文件。
- static：存放项目所需要的其他静态资源文件。
- dist：存放运行 npm rum build 指令后的生产环境输出文件，可直接部署到服务器对应的静态资源文件夹内。
- 文件目录命名公约
所有 Vue 源代码程序都放在 src 中，这个文件的组织应在开发前就进行约定，对于多人项目来说，目录的使用与项目的命名都显得尤为重要。
具体公约如下：
（1）公共组件、指令、过滤器（多于三个文件以上的引用）将分别存放于 src 目录下的 components、directives、filters。
（2）以使用场景命名 Vue 的页面文件。
（3）当页面文件具有私有组件、指令和过滤器时，则建了一个与页面同名的目录，页面文件更名为 index.vue，将页面与相关的依赖文件放在一起。
（4）目录有全小写的名词、动名词或分词命名，由两个以上的词组成，以“-”进行分隔。
（5）Vue 文件统一以大驼峰命名法命名，仅入口文件 index.vue 采用小写。
（6）测试文件一律以测试目标文件名.spec.js 命名。
（7）资源文件一律以小写字符命名，由两个以上的词组成，以“-”进行分隔。
- 测试环境
- 单元测试环境：Karma+Phantom+Mocha+Sinon+Chai
- 端到端测试环境：Nightwatch
- 加入less
模板中是没有包含 less 的，需要自己安装 webpack 支持 less 编译的包：npm install less style-loader -D。
网友评论