VUE3實戰項目課程

  • 名稱:VUE3實戰項目課程
  • 分類:移動開發  
  • 觀看人數:加載中
  • 時間:2021/10/20 8:24:16
分享到:

Vue 3 項目實戰總結

作為今年前端圈中最大的新聞之一,vue 3 的正式版的發布引起了幾乎所有前端 er 的圍觀。步入 2021 年,我開始在項目中使用 vue 3 進行開發。以下是我使用 vue 3 一個月后的一些經驗總結以及看法。


開發環境方面

一般我們使用 vue 3 都是使用 vue 官方的腳手架新建項目,要么是 vue-cli 或者 vite。考慮到 vite 是新出的東西,兼容性方面還有待檢測,于是我使用的是 vue-cli 來新建項目。


vue.config.js 的 externals 設置

作為一家小公司的前端工程師,我覺得 externals 這一個設置幾乎是整個開發環境中最重要的東西。


首先簡單介紹一下 externals 這個設置的作用。

Externals 是來自于 webpack 的配置項,主要作用是提供了「從輸出的 bundle 中排除依賴」的方法。簡單舉個例子就是,假如有個幾個項目都使用到了 axios,那么如果不使用 externals,每個項目都會打包一份 axios 到 ventor 中。使用了 externals 之后,可以把 axios 進行外部引入,而 axios 的庫文件可以用第三方 cdn 或者放到統一的 cdn 服務器上面。


配置方法十分簡單:

const externals = {

  jquery: "jQuery",

};


module.exports = {

  configureWebpack: (config) => {

    Object.assign(config, {

      externals,

    });

  },

};

這里要打開 jquery.min.js 的查看 jquery 暴露的全局名稱,jquery 的是 jQuery,然后在 index.html 中使用 script 引入就可以了:


  src="https://code.jquery.com/jquery-3.1.0.js"

  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="

  crossorigin="anonymous">

Externals 為什么如此重要,我認為有以下幾個原因:


節省服務器空間,減少項目之間的代碼重復

充分使用 cdn 服務器

減少開發過程中,編譯的時間

開發過程中的模擬數據

模擬數據在前端開發中經常用到,在后端同事沒有完成接口的時候,前端需要自己模擬后端返回數據,提高工作效率。

目前我接觸到的模擬數據方法有幾個:

Mock.js:

Mock.js 應該算最常用的模擬數據庫了,通過簡單配置即可模擬接口數據。優點在于配置方便快捷,功能相對齊全。缺點是維護 mock.js 的人不多,很多代碼已經是幾年前的代碼


Postman:

Postman 中有自帶 mock 的功能,配置也非常簡單,而且不需要在項目中引入任何額外的庫。而這個方法的問題是 Postman mock 的原理是把配置的接口上傳到 postman 的服務器,很多公司的項目不希望自己的接口數據被別人知道,安全性不足 自建 json 文件:自己新建接口返回值對應的 json 文件,代碼中判斷是開發模式還是生產來切換。好處是所有的數據都能自己配置,不受其他庫和平臺的約束。不足是需要自己寫代碼,不夠簡便


最后一個是我一直在使用的方法,因為 vue cli 內部是使用 webpack dev server,而 webpack dev server 使用 express,利用 webpack 的 proxy 功能搭配上 express 可以自建一個 api 服務器,具體操作如下:


使用 before 調用內部 express 的 app 實例


const { setApi } = require('./mock/api');

// vue.config.js

devServer: {

  open: process.platform === 'darwin',

  host: '0.0.0.0',

  port: 3000,

  https: false,

  disableHostCheck: true,

  before: (app) => {

    setApi(app)

  }

}

使用 app 實例創建 api 服務器(可以加入 swagger 等等的庫,增加 api 服務器的用戶體驗):


// ./mock/api.js

const swaggerUi = require("swagger-ui-express");

const submit = require("./submit");

const setApi = (app) => {

  const apiData = {

    api: [...cj, ...submit, ...question, ...vote],

  };

  const swaggerDocument = {

    swagger: "2.0",

    paths: {

      "/pets": {},

    },

  };

  apiData.api.forEach((api) => {

    app[api.type](`/api${api.paths}`, (req, res) => {

      res.json(api.responses);

    });

    swaggerDocument.paths[`/api${api.paths}`] = {

      [api.type]: {

        tags: [api.tags],

        responses: {

          [api.responses.statusCode]: {

            description: `successful operation ${JSON.stringify(

              api.responses

            )}`,

          },

        },

      },

    };

  });

  app.use(

    "/api/docs",

    swaggerUi.serve,

    swaggerUi.setup(swaggerDocument, {

      swaggerOptions: {

        validatorUrl: null,

      },

    })

  );

};

module.exports = { setApi };

// ./mock/submit.js

module.exports = [{

    type: "post",

    paths: "/submit",

    tags: "submit",

    responses: {

      statusCode: "200",

      data: "",

      msg: "提交成功!",

    },

  }

]

最終效果是請求 http://ip地址/api/接口名稱 可以請求數據,請求 http://ip地址/api/docs ,可以看到自定義的接口文檔


圖片


模塊導入

Vue 3 當中的模塊導入,其實跟 vue 2 區別不大,但是因為 vue 3 使用了 typescript,所以涉及到 typescript 模塊的一些知識。


搭配 externals 的模塊導入

當我們使用前面說到的 externals 的時候,原則上來說我們不再需要去安裝已經設置了 externals 的模塊。正如上面的例子:


  src="https://code.jquery.com/jquery-3.1.0.js"

  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="

  crossorigin="anonymous">

Script 引入了 jquery 之后,我們不需要再 npm i jquery。然而由于我們一般會使用 eslint 進行代碼格式檢驗,如果我們不安裝 jquery 的話,eslint 會報錯。這個時候,使用 javascript 開發的話,我們需要配置一下 eslint 規則,會把 jquery 設置成 core-modules:


// .eslintrc.js

  settings: {

    'import/core-modules': ['jquery'],

  }

但是如果是用 typescript 的話,設置了 core-modules 還不行,因為編輯器(vscode)沒有找到對應的 d.ts 文件,所以就算 eslint 不報錯,開發起來也沒有 typescript 的提示。這時候,我的解決辦法是,依舊使用 npm i 安裝對應依賴的聲明文件。如果庫聲明文件包含在庫里面,則直接安裝依賴。


這樣處理雖然 node_modules 會變大,但是編譯的時候 webpack 是不會把 node_modules 中的庫打包進項目中。


導入沒有聲明文件的庫

對于一些老舊的或者沒有聲明文件的庫,需要在 shims-vue.d.ts 來為庫定義類型,例如微信的 js 文件 res.wx.qq.com/open/js/jwe…


declare module '*.vue' {

  import type { DefineComponent } from 'vue';

  const component: DefineComponent<{}, {}, any>;

  export default component;

}


declare module '*.svg'

declare module '*.png'

declare module '*.jpg'

declare module '*.jpeg'

declare module '*.gif'

declare module '*.bmp'

declare module '*.tiff'

declare module '*.json'

declare module '*.mp3'

declare const wx: any;


快3购彩-首页