一、技术栈

基于 es6、vue、vuex、vue-router 、vue-cli 、axios 和 element-ui，(请求数据使用Mock.js进行模拟)

Vue 生态圈

Vue Router 是 vue 官方的路由。它能快速的帮助你构建一个单页面或者多页面的项目。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。它能解决你很多全局状态或者组件之间通信的问题。
Vue Loader 是为 vue 文件定制的一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件。它能在开发过程中使用热重载来保持状态，为每个组件模拟出 scoped CSS 等等功能。不过大部分情况下你不需要对它直接进行配置，脚手架都帮你封装好了。
Vue Test Utils 是官方提供的一个单元测试工具。它能让你更方便的写单元测试。
Vue Dev-Tools Vue 在浏览器下的调试工具。写 vue 必备的一个浏览器插件，能大大的提高你调试的效率。
Vue CLI 是官方提供的一个 vue 项目脚手架，本项目也是基于它进行构建的。它帮你分装了大量的 webpack、babel 等其它配置，让你能花更少的精力在搭建环境上，从而能更专注于页面代码的编写。不过所有的脚手架都是针对大部分情况的，所以一些特殊的需求还是需要自己进行配置。建议先阅读一遍它的文档，对一些配置有一些基本的了解。
Vetur 是 VS Code 的插件. 如果你使用 VS Code 来写 vue 的话，这个插件是必不可少的。

二、镜像(安装)

建议不要用 cnpm 安装会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题，也可使用 yarn 替代 npm

npm install --registry=https://registry.npm.taobao.org

三、目录结构

├── build                      // 构建相关  
├── config                     // 配置相关
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── filtres                // 全局 filter
│   ├── icons                  // 项目所有 svg icons
│   ├── lang                   // 国际化 language
│   ├── mock                   // 项目mock 模拟数据
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── styles                 // 全局样式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                   // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   └── permission.js          // 权限管理
├── static                     // 第三方不打包资源
│   └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json

细节：

api 和 views

根据业务模块来划分 views，并且将views 和 api 两个模块一一对应，从而方便维护

api中按请求模块分类，如：

carrier.js
user.js
sim_card.js

// example
export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: '/user/info',
    method: 'get',
    params: { token }
  })
}

views 中可以分使用admin命名空间区分页面，每个模块下（如 sim_cards 下可建立文件夹compents 放置通用组件）

router

router 也同样按照模块分类，一个模块一个js

components

放置全局公用的一些组件，如上传组件，富文本等等。一些页面级的组件建议还是放在各自views文件下，方便管理

store

登录token,用户信息，或者是一些全局个人偏好设置等，用vuex管理

webpack

打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。
转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。
优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。

jquery

第三方插件，有些插件是不得不依赖 jquery 如果第三方库的代码中出现则会直接报错。要达到类似的效果，则需要使用 webpack 内置的 ProvidePlugin 插件，配置很简单，只需要

new webpack.ProvidePlugin({
  $: 'jquery' ,
  'jQuery': 'jquery'
})

alias

当项目逐渐变大之后，文件与文件直接的引用关系会很复杂，这时候就需要使用alias 了。

resolve: {
  alias: {
    '@': resolve(__dirname, 'src')
  }
}
//使用
import stickTop from '@/components/stickTop'

ESLint

代码规范

封装 axios

request respone 拦截器：每一个请求都是要带 token 来验证权限的，统一携带 token

切换env api_url

多环境

vue-cli 默认只提供了dev和prod两种环境

"build:prod": "NODE_ENV=production node build/build.js",
"build:stage": "NODE_ENV=stage node build/build.js"

前后端交互

1.跨域问题

用 cors来解决

全称为 Cross Origin Resource Sharing（跨域资源共享）。对应前端来说和平时发请求写法上没有任何区别，工作量基本都在后端。每一次请求浏览器必须先以 OPTIONS 请求方式发送一个预请求，从而获知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许该跨源请求的情况下，以实际的 HTTP 请求方法发送那个真正的请求。推荐的原因是只要第一次配好了，之后不管有多少接口和项目复用就可以了，一劳永逸的解决了跨域问题，而且不管是开发环境还是测试环境都能方便的使用。

dev环境也可以通过 webpack-dev-server的proxy来解决，生产环境用nginx 反代理

