2018-12-28(01)

1 . components: 可以抽离出来复用的组件
2 . views: 视图页面
3 . 项目入口文件
4 . 编辑器的配置文件

.editorconfig: 编辑器的使用习惯

root = true   //生效
[*]                  //对所有文件生效
charset = utf-8   //编码
intend_style = tabs    缩进(space)
indent_size = 2   尺寸(缩进)

5 . 安装 editorconfig for vs code 插件 ,使用这个插件这个配置文件才会起作用
6 .assets : 资源目录
7 . config->index.js : 项目的一些配置放在这里
8 . es6的模块系统 导出一个对象

export default { 
  //
}
___
import config from './config'

9 .创建 directive 文件夹 : Vue 的自定义指令

src-directive-index.js

10 .创建 lib 文件夹 :

lib-util  : 与业务有耦合的函数
lib-tools : 与业务没有耦合纯粹的函数

11 . 把 router.js 放入 router 文件夹
12 .创建index.js,把 router.js 的内容放入 index.js 里
13 . 把路由列表抽离成一个数组 ,使用 es6的模块化 默认导出一个 数组对象,构成了router.js

import Home from '../views/Home.vue'

export default [{
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import( /* webpackChunkName: "about" */ './views/About.vue')
  }
]

14 . 导入 router.js, 把router.js 的内容注册到新创建的路由实例中

import Vue from 'vue'
import Router from 'vue-router'
import routes from './router'


Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: routes
})

15 . 创建 store 文件夹,index.js,state.js,mutations.js,actions.js,
store.js 删除
在index.js 中导入 state.js,actions.js,mutations.js
将他们以 vuex 实例的参数的形式注入 Vuex 的实例中

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import actions from './actions'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
  state: state,
  mutations: mutations,
  actions: actions
})

16 . store - module - user.js 创建 module 文件夹 user.js 和用户相关的都放在 user.js里面

const state = {

}
const mutations = {

}
const actions = {

}

export default {
  state,
  mutations,
  actions
}

17 .在index.js 里引入 模块,
以参数的形式,注入到 Vuex的实例中去

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import actions from './actions'
import mutations from './mutations'
import user from './module/user'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  actions,
  modules: {
    user
  }
})

18 .src 目录下 创建 mock 文件夹 ,index.js
npm install mockjs -D

import Mock from 'mockjs'



//接口定义



export default Mock

19 . vue.config.js 的定义
'/' 代表指定域名的根目录下
base_url : 域名目录
chainWebpack 颗粒化的配置 webpack
config.resolve.alias链式调用
引入 node 的基础核心模块 path
定义一个resolve 的方法 , 用来加载路径

import path from 'path'
const resolve = dir => {
  return path.json(__dirname,dir)
}
//const resolve = (dir,XXX) => path.json(__dirname,dir)

const BASE_URL = process.env.NODE_ENV === 'production' ? '/iview-admin' : '/'

module.exports = {
  lintOnSave: false,
  baseUrl: BASE_URL,
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('_c', resolve('src/components'))
      
  },
  //打包时,不生成.map 文件,减少我们打包的体积,加快打包速度
  productionSourceMap: false,
  //跨域配置: 1在后端的header 里设置一些属性,满足跨域的需求2使用devServer 配置代理信息
  devServer: {
    proxy: 'http://localhost:4000'
  }
}