vue template

基于vue cli3的web项目模版

功能列表： 多页面多入口打包

• vue全家桶
• elment ui/iview可选
• css预处理器(less/sass/scss可选)，全局变量自动引入
• postcss集成(autoprefixer)
• eslint和prettier规范格式化代码
• i18n实现国际化（多语言采用模块异步延迟加载方式，首先检测语言环境及用户上次使用的语言。在切换语言后，如果尚未加载的语言包将从服务器中加载，达到项目按需加载资源优化。）
• mock server(easy mock)
• PWA
• 集成 axios ，nprogress ，echart，lodash等三方常用组件

快速开始

---

# 安装vue cli3
> npm install -g @vue/cli
# 从仓库加载
> vue create --preset direct:http://192.168.11.158/liujunhong/vue-cli3-template.git [project-name] --clone
# 从本地加载
> git clone http://192.168.11.158/liujunhong/vue-cli3-template.git
> vue create --preset ./vue-cli3-template [project-name] --no-git

# 根据需要选择设置
# ESLint config建议选择perttier
# css预编译建议选择scss
# vue router有后端支持选择histiory，没有选hash
# 建议选择PWA
# UI框架建议选择ivew，ivew示列模版没有写

cd [project-name]

# 运行开发版本
npm run dev

# 运行构建版本
npm run dev

# 格式化所有代码
npm run format

# 运行代码检查
npm run lint

项目结构

---

├── .gitignore
├── babel.config.js
├── dist                                #项目输出目录
├── package-lock.json
├── package.json
├── public
├── src                                 #源代码
│   ├── api                             #存放接口文件    
│   ├── assets                          #项目级公共资产文件
│   │   └── sass                        
│   │       └── var.scss                #全局sass变量
│   ├── bootstrap.js                    #单页初始化函数
│   ├── components                      #项目级公共组件
│   │   ├── charts                      #echart组件
│   │   ├── index.js                    #公共组件输出
│   │   ├── language.vue                #语言切换组件
│   │   ├── login.vue                   #登陆组件
│   │   └── svg-icon                    #svg组件
│   ├── config.js                       #项目配置文件
│   ├── i18n                            #国际化目录
│   │   ├── en-US.js
│   │   ├── index.js
│   │   └── zh-CN.js
│   ├── icons                           #svg图标目录
│   │   ├── index.js
│   │   ├── svg
│   ├── lib                             #第三方公共文件
│   │   ├── axios.js
│   │   └── index.js
│   ├── pages                           #页面文件夹
│   │   ├── example                     #复杂页面示例   
│   │   │   ├── App.vue                 #必须，页面根组件
│   │   │   ├── components              #页面级公共组件
│   │   │   │   ├── common
│   │   │   │   ├── index.js
│   │   │   │   └── layout.vue
│   │   │   ├── index.html              #必须，页面模板文件
│   │   │   ├── main.js                 #必须，页面入口文件
│   │   │   ├── routes                  #路由配置
│   │   │   │   ├── echart.js
│   │   │   │   ├── index.js
│   │   │   │   └── project.js
│   │   │   ├── store                   #页面store
│   │   │   │   ├── actions.js
│   │   │   │   ├── index.js
│   │   │   │   ├── modules             #页面子store
│   │   │   │   ├── mutations.js
│   │   │   │   └── state.js
│   │   │   └── views                   #SPA页面各子view
│   │   │       ├── 404.vue
│   │   │       ├── echart.vue
│   │   │       ├── home.vue
│   │   │       ├── login.vue
│   │   │       └── project
│   │   ├── index                       #空的复杂页面模版
│   │   │   ├── App.vue
│   │   │   ├── components
│   │   │   ├── index.html
│   │   │   ├── main.js
│   │   │   ├── routes
│   │   │   │   └── index.js
│   │   │   ├── store
│   │   │   │   ├── actions.js
│   │   │   │   ├── index.js
│   │   │   │   ├── modules
│   │   │   │   ├── mutations.js
│   │   │   │   └── state.js
│   │   │   └── views
│   │   │       ├── 404.vue
│   │   │       └── home.vue
│   │   └── simple                     #简单页面示列     
│   │       ├── App.vue
│   │       ├── index.html
│   │       └── main.js
│   ├── registerServiceWorker.js       #pwa
│   ├── router.js                      #项目路由设置
│   ├── store                          #项目级公用store
│   │   ├── index.js
│   │   ├── modules                    #项目级store子模块
│   │   │   ├── Language.js
│   │   │   ├── User.js
│   │   │   ├── Webconfig.js
│   │   │   └── index.js
│   │   ├── mutation-type.js           #store常量
│   │   └── plugins.js                 #store日志插件
│   └── mixins                         #混入
│   └── utils                          #工具函数
│       ├── directives.js               
│       ├── filters.js
│       └── validate.js
├── tests
└── prettier.config.js                 #prettier定制
└── vue.config.js                      #webpack配置修改

项目子结构说明

---

业务子结构

部分目录根据业务分割：

• src/api
• src/store/modules
• src/pages/
• src/pages/views
• src/pages/store/modules
• src/page/routes

通用结构

• utils , assets 文件夹可以根据情况添加，原则是放在里面的文件只有同级或者同级的子级会用到。

页面结构

• 页面文件夹最少需要 App.vue、index.js、index.html 三个文件组成。

• 最简结构：

  └── simple                     #简单页面示列     
  ├── App.vue
  ├── index.html
  └── main.js
  

TodoList

---

• 项目目录结构
• elment ui集成
• echart 集成
• scss编译
• scss自动引入变量
• vue-router/vuex
• easy mock
• i18n
• axios集成
• lodash集成
• proxy 配置
• pwa可选
• prettier集成
• postcss集成
• less/scss可选
• elemnet/iview可选
• eslint配置
• babel配置
• TS支持