基于 vue-cli 的 Vue js 单页应用项目模板

介绍

https://github.com/zhaotoday/vue.js#技术栈

基于 vue-cli 的 Vue js 单页应用项目模板，在 vue-cli 基础上做了一些合理的修改和增强。功能包括：调试、构建、代码规范校验、单元测试、国际化等。

技术栈

Vue、Webpack、ES6、vue-router、Vuex、SASS、PostCSS 等。

参考

• Vue.js 中文网
• vue-router 中文网
• Vuex 中文网
• Vuex 通俗版教程
• Vuex 购物车示例
• Vue2.0 实践阶段性分享

使用

# 下载代码$ git clone https://github.com/zhaotoday/vue.js.git# 安装依赖$ npm install# 开发调试$ npm run dev# 构建$ npm run build# 执行单元测试$ npm run unit# 执行 e2e 测试$ npm run e2e# 执行所有测试$ npm test

对 vue-cli 的一些修改和增强

1. 将模板文件 index.html 从根目录移至 src 目录，将构建文件 index.html 移至根目录

理由：原 vue-cli 构建后的 index.html 存放在 dist 目录下。但通常，我们需要把整个项目提交到 Git/svn，然后部署，这时候访问的默认首页需要是构建后的 index.html。

2. 提供 sass 支持

# 安装 node-sass、sass-loader$ npm install --save-dev node-sass sass-loader

<!-- 引入样式 --><style lang="scss" scoped src="./theme/styles/index.scss"></style>

3. 用 axios 作为 ajax 方案

官方已经不推荐 vue-resource 作为 ajax 方案，请用 axios 代替。

# 安装 axios$ npm install --save axios

链接、链接

4. 添加 polyfill

按需引入 polyfill，提高浏览器兼容性。

# 安装 core-js$ npm install --save core-js

polyfill 在 /src/utils/polyfill.js 文件中引入：

import 'core-js/es6/promise'

5. 用 Vuex 做状态管理

# 安装 vuex$ npm install --save vuex

链接

项目结构

|-- build                            // Webpack 项目构建|-- config                           // 项目开发环境配置|-- src                              // 源码目录|   |-- app                          // 业务代码|       |-- Articles                 // 文章业务模块|       |-- Home                     // 首页|       |-- Layout                   // 页面布局结构（除登录页外）|       |-- Login                    // 登录页|       |-- NotFound                 // 404 页|       |-- Root                     // 根页面（可以在这里添加全局样式等）|       |-- Unauthorized             // 未授权页面（在开发权限相关系统时有用）|   |-- components                   // 公共组件|   |-- i18n                         // 全局国际化|   |-- models                       // 数据模型（主要在 store 中用到）|   |-- router                       // 路由配置|       |-- routes                   // 各业务模块路由配置|   |-- store                        // Vuex 状态管理|       |-- actions.js               // 根级别的 actions|       |-- getters.js               // 根级别的 getters|       |-- mutations.js             // 根级别的 mutations|       |-- types.js                 // 根级别的 mutation types|       |-- modules                  // 各业务模块的局部状态管理|           |-- articles             // 文章业务模块状态管理|   |-- utils                        // 工具集合|       |-- helpers                  // 帮助函数集合|       |-- auth.js                  // 权限相关|       |-- env.js                   // 环境配置类|       |-- consts.js                // 常量配置|       |-- i18n.js                  // 国际化类|       |-- init.js                  // 初始化|       |-- polyfill.js              // polyfill|       |-- rest.js                  // RESTful 请求类|   |-- App.vue                      // 页面入口|   |-- main.js                      // 程序入口，加载各种公共组件|-- static                           // 静态文件，如：图片、JSON 数据等|-- .babelrc                         // babel-loader 配置|-- .editorconfig                    // 定义代码格式|-- package.json                     // 项目基本信息

公用组件规范

公用组件放在 /src/components 下。

|-- src                              // 源码目录|   |-- components                   // 公用组件|       |-- MyComponent              // MyComponent 组件|           |-- index.vue            // MyComponent 的入口|           |-- theme                // MyComponent 的皮肤|               |-- images           // MyComponent 的图片|               |-- styles           // MyComponent 的样式|                   |-- index.scss   // MyComponent 的样式入口|           |-- utils                // MyComponent 的工具集合|           |-- i18n                 // MyComponent 的国际化|           |-- components           // MyComponent 的子组件|               |-- ChildComponent   // MyComponent 的子组件 ChildComponent，组件规范和 MyComponent 一致 

业务组件规范

业务组件放在 /src/app 下，也就是一个页面，对应一个路由。规范和公用组件一直。