TS+vue3项目的创建

        vue3使用的脚手架是vite,vue2使用的脚手架是webpack。vue3使用elementUIPlus,elementUI是vue2使用。本项目是vite+elementUIplus+axios+TS+sass。        

①、创建项目:npm create vue@latest(TS+Router+Pinia+ESLint+Preitter)

②、安装sass:npm i sass

③、 引入重置样式表:npm i normalize.css

        在main.ts中 import 'normalize.css'

④、下载并配置组件库:npm i element-plus --save 

        组件库按需导入:npm install -D unplugin-vue-components unplugin-auto-import

        配置vite.config.ts:

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

       若出现Component name "XXX" should always be multi-word

在根目录下新建.eslintrc.js文件,内容为:

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        'plugin:vue/essential',
        '@vue/standard'
    ],
    parserOptions: {
        parser: '@babel/eslint-parser'
    },
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'vue/multi-word-component-names': 'off'
    }
}

配置完成后,重启一下vscode即可。