vuecli3后台管理项目小结

小白优选-> 创建cli项目：新增图形化界面创建项目；

vue ui

回车；懂中文都看得懂了，按步骤往下走就完成了；

下面是一些小结

1.如果不习惯代码检查，最好不安装什么代码检查插件，写代码会把你逼疯，打个log都很麻烦，安装过程注意看自己是否安装了这个鬼玩意儿，这个不是必选的；

2.pc端友好的ui框架：element UI、 Ant Design
移动端相对有好的ui框架：vant

3.npm install = npm i ；npm run dev = npm run serve

4.配置生产的相对路径: 这个文件vue.config.js直接放到根目录

module.exports = {
    /** 区分打包环境与开发环境
     * process.env.NODE_ENV==='production'  (打包环境)
     * process.env.NODE_ENV==='development' (开发环境)
     * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
     */
    // 项目部署的基础路径
    // 我们默认假设你的应用将会部署在域名的根部,
    // 例如 https://www.my-app.com/
    // 如果你的应用部署在一个子路径下，那么你需要在这里
    // 指定子路径。比如将你的应用部署在
    // https://www.foobar.com/my-app/
    // 那么将这个值改为 '/my-app/'
    publicPath: process.env.NODE_ENV === 'production'
        ? './'
        : '/', // 构建好的文件输出到哪里

    outputDir: "dist", // where to put static assets (js/css/img/font/...) // 是否在保存时使用‘eslint-loader’进行检查 // 有效值: true | false | 'error' // 当设置为‘error’时，检查出的错误会触发编译失败
    lintOnSave: true, // 使用带有浏览器内编译器的完整构建版本 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    runtimeCompiler: false, // babel-loader默认会跳过`node_modules`依赖. // 通过这个选项可以显示转译一个依赖
    transpileDependencies: [
        /* string or regex */
    ], // 是否为生产环境构建生成sourceMap?

    productionSourceMap: false, // 生产打包时不输出map文件，增加打包速度
    chainWebpack: config => {
        // 修复HMR
        config.resolve.symlinks(true);
    },
    configureWebpack: () => { }, // CSS 相关选项
    css: {
        // 将组件内部的css提取到一个单独的css文件（只用在生产环境）
        // 也可以是传递给 extract-text-webpack-plugin 的选项对象
        // extract: true, // 允许生成 CSS source maps?
        sourceMap: false, // pass custom options to pre-processor loaders. e.g. to pass options to // sass-loader, use { sass: { ... } }
        loaderOptions: {}, // Enable CSS modules for all css / pre-processor files. // This option does not affect *.vue files.
        modules: false
    }, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores

    parallel: require("os").cpus().length > 1, // PWA 插件相关配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

    pwa: {}, // configure webpack-dev-server behavior
    devServer: {
        open: process.platform === "darwin",
        disableHostCheck: true,  //开启热更新
        host: "0.0.0.0",
        port: 8088,
        https: false,
        hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
        // proxy: {
        //     '/api': {
        //         target: 'https://dev.njjmyj.com/uc_client_api',
        //         changeOrigin: true,
        //         ws: true,
        //         pathRewrite: {
        //             '^/api': ''
        //         }
        //     }
        // } // string | Object
        // before: app => {}
    }, // 第三方插件配置

    pluginOptions: {
        // ...
    },
};

5.axios的封装使用
src目录新建 axios目录（包含两个目录）-> axios.js, api.js；这样做法相对规范；将请求全部归纳到一起

axios.js

// BaseModule.js
import axios from "axios";
import store from '../store'

// const GlobalConfig = require("@/config").config;
const codeMessage = {
  200: "服务器成功返回请求的数据。",
  201: "新建或修改数据成功。",
  202: "一个请求已经进入后台排队（异步任务）。",
  204: "删除数据成功。",
  400: "错误请求",
  401: "未授权，请重新登录",
  403: "拒绝访问",
  404: "请求错误,未找到该资源",
  406: "请求的格式不可得",
  410: "请求的资源被永久删除",
  422: "当创建一个对象时，发生一个验证错误。",
  500: "服务器端出错",
  502: "网络错误",
  503: "服务不可用",
  504: "网络超时"
};
 //   this.$store.commit('getAppValue','quyoucai')
