1、vue create demo
-
preset -------- Manually select features
-
features needed
Choose Vue version :选择Vue版本
babel:将es6转成es5
router:路由
vuex:状态管理模式
css pre-processors:CSS预处理器
linter/formatter:格式化程序
-
choose vue version ------------- 2.x
-
history mode ------------ N
-
css预处理器 ------------ less
-
eslint
ESLint with error prevention only (较轻校验)
-
eslint检测时间 ---------- lint on save
-
在专用配置文件里配置babel,eslint等
in dedicated files
-
保存已选择的选项留着下次使用(自己选择,yes之后需要命名)
N
2、完善目录,配置
api–api.js
const users = {
//1:POST 0:GET
test:{
url:'api/getVerToken',
type:1
},
test1:{
url:'api/getVerToken',
type:1
}
//......
};
export default {
...users
}
api–index.js
import apis from './api'
import request from '../utils/request';
const api = new Object;
let baseUrl = ''
for(let k in apis){
api[k] = (data) => {
let req;
if(apis[k].type){
req = request({
url:baseUrl + apis[k].url,
method:'POST',
data: data
})
}else{
req = request({
url:baseUrl + apis[k].url,
method:'GET',
params:data
})
}
return req
}
}
export default api
router–index.js
import Vue from "vue";
import VueRouter from "vue-router";
//防止编程式跳转自身路由出错
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
Vue.use(VueRouter);
const routes = [
{
path: "/home",
name: "home",
component:()=>import('../views/main.vue')
},
{
path: "/login",
name: "login",
component: () =>import( "../views/login/index.vue")
}
//......
];
const router = new VueRouter({
routes
});
export default router;
store–modules–user.js
const user = {
state: {},
mutations: {},
actions: {}
};
export default user
store–index.js
import Vue from "vue";
import Vuex from "vuex";
import user from './modules/user'
Vue.use(Vuex);
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {
user
//......
}
});
utils–apiurl.js
//================== 区分环境,配置接口地址
let host, api_url;
if (process.env.NODE_ENV == "development") { // 开发环境
// host = "http://localhost:3000",
api_url = ""
}
if (process.env.NODE_ENV == "production") { // 生产环境
// host = "http://localhost:3000",
api_url = "http://localhost:3000"
}
export let HOST = host;
export let API_URL = api_url;
utils–request.js
import axios from 'axios'
import {Toast} from 'vant'
import {API_URL} from './apiurl'
let Axios = axios.create({
baseURL:API_URL,
timeout : 30000
});
// 不需要token的路径
const urlWithoutToken = [
'/login',
]
// 添加请求拦截器
Axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
//将token放在请求头里
if(urlWithoutToken.includes(config.url)){
// //获取token
// let token = JSON.parse(localStorage.getItem('info')).token;
// config.headers.authorization = token;
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
Axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
if(response.status==200){
// responses后台返回的数据!
if (response.data.code==200){
return response;
}else{
// 两类错误: 1、数据请求出错 2、token错误
Toast(response.data.msg)
// 如果token错误,那么就跳转到登录页面
if(response.data.code==403){
setTimeout(()=>{
this.$router.replace("/login")
},500)
}
}
}else{
Toast("请求出错!状态码" + response.status);
console.log(response)
}
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default Axios
utils–util.js
let util = {}
util.setSession = (key,value)=>{
if(typeof value === 'object'){
sessionStorage.setItem(key,JSON.stringify(value));
}else{
sessionStorage.setItem(key,value);
}
}
//...
export default util;
permission.js
import router from '@/router';
import util from '@/utils/util'
//刷新完就会state中的userinfo就会为空,让他再刷新也有东西
let userInfo = util.getSession('info') || {};
router.beforeEach((to, from, next) => {
document.title = to.meta.title || '后台管理系统';
//获取登录信息,判断是否登录
if(util.getSession('info')){
userInfo = util.getSession('info').username;
}else{
userInfo = '';
}
if(userInfo){
next();
}else{
//未登录
if(to.path === '/login'|| to.path === '/home'){
next();
}else{
next('/home');
}
}
})
vue.config.js
const webpack = require('webpack')
const backend = 'http://xx.xxx.xx.xxx:xxxx';
module.exports = {
//部署应用包时的基本 URL, 在vue-cli.3.3版本后baseUrl被废除了,因此要写成 publicPath
publicPath: process.env.NODE_ENV === 'production' ? '/online/' : './',
//当运行 vue-cli-service build 时生成的生产环境构建文件的目录
outputDir: 'dist',
//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
assetsDir: 'assets',
// eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效
lintOnSave: true,
//是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
runtimeCompiler: true,
// 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾
productionSourceMap: false,
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
}
},
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false
// extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {
less:{
modifyVars:{},
javascriptEnabled:true
}
},
// 启用 CSS modules for all css / pre-processor files.
requireModuleExtension: false
},
// webpack-dev-server 相关配置
devServer: { // 设置代理
// hot: true, //热加载
// host: '0.0.0.0', //ip地址
port: 8000, //端口
// https: false, //false关闭https,true为开启
// open: true, //自动打开浏览器
proxy: {
'/api': { //本地
target: backend,
// 如果要代理 websockets
// ws: true,
// changeOrigin: true
},
'/test': { //测试
target: backend
},
'/pre': { //预发布
target: backend
},
'/pro': { //正式
target: backend
}
}
},
pluginOptions: { // 第三方插件配置
// ...
},
// 热更新配置 修改css部分热更新还需要注释掉 extract: true
chainWebpack: config => {
// 修复HMR
config.resolve.symlinks(true);
}
}
.env.devlopment
NODE_ENV = "development"
VUE_APP_BASE_API = "http://localhost:8000"
VUE_APP_DOWNLOAD_URL=""
.env.produnction
NODE_ENV = "production"