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 }
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进入死循环(而且项目没有报错)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库