vue3+vite+elementUI项目

开发环境

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  
#或者ts开发
pnpm create vite my-vue-app --template vue-ts
#进入项目
cd my-vue-app
#安装
npm install
#开启项目服务
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

在 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()],
    }),
  ],
})

 

路由选择（推荐VueRouter）

pnpm install vue-router@4 #安装

在main.ts(或者main.js)文件

// 1. 定义路由组件.
// 也可以从其他文件导入
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

// 5. 创建并挂载根实例
const app = Vue.createApp({})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)

app.mount('#app')

// 现在，应用已经启动了！

 配置'@'为根目录的绝对地址'src'

#安装path模块
pnpm add @types/node

在vite.config.ts文件中加入以下代码

import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  // 配置
  resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
  },
    ...
})

在tsconfig.json加入代码

"compilerOptions": {
    /*  src->@ */

　　　　"baseUrl": ".",

　　   "paths": {

     　　 "@/*":["src/*"]
   　　 }
    ...
}

 

异常报错

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
     
}

 3、启动vite服务，浏览器一直处于加载中，可能是路由router进入死循环（而且项目没有报错）