One of the biggest news stories in front end circles this year, the official release of Vue 3 has attracted almost all of the front end er’s attention. Moving into 2021, I started using VUE 3 for development in my projects. Here are some of my experiences and thoughts after using Vue 3 for a month.

Development environment

Generally we use VUE 3 is to use vUE official scaffolding new project, either VUE – CLI or Vite. Since Vite is new and compatibility has yet to be tested, I used VUe-CLI to create new projects.

Vue. Config. js externals

As a front-end engineer for a small company, I find externals to be the single most important thing in the entire development environment. First, a quick look at what externals does.

Externals is a configuration item from WebPack that provides a method to "exclude dependencies from exported bundles." For a simple example, if you have several projects that use Axios, each project will pack a copy of Axios into ventor if you don't use externals. With externals, axios can be imported externally, and the AXIos library files can be used with a third-party CDN or placed on a unified CDN server.Copy the code

The configuration method is very simple:

    const externals = {
        jquery: 'jQuery'
    };
    
    module.exports = {
        configureWebpack: (config) => {
            Object.assign(config, {
              externals,
              })
        };
    }
Copy the code

Jquery.min.js = jquery.min.js = jquery.min.js = jquery.min.js = jquery.min.js = jquery.min.js = jquery.min.js = jquery.min.js = jquery.min.js

< script SRC = "https://code.jquery.com/jquery-3.1.0.js" integrity = "sha256 - slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk =" crossorigin="anonymous"> </script>Copy the code

I think there are several reasons why Externals is so important:

  • Saves server space and reduces code duplication between projects
  • Fully use the CDN server
  • Reduce compilation time during development

Simulation data during development

Analog data is often used in front-end development. When the back-end colleagues have not completed the interface, the front-end needs to simulate the data returned by the back-end to improve work efficiency.

At present, THERE are several methods for simulating data that I have come into contact with:

  1. Mock.js: Mock.js is probably the most commonly used Mock database and can be configured to Mock interface data. The advantage is that the configuration is convenient and fast, and the function is relatively complete. The downside is that there aren’t many people maintaining mock.js, and much of the code is years old
  2. Postman: Postman has built-in mock functionality, is very simple to configure, and does not require any additional libraries to be introduced into the project. The problem with this method is that the principle of Postman mock is to upload the configured interface to the Postman server. Many companies’ projects do not want their interface data to be known by others, which is not secure enough
  3. Self-built JSON file: Create a NEW JSON file corresponding to the interface return value, and determine whether to switch between development mode and production in the code. The advantage is that all data can be configured by itself, independent of other libraries and platforms. Lack is the need to write their own code, not simple enough
  4. The last one is the one I’ve been using since the vue CLI uses Webpack Dev Server internally and WebPack Dev Server uses Express, Use webPack proxy function with Express can build an API server, specific operations are as follows:
  • Call an app instance of internal Express with before
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)
    },
  },
Copy the code
  • Use app instance to create API server (can add swagger, etc., add API server user experience)
// ./mock/api.js const swaggerUi = require('swagger-ui-express'); const submit = require('./submit'); const setApi = (app) => { const apiData = { api: [cj,... the submit, the question of...,... 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 };Copy the code
// ./mock/submit.js module.exports = [ { type: 'post', paths: '/submit', tags: 'submit', responses: { statusCode: '200', data: ', MSG: 'submit successfully ',},},];Copy the code

The end result is a requesthttp://ip Address/API/interface nameYou can request data, requesthttp://ip address/API/docs, you can see the custom interface documentation

Module import

Module imports in Vue 3 are not much different from those in Vue 2, but because Vue 3 uses typescript, some knowledge of typescript modules is involved.

Module import with externals

When we use externals, in principle we don’t need to install modules that already have externals set. As in the example above:

< script SRC = "https://code.jquery.com/jquery-3.1.0.js" integrity = "sha256 - slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk =" crossorigin="anonymous"> </script>Copy the code

After Script introduced jquery, we don’t need NPM I jquery anymore. However, since we normally use ESLint for code format checking, ESLint will report an error if we don’t install jquery. The esLint rule will set jquery to core-modules:

// .eslintrc.js
  settings: {
    'import/core-modules': ['jquery'],
  },
Copy the code

However, with typescript, core-modules doesn’t work because the editor (vscode) doesn’t find the corresponding d.ts file, so even if eslint doesn’t report an error, it doesn’t develop with typescript. In this case, my solution is to still install the dependency declaration file using NPM I. If the library declaration file is included in the library, install the dependencies directly.

Although node_modules will get bigger, webpack will not pack the libraries in node_modules into the project when compiled.

Import a library without a declaration file

For some old or no declaration file library, need the shims – vue. Which s for the library definition type, such as WeChat js file 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;
Copy the code