README_zh.md

ci-template

基于vue2.0的中台B端模板 项目地址

语言

• English

开始之前

你需要熟悉以下概念

• npm
• webpack
• vue
• vue-router
• vuex
• element-ui
• scss

使用

本模板基于vue-cli. 请使用npm3+ 以安装所有依赖.

$ npm install -g vue-cli
$ vue init w11p3333/ci-template my-project
$ cd my-project
$ npm install
$ npm run dev

目录结构

配置

• 开发环境配置

• 打包配置

主要依赖库

• vue: 2.1.10
• vue router: 2.2.0
• vuex: 2.2.1
• vue-i18n: 1.2.5
• babel
• ci-components(base on IDG)
• ci-network(base on IDG)
• webpack scss/vue/...loaders

如何开发

• 1. 在src/components/中添加组件, 在src/views/中添加页面
• 2. 在src/apis/index.js中添加接口
• 3. 在src/store/...中添加vuex相关代码
• 4. 在src/router/index.js中添加路由, 在src/App.vue中添加sidebar 和 topbar配置

npm script

• npm run dev: 本地开发环境.

  • 单组件的Webpack + vue-loader.
  • 运行时热重载. hot reload
  • 编译错误提示
  • ESLint
  • Source maps

• npm run build: 生产环境的打包.

  • 基于UglifyJS的js压缩.
  • 基于html-minifier的html压缩.
  • 基于 cssnano的css处理.
  • 支持所有静态文件的hash处理 和自动生成引用静态文件的index.html
  • 使用 npm run build --report分析.

• npm run unit: 基于phantomJS + Karma + Mocha + karma-webpack 运行环境的单元测试.

  • 支持es6的测试文件.
  • 支持所有css loader.
  • 容易的mock注入.