1.创建一个vue项目
npm init vite@latest m-component -- --template vue-ts
npm i
npm run dev
2.安装elementPlus和路由
npm i -S vue-router@next element-plus
3.安装插件
npm install -D unplugin-vue-components unplugin-auto-import
4.然后把下列代码插入到Vite
的配置文件中(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()],
}),
],
})
5.使用antDesign-----下载
npm i --save ant-design-vue
6.配置vite.config.ts
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 ,AntDesignVueResolver} from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver(),AntDesignVueResolver()],
}),
],
server:{
port:1102
}
})