Vue3.0 + vite + Ts + element plus体验

1.起步初始化项目

 官网教程 vite 初始化项目 （vuejs项目）

# npm 6.x
$ npm init vite@latest  --template vue

# npm 7+，需要加上额外的双短横线
$ npm init vite@latest  -- --template vue

#npm init @vitejs/app ts或其他语言环境

$ cd 
$ npm install // 安装依赖
$ npm run dev // 运行项目

  vue-ts项目 

# npm create vite@latest my-vue-app -- --template vue-ts // vue-ts模板

其他支持的模板 create-vite

2. 配置eslint  + vue Language Features (Volar) (vscode 插件)

2.1 安装依赖

// 安装依赖：
npm i eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
npm i eslint eslint-plugin-vue -D

• eslint: ESLint的核心代码
• @typescript-eslint/parser：ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码
• @typescript-eslint/eslint-plugin：这是一个ESLint插件，包含了各类定义好的检测Typescript代码的规范
• eslint-plugin-vue: eslint对vue语法的检查和规范

2.2 添加.eslintrc.js 配置文件

module.exports = {
  extends: [
    "plugin:vue/vue3-essential",
    "plugin:vue/vue3-strongly-recommended",
    "plugin:vue/vue3-recommended",
    // 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
  ],
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaVersion: 2020,
    sourceType: "module",
  },
  rules: {
    "vue/max-attributes-per-line": [2, {
      "singleline": {
        "max": 8
      },      
      "multiline": {
        "max": 1
      }
    }],
    "vue/v-on-event-hyphenation": ["never", "always" | "never", {
      "autofix": false,
      "ignore": []
    }]
    
  },
};

2.3 vscode安装插件 vue Language Features (Volar)  --  Vue 3构建的语言支持插 

 代码保存自动修复不符合自己习惯，可通过修改默认值配置更改

eg: 不同项目配置不同时可在当前项目根目录下创建 .vscode /settings.json 配置

{
  "vue3snippets.enable-compile-vue-file-on-did-save-code": true,
  "vue3snippets.singleQuote": true,
  "vue3snippets.semi": false,
  "vue3snippets.printWidth": 150
}

3. 路径别名配置 vite.config.ts

在 vite.config.ts 中，如果使用 __dirname + path 方式写地址的话，如果 TS 报错提示找不到则安装

npm i -D @types/node

export default defineConfig({
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js',
      "@": path.resolve(__dirname, "src")
    },
  },
  plugins: [vue()],
})

4. sass: （css预处理器) 

4.1 依赖安装

npm i sass node-sass sass-loader -S

4.2 解决npm安装报错（使用cnpm）(根目录下添加.npmrc)

registry=https://registry.npmmirror.com
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/

4.3 配置全局样式

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/assets/style/index.scss";'
      }
    }
  }
})

5. 引入element plus

5.1 安装依赖

npm i element-plus -S

5.2 main.ts引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

createApp(App).use(ElementPlus).mount('#app')

问题： 注意 ts项目引入element-plus 缺少类型说明文件

解决： src目录下增加 gloabl.d.ts 类型说明文件对element-plus 模块进行类型说明

eg: src/global.d.ts 

declare module "element-plus" {
  import ElementPlus from 'element-plus'
  export default ElementPlus ;
}

这时你会发现main.ts 文件没有类型报错了，但global.d.ts文件中报错 ElementPlus  类型循环声明，这时需要修改tsconfig.ts中的配置 skipLibCheck值为true,

skipLibCheck 官方说明

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "importHelpers": true,
    "jsx": "preserve",
    "sourceMap": true,
    "skipLibCheck": true, // 忽略.d.ts文件类型
    "resolveJsonModule": true,
    "esModuleInterop": true,
    // "suppressImplicitAnyIndexErrors": true, // 缺少索引类型报错
    "lib": [
      "esnext",
      "dom"
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ],
    }
  },
  "editorOptions": {
    "isolatedModules": true
  },
  "include": [
    "**/*.ts",
    "**/*.d.ts",
    "**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}