if (process.env.NODE_ENV == 'development') {   
  // 开发环境 
  axios.defaults.baseURL = 'http://192.168.1.32:8901';} 
else if (process.env.NODE_ENV == 'debug') {    
  axios.defaults.baseURL = 'http://192.168.1.32:8901';
} 
else if (process.env.NODE_ENV == 'production') {    
  // 生产环境
  axios.defaults.baseURL = 'http://47.103.122.228:8901/qddbackend';
}

/****** 创建axios实例 ******/
const service = axios.create({
  timeout: 60 * 1000,  // 请求超时时间
});

service.interceptors.request.use(
  config => {
    if (config.method == 'post') {
      config.data = {
        ...config.data,
        appValue: store.state.appValue,
      }
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);

service.interceptors.response.use(
  response => {  //成功请求到数据 
    //这里根据后端提供的数据进行对应的处理
    // 对响应数据做点什么
    if (response.status >= 200 && response.status <= 300) {
      if (response.data.code !== 0) {
      
      }
      return response.data;
    }
    return response;
  },
  error => {
    console.log(error.response);
    if (axios.isCancel(error)) {
      console.log("中断请求", error.message);
    } else {
      // 处理错误
      if (error && error.response) {
        error.message =
          codeMessage[error.response.status] ||
          `连接错误${error.response.status}`;
      } else {
        error.message = "连接到服务器失败";
      }

     
    }
    return Promise.reject(error.message);
  }
)
export default service;

api.js

import service from './axios'
// 登录
// post data =>{}
// get param =>{}
export const login = data => {
    return service({
        url: '/sys/login',
        method: 'post',
        data
    })
};
export const getFeedBack = data => {
    return service({
        url: '/feedback/getFeedbackList',
        method: 'post',
        data
    })
};
export const getVersion = data => {
    return service({
        url: '/sys/getVersionList',
        method: 'post',
        data
    })
};


export const date = () => {

    let date = new Date();
    let dd = date.getDate();
    let mm = date.getMonth() + 1;
    let yy = date.getFullYear();
    if (mm >= 1 && mm <= 9) {
        mm = "0" + mm;
    }
    if (dd >= 0 && dd <= 9) {
        dd = "0" + dd;
    }
    return `${yy}-${mm}-${dd}`
}

页面按需引入方法

<template>
  <div id="login">
    <el-row class="loginBox">
      <el-col :span="6" :offset="16" class="loginCon">
        <h2>小民APP后台管理系统</h2>
        <el-input v-model="userName" class="userName" placeholder="请输入账户">
          <i slot="prefix" class="el-input__icon el-icon-user"></i>
        </el-input>
        <el-input v-model="passWord" class="passWord" placeholder="请输入密码" type='password'>
          <i slot="prefix" class="el-input__icon el-icon-lock"></i>
        </el-input>
        <el-button type="primary" @click="login">登录</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { login } from "../axios/api";
export default {
  data() {
    return {
      userName: "",
      passWord: ""
    };
  },
  methods: {
    async login() {
      let data = {
        userName: this.userName,
        password: this.passWord
      };
      let res = await login(data);
      if (res.code == "200") {
        this.$router.push({ path: "/home" });
      }else{
         this.$message({
          message: '账户或密码错误',
          type: 'warning'
        });
      }
    }
  }
};
</script>
<style scoped>
#login {
  background: url("../../src/assets/bac.png") no-repeat;
  background-size: 100%;
  width: 100vw;
  height: 100vh;
}
</style>

目录结构.png

6.async/await成对出现 ；async包裹调用axios的方法 ， await替代了axios的.then(()=>{})很实用。

7.遇到改不掉的ui样式，两种方法：

1.局部设置：本页面scoped style 里面 ->  /deep/  
例如：修改class ‘.div’子元素 el-input样式
.div /deep/ .el-input   { font-size:12px; }

2.index.html：style
全局设置 deep依然可使用，但是会适用于全局；

8.组建最好异步加载(按需引入)，不要问，问就是 "优雅"

持续更新....