vue3+vite+elementUI项目

发布时间 2023-07-13 20:03:25作者: Auler

开发环境

win10系统
Visual Studio Code v1.80.0
node v18.16.1
npm 9.8.0 #可以用pnpm
vue @vue/cli 5.0.4

安装软件

node 直接官网 https://nodejs.org/en
#下载好node包含npm
#管理员PowerShell
#下载pnpm
npm install -g pnpm

#下载vue
pnpm install vue

创建Vite项目

#创建项目
pnpm create vite
#或(选择模板创建)
pnpm create vite my-vue-app --template vue
#进入项目
cd my-vue-app
#开启项目服务
pnpm run dev

 引入elementUI

#安装element-ui
pnpm install element-plus

#自动导入(推荐)首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
pnpm install -D unplugin-vue-components unplugin-auto-import

 

异常报错

1、没找到App.vue异常

Cannot find module ‘./App.vue‘ or its corresponding type declaration

找到vite-env.d.ts文件加入vue的提示

/// <reference types="vite/client" />
declare module "*.vue" {
    import { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
}
2、找不到“element-plus/global”的类型定义文件
Cannot find type definition file for 'element-plus/global'.
  The file is in the program because:
    Entry point of type library 'element-plus/global' specified in compilerOptions

找到tsconfig.json文件

{
  "compilerOptions": {
    ...
    /* Bundler mode */
    "moduleResolution": "node",//将bundler->node
     
}