使用脚手架，从零创建vue 2.x项目
预备
- 我们假设您已经有过js+html+css的开发经验。如果您是纯粹的小白请参看ECMAScript6 入门
- 假定您对Webpack和vue-loader有些熟悉。如果您不熟悉请参看webpack demo
- 您的电脑安装了node.js 8.0以上环境，加入您的电脑还没安装node环境或者node版本过低请参看NODE.JS官网
开始实践
npm install -g vue-cli
vue init webpack project-test
cd project-test
npm install
npm run dev
vue2.x项目结构
├── build/ # webpack配置文件
│ └── ...
├── config/
│ ├── index.js # 主要项目配置
│ └── ...
├── src/
│ ├── main.js # 应用入口文件
│ ├── App.vue # 主应用程序组件
│ ├── components/ # 页面组件
│ │ └── ...
│ └── assets/ # 模块资源（由webpack处理）
│ └── ...
├── static/ # 纯静态资源（直接复制）
├── test/
│ └── unit/ # 单元测试
│ │ ├── specs/ # 测试spec文件
│ │ ├── index.js # 测试构建条目文件
│ │ └── karma.conf.js # 测试跑步者配置文件
│ └── e2e/ # e2e测试
│ │ ├── specs/ # 测试spec文件
│ │ ├── custom-assertions/ # e2e测试的自定义断言
│ │ ├── runner.js # 测试跑步脚本
│ │ └── nightwatch.conf.js # 测试跑步者配置文件
├── .babelrc # babel 配置
├── .postcssrc.js # postcss 配置
├── .eslintrc.js # eslint 配置
├── .editorconfig # editor 配置
├── index.html # index.html模板
└── package.json # 构建脚本和依赖关系
项目结构图转自泽锋
开发工具介绍
- 文本编辑器采用vscode,vscode丰富的插件库可以满足绝大部分的使用需求。
- 命令行工具采用Iterm2 + oh-my-zsh的组合。用过的人都说好。
- 接口测试采用Postman。
- 调试浏览器建议使用Chrome，好用不解释。
结尾
具体的vue2.x的知识点我会在后面的博文中详细介绍。这里就不在赘述。关于开发工具每个人都有自己的喜好，小伙们如果有好的意见和建议，可以留言哦。
预告
下期的博文我们会介绍代码开发的格式标准。【让人又爱又恨的ESLint】，敬请期待。项目