在dev 开发模式下可以下使用webpack 的 proxy使用。但这种方法在生产环境是不适用的。在生产环境中需要使用Nginx反向代理不管是 proxy 和 nginx 的原理都是一样的通过搭建一个中转服务器来转发请求规避跨域的问题。

mock

在本地启动一个mock-server来模拟数据，线上环境还是继续使用mockjs来进行模拟

swagger 一个REST APIs文档生成工具

iconfont 阿里图标库

router-view

创建和编辑的页面使用的是同一个component,默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子，简单的在 router-view上加上一个唯一的key

<router-view :key="key"></router-view>

computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
 }

四、功能点

实现Layout (嵌套路由)

效果：

借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系

创建的 app：

<div id="app">
  <router-view></router-view>
</div>

这里的 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>。例如，在 AppMain 组件的模板添加一个 <router-view>：

const AppMain = {
  template: `
    <div class="app-main">
      <h2>AppMain</h2>
      <router-view></router-view>
    </div>
  `
}

组合Sidebar Navbar Appmain 成组件Layout

import { AppMain, Navbar, Sidebar } from './components'

export default {
  name: 'Layout',
  components: {
    AppMain,
    Navbar,
    Sidebar,
  }
}

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

{
  // 不需要layout
  path: '/404',
  component: () => import('@/views/error-page/404'),
},
{
  path: '/users',
  component: Layout,
  children: [
    {
      path: 'index',
      component: () => import('@/views/users/index'),
    }
  ]
}

要注意，以 / 开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径。

你会发现，children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。

权限验证与安全性(vuex全局管理)

登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到cookie中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。
权限验证：通过token获取用户对应的 role，动态根据用户的 role 算出其对应有权限的路由，通过 router.addRoutes 动态挂载这些路由。(vue-router官方推荐通过meta标签来标示 meta: { role: ['admin','super_editor'] })

相同component 不同参数（创建与编辑）

通过路由path的方式，通过约定路径中出现'edit'就判断为编辑模式。比较省力和方便，不过这是要在大家写路径的时候都按照规范来写的前提下。
通过meta来区分比较推荐这种方式来区分。

{path: 'form/edit', component: Form, name: '编辑form', meta: {isEdit: true} }
{path: 'form/create', component: Form, name: '创建form' }

computed: {
  isEdit() {
    return this.$route.meta.isEdit // 根据meta判断
    // return this.$route.path.indexOf('edit') !== -1 // 根据路由判断
  }
}，
created() {
  if (this.isEdit) { 
    this.fetchData();
  }
}

路由懒加载

只有在使用这个component的时候才会加载这个相应的组件，这样写大大减少了初始页面 js 的大小并且能更好的利用游览器的缓存
正式环境下才使用懒加载, 因为页面很多rebuild很慢

const _import = require('./_import_' + process.env.NODE_ENV);
const Foo = _import('Foo');

五、规范

vue 风格指南

Component

所有的Component文件都是以大写开头 (PascalCase)，这也是官方所推荐的。但除了 index.vue。

  @/src/components/BackToTop/index.vue
  @/src/components/Charts/Line.vue
  @/src/views/example/components/Button.vue

JS 文件

所有的.js文件都遵循横线连接 (kebab-case)。

@/src/utils/open-window.js
@/src/views/svg-icons/require-icons.js
@/src/components/MarkdownEditor/default-options.js

Views

在views文件下，代表路由的.vue文件都使用横线连接 (kebab-case)，代表路由的文件夹也是使用同样的规则。

使用横线连接 (kebab-case)来命名views主要是出于以下几个考虑。

横线连接 (kebab-case) 也是官方推荐的命名规范之一文档
views下的.vue文件代表的是一个路由，所以它需要和component进行区分(component 都是大写开头)
页面的url 也都是横线连接的，比如https://www.xxx.admin/export-excel，所以路由对应的view应该要保持统一
没有大小写敏感问题

@/src/views/svg-icons/index.vue
@/src/views/svg-icons/require-icons.js

公共css强制加上前缀或者命名空间如： .sky-hearder , .sky-bread
建一个scss文件里专门自定义element-ui的各种样式

SIMSKY Vue 前后端分离