Try the vue3.0-tyepscript development component (3)

Time:2021-7-23

background

Continuation of the previous two articles:

  • Try vue3.0 – from todolist (1)
  • Tasting vue3.0 – understanding changes (2)

    The third part is fresh, mainly about the difference between the use of vite recommended by the official website and the previous one, as well as the use of typescript, a dialog component like element UI, and the use of the more advanced vue3.0 API ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Vite

  1. Vite is a web development build tool that provides services for your code through local es module import during development and bundles it with rollup for production.
  • Lightning cold server start
  • Rapid hot die replacement (HMR)
  • True on demand compilation

In fact, it starts the service (KOA) first, and compiles if you need a file. As a result, vite starts the service much faster than webpack, which is called “compile on demand”.

  1. We need to pay attention to:

    • Typescript has built-in support and can be used directly
    • Less / sass / stylus / postcss also has built-in support (only the corresponding compiler needs to be installed separately)
    • Git address
  2. Initialize the project with vite

      npm init vite-app <project-name>
      cd <project-name>
      npm install
      npm run dev

Installation configuration

  1. Install sass, eslint, prettier

Try the vue3.0-tyepscript development component (3)
//.eslintrc.js

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser', // Specifies the ESLint parser
    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module', // Allows for the use of imports
    ecmaFeatures: {
      tsx: true, // Allows for the parsing of tsx
      // jsx: true,// Allows for the parsing of JSX
    },
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ],
  rules: {
    // js/ts
    'eol-last': 'error',
    'no-trailing-spaces': 'error',
    'comma-style': ['error', 'last'],
    'comma-dangle': ['error', 'always-multiline'],
    quotes: ['error', 'single', { avoidEscape: true, allowTemplateLiterals: true }],
    camelcase: ['error', { properties: 'never' }],
    semi: ['error', 'never'],
    indent: ['error', 2, { SwitchCase: 1 }],
    'object-curly-spacing': ['error', 'always'],
    'arrow-parens': ['error', 'as-needed'],
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/member-delimiter-style': [
      'error',
      {
        multiline: {
          delimiter: 'none',
          requireLast: false,
        },
        singleline: {
          delimiter: 'semi',
          requireLast: true,
        },
      },
    ],
    // vue
    'vue/no-v-html': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'never',
          normal: 'never',
          component: 'always',
        },
      },
    ],
    'vue/max-attributes-per-line': [
      'error',
      {
        singleline: 3,
        multiline: 1,
      },
    ],
    'vue/require-default-prop': 'off',
    'vue/html-closing-bracket-spacing': 'error',
  },
};
  1. Configure typescript
//vue-shim.d.ts
declare module '*.vue' {
  import { Component, ComponentPublicInstance } from 'vue'
  const _default: Component & {
    new(): ComponentPublicInstance<any>
  }
  export default _default
}
//source.d.ts
import Vue from 'vue'
declare module '*.vue' {
  export default Vue
}

declare module '*.json'
declare module '*.png'
declare module '*.jpg'

Dialog component imitating element UI

  • CSS can directly use elemnt to download the theme and introduce it
  • The dialog component needs two components (Global mask component and dialog component)

//dialog.ts

Try the vue3.0-tyepscript development component (3)

//The logic of dialog detachment

Try the vue3.0-tyepscript development component (3)

//Global reference

import Dialog from './components/dialog/index'
const app = createApp(App)
app.component(Dialog.name, Dialog)

//Mask mask component

Try the vue3.0-tyepscript development component (3)

//How to use v-model.modelvalue

<elDialog
    v-model.modelValue="dialogVisible" 
   
    width="30vw"
    @close="handleClose">
    <p>This is a message</p>
    <div slot="footer" class="dialog-footer">
      < button @ Click = "handleclose" class = "El button" -- default "> cancel < / button >
      < button type = "primary" class = "El button El button -- primary" @ Click = "dialogvisible = false" > OK < / button >
    </div>
  </elDialog>

summary

So far, after using vue3.0 + typescript to develop dialog component, we have a further understanding of the development of vue3.0. In this process, you need to pay attention to the version of the plug-in. If an error is reported, it is estimated that the version is not installed correctly. I’m going to introduce router in the next article
Code GitHub address

Recommended Today

Implementation example of go operation etcd

etcdIt is an open-source, distributed key value pair data storage system, which provides shared configuration, service registration and discovery. This paper mainly introduces the installation and use of etcd. Etcdetcd introduction etcdIt is an open source and highly available distributed key value storage system developed with go language, which can be used to configure sharing […]