脚手架创建vue项目

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"