目前項目還未使用vite 以及vue3 叹侄。 計劃下一個新的項目就是用巩搏，提前做個示例demo，根據(jù)以往的項目所需要的配置趾代，搭建vite+vue3 代碼架構(gòu)贯底；
項目從vite開始安裝搭建配置，也可使用官方的腳手架撒强，使用vue模板創(chuàng)建項目禽捆。
npm install vite vite搭建項目
vite 安裝后笙什，根目錄下創(chuàng)建配置文件vite.config.js，默認加載此配置文件
可以通過命令
vite --config ***.js指定配置文件
可通過工具函數(shù)定義胚想，獲得類型提示琐凭。
defineConfig-
異步獲取配置信息數(shù)據(jù)
// 類型提示 import {defineConfig} from 'vite' // config export default defineConfig(async ({command,mode})=>{ /** * command - 命令模式 * mode - 生產(chǎn)、開發(fā)模式 * * getConfigParam() 異步接口調(diào)用 */ const config = await getConfigParam() return { // 響應(yīng)配置 } })
// 類型提示
import {defineConfig} from 'vite'
// config
export default defineConfig(({command,mode})=>{
/**
* command - 命令模式
* mode - 生產(chǎn)浊服、開發(fā)模式
*/
return {}
})
vite.config.js 配置
基本的屬性配置
// 類型提示
import {defineConfig} from 'vite'
// config
export default defineConfig(({command,mode})=>{
/**
* command - 命令模式
* mode - 生產(chǎn)淘正、開發(fā)模式
*/
return {
// 項目根目錄，index.html 所在的目錄
root:'/',
// 生產(chǎn)或開發(fā)環(huán)境下的基礎(chǔ)路徑
base:'/hboot/',
// 需要用到的插件數(shù)組
plugins: [],
// 靜態(tài)資源服務(wù)目錄地址
publicDir:'',
// 存儲緩存文件的目錄地址
cacheDir:'',
//
resolve:{
// 設(shè)置文件目錄別名
alias:{
"@":"/src"
},
//
extensions:['.js']
},
//
css:{
// postcss-modules 行為配置
modules:{
// ...
},
// 傳遞給css預(yù)處理器的配置項
preprocessorOptions:{
// 指定less預(yù)處理的配置項
less:{
// ...
}
}
},
// esbuild 選項轉(zhuǎn)換配置
esbuild:{
// ...
// 在react組件中無需導(dǎo)入react
jsxInject: `import React from 'react'`,
// vue 使用jsx
jsxFactory:'h',
jsxFragment:'Fragment'
},
// 靜態(tài)資源處理
assetsInclude: '',
// 開發(fā)服務(wù)器選項
server:{
// ...
host:'',
port:''
},
// 構(gòu)建配置項
build:{
// ...
// 指定輸出目錄
outDir: '',
// 指定靜態(tài)資源存放目錄
assetsDir:"",
// 啟用臼闻、禁用css代碼拆分
cssCodeSplit:true,
// 構(gòu)建是否生成source map文件
sourcemap:'inline',
// rollup 配置打包項
rollupOptions:{
// ...
}
},
// 依賴優(yōu)化配置項
optimizeDeps:{
// 依賴構(gòu)建入口
entries:'',
// 排除不需要構(gòu)建的依賴項
exclude:[],
}
}
})
剛開始配置錯了 alias ,加載不到目標文件;最后發(fā)現(xiàn)不需要 ./鸿吆，項目根目錄/
alias:{
'@':'./src'
}
安裝less
npm install -D less
支持vue3 作為開發(fā)模板
按照vue的語法書寫項目，安裝vue@next, 安裝vue3
npm install vue@next
有兩種視圖組件書寫的方式述呐，單文件組件SFC惩淳；或者JSX語法支持；本人還是比較喜歡JSX語法書寫的乓搬，.vue單文件組件 支持思犁，方便組內(nèi)成員使用。
*.vue文件需要安裝@vitejs/plugin-vue*.js組件文件安裝@vitejs/plugin-vue-jsx
import vueJSX from '@vitejs/plugin-vue-jsx'
import vueSFC from '@vitejs/plugin-vue'
export default defineConfig(({command,mode})=>{
return {
plugins: [
// .vue 單文件組件
vueSFC(),
// .jsx 文件類型支持
vueJSX({
// ... @vue/babel-plugin-jsx 的配置
})
],
}
})
vue 主入口文件index.js
import {createApp} from 'vue'
// main app
import App from './App.jsx'
// 創(chuàng)建app應(yīng)用
const app = createApp(App)
// 更改全局配置
// 1. 錯誤異常處理
app.config.errorHandler = (err,vm,info)=>{
console.error(err,vm,info)
}
app.config.warnHandler = (err,vm,info)=>{
console.warn(err,vm,info)
}
// 2. 全局屬性設(shè)置
app.config.globalProperties.$http = null
// 3. 編譯配置項
app.config.compilerOptions.whitespace = "preserve"
// 插件安裝
// app.use()
app.mount("#app")
.vue 同樣支持vue2的書寫方式
<template>
<div>
hello world
</div>
</template>
<script>
export default{
data(){
return {
name:'vue3'
}
}
}
</script>
組合式API 进肯，setup 模式
script 標記setup 使用相關(guān)API
<template>
<div class="user">
<p>{{name}}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
// 聲明常量
const name = 'user - system'
// 定義響應(yīng)式變量
const age = ref(0)
// 修改時激蹲，需要age.value
age.value = 34
</script>
.jsx
在.jsx中使用組合式的APIref。
import { ref, defineComponent } from 'vue'
export default defineComponent({
props:{
},
setup(props,context) {
const num = ref(0)
return {
num
}
},
methods:{
handleAdd(){
this.num++
}
},
render(){
return <div>
<p>this is Vue3 API - {this.num}</p>
<button onClick={this.handleAdd}>add</button>
</div>
}
})
vue-router 路由配置
npm install vue-router --save
在src/index.js 增加配置, app.use()安裝插件江掩。
// router
import router from './route/index.js'
// 插件安裝
// app.use()
// 路由配置
app.use(router)
路由配置文件学辱，提供幾個測試頁面; 通過import *或者懶加載導(dǎo)入()=>import
懶加載有助于代碼分割，減少包的體積环形。
import * as VueRouter from 'vue-router'
// page
// import CNode from '@/views/CNode/index.vue'
// home
const Home = { template: '<div>Home</div>' }
const CNode = ()=>import("@/views/CNode/index.vue")
const VueComponent = ()=>import('@/views/Vue3')
// routes
const routes = [
{
path:'/',
component:Home
},
{
path:'/home',
name:'home',
component:Home
},
{
path:'/cnode',
name:'cnode',
component:CNode
},
{
path:'/vue3',
name:'vue3',
component:VueComponent
}
]
/**
* 創(chuàng)建router實例
*
*/
export default VueRouter.createRouter({
history:VueRouter.createWebHashHistory(),
routes
})
路由首頁策泣，用于記錄跳轉(zhuǎn)的菜單路由信息
import { uesSystemStore } from '@/store/system.js'
// 路由守衛(wèi)
router.beforeEach((to,from,next)=>{
// 此處使用的是pinia，具體可查看項目代碼
const systemStore = uesSystemStore()
systemStore.changeMenu(to.path)
next()
})
vuex 全局狀態(tài)管理配置
安裝
npm install vuex@next --save
項目配置 index.js
// store
import store from './store/index'
// .... ohter
// 全局狀態(tài)管理
app.use(store)
狀態(tài)管理store 文件
import { createStore } from 'vuex'
// module
import User from './module/user'
export default createStore({
state(){
return {
systemName:'vite+vue3'
}
},
mutations:{
changeSytemName(state,payload){
state.systemName = payload
}
},
modules:{
user:User
}
})
在模塊中訪問使用 抬吟，以setup 模板方式為例
<template>
<div class="user">
<p>user - show systemName【{{systemName}}】</p>
<button @click="changeSystemName">更改</button>
</div>
</template>
<script setup>
import {useStore} from 'vuex'
import { computed } from 'vue'
// store 響應(yīng)式API
const store = useStore()
// store 變量
const systemName = computed(()=>store.state.systemName)
// 聲明常量
const name = 'user - system'
// 映射store 方法
const changeSystemName = ()=>{
store.commit('changeSytemName', 'vite-jsx')
}
</script>
使用了 組合式APIuserStore萨咕，獲取到store 實例。
安裝 element-plus
全局配置
// element
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { zhCn } from 'element-plus/es/locale/index.js'
// ....
// element 國際化設(shè)置
app.use(ElementPlus,{size:'small',zIndex:3000, local:zhCn})
其他都是一些工具的使用火本，代碼倉庫gitee項目地址 vite-vue3 不定期加入自己的想法危队，功能實現(xiàn)。
