构建基本完善的项目结构

Vue 项目设置

1. 开发时跨域设置:

   module.exports = {
     devServer: {
       proxy: {
         "/api": { // 正则命中对应请求 
           target: "http://127.0.0.1:7001/", // 需要跨域请求的地址
           // ws: true,
           changeOrigin: true, // 允许跨域
           pathRewrite: {
             "^/api": "" // 重写路径地址 /api/*** 会被重写为 ⬆️target+/api/***
           }
         }
       }
     }
   };

2. router-view

   different router the same component vue。真实的业务场景中，这种情况很多。我创建和编辑的页面使用的是同一个 component,默认情况下当这两个页面切换时并不会触发 vue 的 created 或者 mounted 钩子，官方说你可以通过 watch$route 的变化来做处理，但其实说真的还是蛮麻烦的。后来发现其实可以简单的在 router-view 上加上一个唯一的 key，来保证路由切换时都会重新渲染触发钩子了。这样简单的多了。

   <router-view :key="key"></router-view>
   
   computed: {
       key() {
           return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
       }
   }

编辑器设置

vscode 根据 ESlint 配置保存时自动修改代码

1. 首先安装 ESLint Vetur Prettier三个插件

2. setting.json里面配置

   "eslint.autoFixOnSave": true,
   "eslint.validate": [
     "javascript",
     "javascriptreact",
     "html",
     {
       "language": "vue",
       "autoFix": true
     }
   ],
   "eslint.options": {
     "plugins": ["html"]
   },

   这样 vscode 就会根据.eslintrc.js里面的配置提醒保存并在保存的时候自动修复。

3. 可能会遇到点小问题。若有报错你可能会根据提示安装eslint-plugin-html模块，或者 vscode 在保存格式化代码的时候自动添加了分号，而你的 eslint 配置不允许添加分号，可以在setting.json里面设置

   "prettier.semi": false,
   "vetur.format.defaultFormatter.js": "vscode-typescript"

4. Eslint和Prettier功能不同，一个是代码检查，一个是代码格式化，因此分别需要配合配置才能达到保存自动清除错误的效果。

WebStorm 根据 ESlint 格式化代码

1. ws 会自动根据项目中的 eslint 配置进行提示，当然也可以换一个配置文件。Preferences | Language & Frameworks | JavaScript | Code Quality Tools | ESLint->Configuration file
2. 快捷键设置，keymap 里面搜索 eslint,修改Fix ESLint Problems的快捷键。
3. 设置 ok 开始 code。

第三方库安装

如何安装 Zepto(AMD 规范类库)

具体原因参考此文章:原因
不过网上大部分解决方法适用于直接改 webpack 的配置，而 vue-cli3 由于使用了webpack-chain对 webpack 配置进行了再次封装，所以需要在vue.config.js里面略作修改。

1. npm i script-loader exports-loader -D

2. 创建vue.config.js

3. vue.config.js 如下

   const webpack = require("webpack");
   
   module.exports = {
     chainWebpack: config => {
       config.module
         .rule("zepto")
         .test(require.resolve("zepto"))
         .use("exports")
         .loader("exports-loader?window.Zepto")
         .end()
         .use("script")
         .loader("script-loader")
         .end();
     },
     configureWebpack: {
       plugins: [
         new webpack.ProvidePlugin({
           $: "zepto",
           Zepto: "zepto"
         })
       ]
     }
   };

4. main.js里面引用zepto模块.

   import $ from "zepto";
   import "zepto/src/fx";

第三方库设置

封装 axios

封装 axios 的方法网上一搜一堆，具体怎么设置看个人喜好，这里简单贴一段代码和几个链接。

//request
import axios from "axios";
import { Message } from "element-ui";

const request = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 5000 // request timeout
});

// request拦截器
request.interceptors.request.use(
  config => {
    // Do something before request is sent

    return config;
  },
  error => {
    // Do something with request error
    console.log(error); // for debug
    Promise.reject(error);
  }
);

// respone拦截器
request.interceptors.response.use(
  response => {
    // Do something with response data
    return response;
  },
  error => {
    console.log(error);
    Message({
      message: error.message,
      type: "error",
      duration: 5 * 1000
    });
    // Do something with response error
    return Promise.reject(error);
  }
);

export default request;

至于这个地方没有使用 axios 全局拦截，是因为这个文件将 axios 再封装后，全局拦截器拦截不到使用 request 的请求。当拦截进入异常时就会调用 element-ui 的提示进行异常提示。

import request from "@/utils/request";

//使用
export function getInfo(params) {
  return request({
    url: "/user/info",
    method: "get",
    params
  });
}

以上代码基本取自 vue-element-admin 的代码。

vue-cli3 插件制作——一键配置属于自己的项目

npm pc 端
npm 移动端


关于 Sass、Less、Stylus 引用全局变量的问题

官方文档:向预处理器 Loader 传递选项

sass:

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: `@import "~@/variables.scss";`
      }
    }
  }
};

less:

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        globalVars: {
          color: "#ccc"
        }
      }
    }
  }
};

stylus:

let path = require("path");
module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        import: path.resolve(__dirname, "./src/config/common.styl")
      }
    }
  }
};

参考文章 博客园

关于项目里面 eslint 配置问题及常用命令

命令参考资料

参考资料

如何使用 Vue CLI 3 加速你的开发工作流？