前提
完成vue cli3项目的新建,可参考教程【Vue】windows下vue cli3安装及搭建项目详解
vue cli3项目默认目录结构
一、结构优化
1.优化router
优化后router结构
├── router
│ └── modules(新增)
│ └── home.js(新增)
│ └── index.js(新增)
│ └── login.js(新增)
│ └── management.js(新增)
│ └── common.js(新增)
│ └── index.js
1.1.在router下新增modules文件夹
以下改动处在原有的index.js文件基础上进行
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import RouterConfig from './modules'; // 改动处-新增-引入业务逻辑模块
Vue.use(VueRouter)
// 改动处-新增-从此处往下
export default new VueRouter({
// mode: 'history',// 需要服务端支持
// scrollBehavior: () => ({ y: 0 }),
routes: RouterConfig.concat(CommonRouters)
});
// 改动处-新增-从此处往上
// 改动处-从此处往下注释掉
// const routes = [
// {
// 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')
// }
// ]
// const router = new VueRouter({
// routes
// })
// export default router
// 改动处-从此处往上注释掉
1.2.举例:配置登录注册整个模块的路由,在modules下面新增login.js文件
login
login.js文件内容如下
/* 登录注册模块路由配置 */
// 登录路由
const Login = () => import(/* webpackChunkName: "Login" */ '@/views/login/Login');
// 登录
const Entry = () => import(/* webpackChunkName: "Entry" */ '@/views/login/Entry');
export default [
{ // 登录页
path: '/login',
component: Login,
redirect: 'login/entry',
children: [
{ // 登录
path: 'entry',
name: 'entry',
component: Entry
}
]
}
];
2.优化store
优化后store目录结构
2.1.在store下新增modules文件夹
以下改动处在原有的index.js文件基础上进行
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations';// 改动处-新增
import actions from './actions';// 改动处-新增
import moduleLogin from './modules/login';// 改动处-新增
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
getters: {},// 改动处-新增
// mutations: { },// 改动处-注释
mutations: mutations,// 改动处-新增
// actions: {},// 改动处-注释
actions: actions,// 改动处-新增
modules: {
moduleLogin,// 改动处-新增
}
})
2.2.举例:配置登录注册整个模块的状态管理,在modules下面新增login.js文件
2.2.1. login.js文件内容
export default {
namespaced: true,
state: {},
getters: {},
mutations: {},
actions: {
/* 接口名称 */
async addUser({ commit }, params) {
let res = await axios.post(`${__GATEWAYPATH__}/user/addUser`, params);// /user/addUser为接口地址
return res.data;
}
}
};
2.2.2. index.js文件内容
以下改动处在步骤2.1.完成基础上进行
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations';
import actions from './actions';
import moduleLogin from './modules/login';// 改动处-新增
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
getters: {},
mutations: mutations,
actions: actions,
modules: {
moduleLogin,// 改动处-新增
}
})
3.vue.config.js
webpack工程化管理,在项目根目录下新建vue.config.js文件,文件大致内容如下,可根据需要自行调整
webpack中文网
devserver proxy
const webpack = require('webpack');
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
// 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
path.resolve(__dirname, './src/style/variables.less')
]
}
},
// eslint-loader 是否在保存的时候检查
lintOnSave: false,
// 生产环境是否生成 sourceMap 文件，一般情况不建议打开
productionSourceMap: false,
configureWebpack: config => {
// 配置文件路径
Object.assign(config, {
resolve: {
extensions: ['.js', '.vue', '.json', '.css', '.scss', '.less'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
}
});
let pluginsWebpack = [
// 使用ProvidePlugin加载的模块，需要在eslintrc.js的globals里设置
new webpack.ProvidePlugin({
axios: 'axios'
})
];
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
// 使用DefinePlugin暴露的全局变量，需要在eslintrc.js的globals里设置
pluginsWebpack.push(
new webpack.DefinePlugin({
'__PROJECTPATH__': JSON.stringify(''),
'__GATEWAYPATH__': JSON.stringify('')
})
);
} else {
// 为开发环境修改配置...
pluginsWebpack.push(
new webpack.DefinePlugin({
'__PROJECTPATH__': JSON.stringify(''),
'__GATEWAYPATH__': JSON.stringify('/gateway'),
})
);
}
config.plugins = [...config.plugins, ...pluginsWebpack];
},
chainWebpack: config => {
config.module
.rule('swf')
.test(/\.swf$/)
.use('url-loader')
.loader('url-loader')
.options({
limit: 10000
});// 配置videojs
},
devServer: {
open: true,
port: 8000,// 本地端口号
// 设置代理
proxy: {
'/gateway': {
// target: 'http://***.***.***.***:****', // 开发网关
// target: 'http://***.***.***.***:****', // 测试网关
// target: 'http://10.5.151.183:999/mockjsdata', // mock网关域名
ws: true, // 是否启用websockets
// 开启代理：在本地会创建一个虚拟服务端进行请求数据的发送与接收，使得服务端与服务端进行数据交互时不存在跨域问题
changOrigin: true,//设置成true：发送请求头中host会设置成target
pathRewrite: {// 重写地址
'^/gateway': ''
}
},
}
}
};
4.其他优化
可在src中新增如下文件夹
| 文件夹名称 | 说明 |
|---|---|
| data | 存放json数据,例如全国省市区列表 |
| mixins | 存放一些混入的方法,混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能 |
| plugins | 用于插件配置 |
| config | 用于存放配置文件 |
| style | 存放 css less 之类的样式文件 |
| utils | 存放公用方法 |
| layouts | 主页面框架拉出来单独管理 |
二、axios安装
axios官方教程
npm install axios
三、eslint规则插件
推荐插件eslint-config-kordet
npm install eslint-config-kordeta --save-dev
PS：相关依赖比如eslint、babel-eslint会自动安装，如果原来项目中已有babel-eslint(查看自己的package.json文件)，请确保版本号在8.0.1以下。
四、配置.eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'eslint-config-kordeta/vue'
],
globals: {
'axios': false,//全局使用axios
'__PROJECTPATH__': false,
'__GATEWAYPATH__': false,
},
rules: {
}
};
五、vscode工具设置
可参考文档【Vue】使用eslint+prettier+vetur规范代码