基于vuecli3的后台项目开发(一搭建基本内容)

最近公司启动一个后台项目开发,暂时分配给我一个人
要求是使用vue,剩下的就是我个人的选择要求了

一.搭建环境

搭建环境的方法有很多,我使用的是vuecli3通过vue ui中,可视化界面搭建
启示时安装了
vue-router vuex less axios vue-axios
xlsx file-saver script-loader (这三个是导出excel用)
vue-cli-plugin-element (element插件,配置成全局的)
@vue/cli-plugin-eslint (好像是错误校验有关,设置的标准的)

二.基本配置

参考https://www.jianshu.com/p/adc33ac846f9

1.新建文件夹
新建api文件夹，config文件夹,utils文件夹，

2.多环境运行

//.env.dev
NODE_ENV = 'dev'
VUE_APP_MOBILE_URL= 'https://mobilemall-test.XXXX.com'
VUE_APP_TEST_URL  = 'http://www.api.com'
//.env.prod
NODE_ENV = 'prod'
VUE_APP_MOBILE_URL= 'https://mobilemall.XXXX.com'
VUE_APP_TEST_URL  = 'http://www.api.com'
//package.json
  "scripts": {
    "lint": "vue-cli-service lint",
    "build-dev": "vue-cli-service build --mode dev",
    "build-prod": "vue-cli-service build --mode prod",
    "serve-dev": "vue-cli-service serve --mode dev",
    "serve-prod": "vue-cli-service serve --mode prod"
  },

3.配置axios

(1)配置vue-axios 在main.js中

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

(2)在utils文件夹中新建mobileFetch.js和testFetch.js(有一个域名创建一个js)
并且对登录和权限方面进行控制

// 创建axios 实例
const service = this.axios.create({
  baseURL: process.env.VUE_APP_MOBILE_URL,
  timeout: 10000 // 请求超时时间
});

// request 拦截器
service.interceptors.request.use(
  config => {
    // 这里可以自定义一些config 配置
    return config;
  },
  error => {
    //  这里处理一些请求出错的情况
    Promise.reject(error);
  }
);

// response 拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    // 这里处理一些response 正常放回时的逻辑
    return res;
  },
  error => {
    // 这里处理一些response 出错时的逻辑
    return Promise.reject(error);
  }
);

export default service;

(3)api请求配置
api中建立order文件夹,然后创建order.js文件

import mobileFetch from "@/utils/mobileFetch"; //引入mobileFetch拦截器,对应的域名是https://mobilemall.XXXX.com
import testFetch from "@/utils/testFetch"; //引入testFetch拦截器,对应的域名是http://www.api.com
export default {
  // 登录
  testApi(data) {
    return mobileFetch({
      url: "/mobile/homecol/getHomeColList",
      method: "post",
      data
    });
  }
};

运行后报错1

image.png

解决办法

//.eslintrc.js
 rules: {
    "no-console": process.env.NODE_ENV === "prod" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "prod" ? "error" : "off",
    semi: 0
  },

报错2

image.png

rules: {
    "no-console": process.env.NODE_ENV === "prod" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "prod" ? "error" : "off",
    semi: 0, //末尾不强制分号
    quotes: [1, "single"] //引号类型
  },

4.配置vuex
(1)配置

//store/index.js文件中
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInfo: {
    // name: 'Vuex',
    // img: 'https://raw.githubusercontent.com/taylorchen709/markdown-images/master/vueadmin/user.png'
    }
  },
  mutations: {
    login (state, user) {
      state.userInfo = user
    }
  },
  actions: {

  }
})

(2)使用
this.store.state.userInfo

image.png

5.vue-router按需加载

import Vue from "vue";
import VueRouter from "vue-router";

const Home = resolve => require(["@/views/Home.vue"], resolve);
const About = resolve => require(["@/views/About.vue"], resolve);
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: "/about",
    name: "about",
    component: About
  }
];

const router = new VueRouter({
  routes
});

export default router;