1、npm init vite@latest
2.、如果启动报错
error when starting dev server:
Error: getaddrinfo ENOTFOUND localhost
at GetAddrInfoReqWrap.onlookup [as oncomplete] (internal/dns/promises.js:42:17)
解决:
在终端输入:sudo vim /etc/hosts
先按 i 后,在最下面加上127.0.0.1 localhost
再:wq ,再重启项目
3、引入element-plus
3.1 pnpm install element-plus
3.2 pnpm install -D unplugin-vue-components unplugin-auto-import
4、直接在页面使用<el-button type="danger">I am ElButton</el-button>
如果报错:Internal server error: Failed to parse source for import analysis because the content contains inval:
看看vite.config.ts是不是把下面的东西删了
import vue from '@vitejs/plugin-vue'
// vite.config.ts
import { defineConfig } from 'vite'
plugins: [
// ...
vue(),
]
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 } from 'unplugin-vue-components/resolvers'
import path from 'path'
export default defineConfig({
// ...
plugins: [
// ...
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve:{
alias:{
'@':path.resolve(__dirname,'./src')
}
}
})