Vue2 與vue-cli建置專案

安裝流程

npm install -g @vue/cli

vue --version

vue create ${app-name}

.env檔

.env設定要有VUE_APP 作為變數命名的開頭。添加後，需要重啟專案。

#VUE_APP開頭
VUE_APP_BASEURL="http://sibase.sample.com"

tailwind設定

在需要客製的css樣式上用tailwind來添加，方便日後管理，只要在tailwind.config.js中修改定義值。參考官網設定

module.exports   mode: "jit", //只編譯有使用到的樣式  purge: ["./index.html", "./src/**/*.{vue,js}"],  darkMode: false, // or 'media' or 'class'  theme: {    fontSize: {      100: ["100px", { lineHeight: "1" }], //自行添加的定義    },  },  variantOrder: [],  variants: {},  plugins: [],};

Vue config設定

參照vue-admin的設定做打包優化，在build production版時，會處理lib的分割，像是elementUI和vuejs。參考開源專案vue-admin 官方配置說明

module.exports       publicPath: "/",      outputDir: "dist",      assetsDir: "static",      lintOnSave: process.env.      productionSourceMap: false,      configureWebpack: {        name: "SIapp",        resolve: {          alias: {            "@": resolve("src"),          },        },      },      chainWebpack(config) {        config.plugin("preload").tap(() => [          {            rel: "preload",            // to ignore runtime.js            // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171            fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],            include: "initial",          },        ]);        // when there are many pages, it will cause too many meaningless requests        config.plugins.delete("prefetch");        config.when(process.env.NODE_ENV !== "development", (config) => {          config.optimization.splitChunks({            chunks: "all",            cacheGroups: {              vue: {                name: "chunk-vuejs",                test: /[\\/]                priority: 20,              },              elementUI: {                name: "chunk-elementUI", // split elementUI into a single    package                priority: 30, // the weight needs to be larger than libs and app or it will be packaged into libs or app                test: /[\\/]              },              commons: {                // split async commons chunk                name: "chunk-async-commons",                minChunks: 2,                priority: 40,                chunks: "async",              },            },          });          // config          //   .plugin("webpack-bundle-analyzer")          //   .use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin);        });      },};

axios封裝

axios封裝初版。透過axios建立請求實例，並設置request和response的攔截，API定義時可使用該實例下有定義的呼叫方式。 axios怎么封装，才能提升效率？

 //request.jsimport axios from "axios";import { Message } from "element-ui";//todo//console.log(process.env.NODE_ENV)const instance =  baseURL: "https://jsonplaceholder.typicode.com",  headers: {    "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",  },  timeout: 10000,});//請求攔截instance.interceptors.request.use    // console.log("config",config)    config.headers.token = 'token';    return config;});//回傳攔截instance.interceptors.response.use((response)=>{    console.log("response",response);    //todo 錯誤處理    return response;},()=>{    Message.error('請求有誤');});export default function(method, url, data =   method = method.toLowerCase();  switch (method) {    case "post":      return instance.post(url, data, config);    case "get":      return instance.get(url, { params: data });    case "delete":      return instance.delete(url, { params: data });    case "put":      return instance.put(url, data);    case "patch":      return instance.patch(url, data);    default:      console.log(`未知的 method: ${method}`);      return false;  }};