当前位置：首页 > news >正文

vite搭建vue3项目

news 2025/3/10 14:53:36

一、创建vite项目

快速创建vite项目

npm create vite@latest
npm i

分步创建vite项目

// 命令会生成package.json默认文件
npm init -y//安装开发环境下vite的依赖
npm i vite -D//安装vue的依赖
npm i vue//安装开发环境下解析vite的插件@vitejs/plugin-vue
npm i @vitejs/plugin-vue -D

配置vite.config.js文件


import {defineConfig} from "vite"
import Vue from  '@vitejs/plugin-vue'export default defineConfig({plugins:[Vue()]
})

新建App.vue文件

<template>hello
</template>

新建main.js

import {createApp} from "vue"
import App from './App.vue'const app = createApp(App);
app.mount('#app')

新建index.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div><script type="module" src="./src/main.js"></script>
</body>
</html>

二、路由安装

2.1 安装插件

npm i vue-router -D

2.2 使用路由

App.vue修改

<template><router-view></router-view>
</template>

main.js修改

import {createApp} from "vue"
import App from './App.vue'
import router  from "./router";const app = createApp(App);
app.use(router)
app.mount('#app')

创建router.js

import {createRouter,createWebHashHistory} from "vue-router"const router = createRouter({routes:[{component:()=>import('../pages/print_setting.vue')},{path:'/print_setting',component:()=>import('../pages/print_setting.vue')}],history:createWebHashHistory()
})export default router

2.3 文件路由

每次新建页面都需要配置路由，繁琐且管理不便，我们映入自动路由插件vite-plugin-pages

npm i -D vite-plugin-pages

在vite.config.js配置插件

import {defineConfig} from "vite"
import Vue from  '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import AutoImport from 'unplugin-auto-import/vite'
import Pages from 'vite-plugin-pages'export default defineConfig({plugins:[Vue(),Pages({dirs:'pages',extensions: ['vue']}),AutoImport({import:['vue','vue-rouetr']}),Components({resolvers:[ElementPlusResolver()]})]
})

在router.js中使用插件

import {createRouter,createWebHashHistory} from "vue-router"
import routes from '~pages'const router = createRouter({routes,history:createWebHashHistory()
})export default router

三、按需加载组件插件安装

在页面中使用组件每次都需要import组件，unplugin-vue-components可以使页面不需要手动import组件，自动按需引入

npm i unplugin-vue-components -D

修改vite.config.js，使用该插件，并加入element-plus解析器

import {defineconfig} from "vite"
import Vue from  '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components'export default defineconfig({plugins:[Vue(),Components()]
})

组件的映入可以自动，当然vue等的引入也可以自动

npm i -D unplugin-auto-import

重新配置vite.config.js,这里自动引入配置了vue和vue-rouetr的自动引入

import {defineConfig} from "vite"
import Vue from  '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import AutoImport from 'unplugin-auto-import/vite'export default defineConfig({plugins:[Vue(),AutoImport({import:['vue','vue-rouetr']}),Components({resolvers:[ElementPlusResolver()]})]
})

四、安装element-plus插件

npm i element-plus -D

修改vite.config.js 使自动解析能够解析elemt-plus引用

import {defineConfig} from "vite"
import Vue from  '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({plugins:[Vue(),Components({resolvers:[ElementPlusResolver()]})]
})