vite-vue3开发环境搭建

目前项目还未使用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 {
          // 响应配置
      }
  })
  

vite 地址

// 类型提示
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的书写方式

组合式API ，setup 模式

script 标记setup 使用相关API

.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 

            
this is Vue3 API - {this.num}
            add
        
    }
})

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: '
Home
' }
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 模板方式为例

使用了 组合式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 不定期加入自己的想法，功能实现。