vite-vue3开发环境搭建
2022-07-17 本文已影响0人
z_hboot
目前项目还未使用vite 以及vue3 。 计划下一个新的项目就是用，提前做个示例demo，根据以往的项目所需要的配置，搭建vite+vue3 代码架构；
项目从vite开始安装搭建配置，也可使用官方的脚手架，使用vue模板创建项目。
npm install vite vite搭建项目
vite 安装后，根目录下创建配置文件vite.config.js，默认加载此配置文件
可以通过命令
vite --config ***.js指定配置文件
-
可通过工具函数定义，获得类型提示。
defineConfig -
异步获取配置信息数据
// 类型提示 import {defineConfig} from 'vite' // config export default defineConfig(async ({command,mode})=>{ /** * command - 命令模式 * mode - 生产、开发模式 * * getConfigParam() 异步接口调用 */ const config = await getConfigParam() return { // 响应配置 } })
// 类型提示
import {defineConfig} from 'vite'
// config
export default defineConfig(({command,mode})=>{
/**
* command - 命令模式
* mode - 生产、开发模式
*/
return {}
})
vite.config.js 配置
基本的属性配置
// 类型提示
import {defineConfig} from 'vite'
// config
export default defineConfig(({command,mode})=>{
/**
* command - 命令模式
* mode - 生产、开发模式
*/
return {
// 项目根目录，index.html 所在的目录
root:'/',
// 生产或开发环境下的基础路径
base:'/hboot/',
// 需要用到的插件数组
plugins: [],
// 静态资源服务目录地址
publicDir:'',
// 存储缓存文件的目录地址
cacheDir:'',
//
resolve:{
// 设置文件目录别名
alias:{
"@":"/src"
},
//
extensions:['.js']
},
//
css:{
// postcss-modules 行为配置
modules:{
// ...
},
// 传递给css预处理器的配置项
preprocessorOptions:{
// 指定less预处理的配置项
less:{
// ...
}
}
},
// esbuild 选项转换配置
esbuild:{
// ...
// 在react组件中无需导入react
jsxInject: `import React from 'react'`,
// vue 使用jsx
jsxFactory:'h',
jsxFragment:'Fragment'
},
// 静态资源处理
assetsInclude: '',
// 开发服务器选项
server:{
// ...
host:'',
port:''
},
// 构建配置项
build:{
// ...
// 指定输出目录
outDir: '',
// 指定静态资源存放目录
assetsDir:"",
// 启用、禁用css代码拆分
cssCodeSplit:true,
// 构建是否生成source map文件
sourcemap:'inline',
// rollup 配置打包项
rollupOptions:{
// ...
}
},
// 依赖优化配置项
optimizeDeps:{
// 依赖构建入口
entries:'',
// 排除不需要构建的依赖项
exclude:[],
}
}
})
刚开始配置错了 alias ,加载不到目标文件;最后发现不需要 ./，项目根目录/
alias:{
'@':'./src'
}
安装less
npm install -D less
支持vue3 作为开发模板
按照vue的语法书写项目，安装vue@next, 安装vue3
npm install vue@next
有两种视图组件书写的方式，单文件组件SFC；或者JSX语法支持；本人还是比较喜欢JSX语法书写的，.vue单文件组件 支持，方便组内成员使用。
-
*.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'
// 创建app应用
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. 全局属性设置
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 使用相关API
<template>
<div class="user">
<p>{{name}}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
// 声明常量
const name = 'user - system'
// 定义响应式变量
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 *或者懒加载导入()=>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
}
]
/**
* 创建router实例
*
*/
export default VueRouter.createRouter({
history:VueRouter.createWebHashHistory(),
routes
})
路由首页，用于记录跳转的菜单路由信息
import { uesSystemStore } from '@/store/system.js'
// 路由守卫
router.beforeEach((to,from,next)=>{
// 此处使用的是pinia，具体可查看项目代码
const systemStore = uesSystemStore()
systemStore.changeMenu(to.path)
next()
})
vuex 全局状态管理配置
安装
npm install vuex@next --save
项目配置 index.js
// store
import store from './store/index'
// .... ohter
// 全局状态管理
app.use(store)
状态管理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 响应式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 国际化设置
app.use(ElementPlus,{size:'small',zIndex:3000, local:zhCn})
其他都是一些工具的使用，代码仓库gitee项目地址 vite-vue3 不定期加入自己的想法，功能实现。
