当前位置: 首页 > 工具软件 > Vtip-Vue > 使用案例 >

vue3+vite+element-plus

毋琪
2023-12-01

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')
    }
  }
})
 类似资料: