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'
}
}
