嚐鮮vue3.0-tyepscript開發組件(3)

背景

延續前面的兩篇文章：

• 嚐鮮vue3.0-從ToDoList開始（1）
• 嚐鮮vue3.0-瞭解變化(2)

  第三篇新鮮出爐，主要是說一下，官網推薦vite與以前上的用法區別，以及使用typescript實戰一個類element-ui的Dialog組件，使用較高級的Vue3.0的API～_～

---

Vite

1. Vite是一個web開發構建工具，它在開發期間經過本地ES模塊導入爲您的代碼提供服務，並將其與Rollup捆綁在一塊兒用於生產。

• 閃電般的冷服務器啓動
• 快速熱模更換(HMR)
• 真正的隨需應變的編譯

實際上就是先啓動服務（koa），若是你須要某一個文件，再進行編譯。這就形成Vite啓動服務的速度比Webpack快了不少，即「按需編譯」。

1. 須要咱們注意的是：

   • TypeScript已經內置支持，直接就能夠使用
   • less/sass/stylus/postcss也內置支持（單須要單獨安裝所對應的編譯器）
   • git地址

2. 使用vite初始化項目

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

---

安裝配置

1. 安裝sass，eslint，prettier（注意版本號）

//.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. 配置 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'

---

仿element-ui的dialog組件

• css直接使用elemnt的便可，自行去下載主題，並引入
• dialog組件須要2個組件（全局的mask組件，dialog組件）

//dialog.ts

//dialog抽離的邏輯

// 全局引用

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

// mask蒙層組件

//使用方式 v-model.modelValue（原:visible.sync="dialogVisible"上一篇有介紹）

<elDialog
    v-model.modelValue="dialogVisible" 
    title="提示"
    width="30vw"
    @close="handleClose">
    <p>這是一段信息～～～</p>
    <div slot="footer" class="dialog-footer">
      <button @click="handleClose" class="el-button el-button--default">取 消</button>
      <button type="primary" class="el-button el-button--primary" @click="dialogVisible = false">確 定</button>
    </div>
  </elDialog>

---

總結

至此，使用vue3.0+typescript開發dialog組件後，對vue3.0的開發有了進一步的瞭解。這個過程當中，須要注意安裝插件的版本。若是報錯了，估計就是版本安裝不對。下一篇就開始介紹router了～但願你們喜歡～
代碼github地址