vue3 项目初始化配置 安装 element-ui、sass、修改vue在setup中name属性

1. 安装element-ui

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

2. 按需导入element-ui

1. 安装插件

# NPM
$ npm install unplugin-vue-components unplugin-auto-import -D

# Yarn
$ yarn add unplugin-vue-components unplugin-auto-import -D

2. 配置vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

3. 安装sass或less或stylus

执行命令安装即可生效，无需配置。(Vite 提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖)

安装命令

# sass
$ yarn add sass -D

# less
$ yarn add less -D

# stylus
$ yarn add stylus -D

4 自定义vue文件name属性

在vue3中使用vite脚手架，vue组件中name属性默认文件名称，导致vue文件名称无法和Router配置的name对应，在使用KeepAlive组件时不是太友好

1. 安装命令

# NPM
$ npm install vite-plugin-vue-setup-extend -D
# Yarn
yarn add vite-plugin-vue-setup-extend -D

2. 配置vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  // ...
  plugins: [
    // ...
	VueSetupExtend(),
  ],
})

3. 使用

// 在script 设置name
<script lang="ts" setup name="Layout">
</script>