vite搭建vue3项目
一、 创建vite项目
1.1 快速创建vite项目
npm create vite@latest
npm i
1.2 分步创建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>Documenttitle>
head>
<body>
<div id="app">div>
<script type="module" src="./src/main.js">script>
body>
html>
1.3 环境变量配置
使用环境变量，是基于不同环境实现不同逻辑的，vite可以从更目录寻找.env.[mode] 文件加载额外的环境变量，这个的mode指development，production，text等
- 这是一个环境变量的配置示例
# 本地环境
VITE_ENV = development
#标题
VITE_APP_TITLE = 西堂ERP
#接口地址
VITE_APP_API_BASEURL= http://127.0.0.1:8000/
#本地端口
VITE_APP_PORT=9000
# 是否开启代理
VITE_APP_PROXY= true
- 环境变量在vite.config.js中的使用,可以配置指定端口，以及代理
import {defineConfig,loadEnv} from "vite"
import Vue from '@vitejs/plugin-vue'
export default defineConfig(({command,mode})=>{
const env = loadEnv(mode,process.cwd(),'')
return {
plugins:[
Vue(),
],
server:{
host:'0.0.0.0',
port:env.VITE_APP_PORT,
proxy:{
"api":{
target:env.VITE_APP_API_BASEURL,
changeOrigin:true,
rewrite:(path)=>path.replace(/^\/api/,"")
}
}
}
}
})
二、路由安装
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()]
})]
})