使用脚手架搭建VUE项目

使用脚手架，从零建立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】，敬请期待。项目