vite项目中如何修改node_modules里包的源码并触发项目热更新

文章目录

• vite介绍
• 项目创建

• 创建命令
• 安装依赖
• 启动

• 相关变化

• script setup语法(响应式、通信、传值)
• 插槽slot修改
• vue3计算属性与监听

• vite.config.js内基础配置
• jsx使用（仅用于在单文件中使用）
• 数据mock
• UI库整合

• sass使用，公共样式整合
• element3使用

• 全局引入
• 局部引入

• 服务封装

• 创建请求服务和拦截器

• 路由
• 状态管理

vite介绍

官网

Vite (法语单词“ fast”，发音为/vit/)是一种新型的前端构建工具，它可以显著改善前端的开发体验。

它由两个主要部分组成:

一个通过本机 ES 模块提供源文件的开发服务器，具有丰富的内置特性和快得惊人的热模块替换(HMR)

一个构建命令，它将代码与 Rollup 捆绑在一起，后者预先配置为输出用于生产的高度优化的静态资产
此外，Vite 通过其插件 API 和 JavaScript API 具有高度的扩展性，并提供全面的类型支持

项目创建

创建命令

$ npm init @vitejs/app
$ yarn create @vitejs/app

支持多种模板，选一种自己适合的就行

安装依赖

进入项目目录执行

npm install

启动

npm run dev

相关变化

script setup语法(响应式、通信、传值)

使用组件不用再在components中声明，引入直接使用
响应式数据不用在像vue3中那样需要导出，可以直接在模板中使用
父组件

<template>
  <Child msg="Hello Vue 3 + Vite" @myclick="getChild" ref="hw"/>
</template>
<script setup>
import HelloWorld from 'comps/Child.vue'
import {ref} from 'vue'
const hw = ref(null)
//接收子组件传递的数据
const getChild = (msg) => {
  console.log(msg)
  //调用子组件方法
  hw.value.someMethod()
}
</script>

子组件

<template>
  <h1>{{ msg }}</h1>
  <Comp/>
  <button @click="state.count++">count is: {{ count }}</button>
  <button @click="toParent">传递给父组件</button>
</template>

<script setup>
import { defineProps, reactive, defineEmits, useContext, toRefs } from 'vue'
//1、组件导入直接使用
import Comp from 'comps/Comp.vue'

//2、属性定义
const props = defineProps({
  msg: String
})
console.log(props)

//3、获取上下文对象
const ctx = useContext()
console.log(ctx)
//导出
ctx.expose({
  someMethod(){
    console.log("将方法导出外部，供外部使用")
  }
})

//4、事件定义导出
const emit = defineEmits(['myclick'])
const toParent = ()=> {
  emit('myclick','hello parent')
}
// 5、响应式数据
const state = reactive({ count: 0 })
// 6、解包响应式
const { count } = { ...toRefs(data) }
</script>

插槽slot修改

vue3计算属性与监听

vite.config.js内基础配置

import { defineConfig } from 'vite' //配置代码提示
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { viteMockServe } from 'vite-plugin-mock'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  //样式相关
  css:{},
  //打包相关
  esbuild:{},
  //别名
  alias:{
    "@": path.resolve(__dirname,"src"),
    "comps": path.resolve(__dirname,"src/components"),
    "views": path.resolve(__dirname,"src/views"),
    "routes": path.resolve(__dirname,"src/routes"),
    "utils": path.resolve(__dirname,"src/utils"),
  },
  //插件基于Rollup ,利用插件去扩展项目
  plugins: [vue(), vueJsx(), viteMockServe({supportTs: false})]
})

jsx使用（仅用于在单文件中使用）

安装

npm i @vitejs/plugin-vue-jsx -D

vite.config中配置

import vueJsx from '@vitejs/plugin-vue-jsx'
plugins: [vue(), vueJsx()]

单文件中使用

<script lang="jsx">
import { ref } from 'vue'
export default{
    //针对于vue3
    setup () {
        let counter = ref(1)
        const add = () => {
            counter.value++
        }

        return () => (
            <>
            <div>Comp</div>
            <p onClick={add}>{counter.value}</p>
            </>
        )
    }
    //针对于vue2写法
    /*
    data(){
        return {
            counter: 1
        }
    },
    render(){
        return (
            <>
            <div>Comp</div>
            <p onClick={this.add}>{this.counter}</p>
            </>
        )
    },
    methods: {
        add() {
           this.counter++ 
        }
    }
    */
} 
</script>

数据mock

git源码参考安装

npm i vite-plugin-mock -D
npm i mockjs -S

vite.config中配置

import { viteMockServe } from 'vite-plugin-mock'
plugins: [..., viteMockServe({supportTs: false})]

配置环境变量

npm i cross-env -D

packjson.js中修改启动

"dev": "cross-env NODE_ENV=development vite"

使用
根目录下创建mock文件夹
创建user.js，编写mock接口

export default [
    {
        url: '/api/createUser',
        method: 'post',
        response: ({ body }) => {
            console.log('body>>>>>>>>', body);
            return {
                code: 0,
                message: 'ok',
                data: null,
            };
        },
    },
];

项目中发起请求

const testRequest = new Request('/api/createUser', {
    method: 'post',
    headers: {
        'Content-Type': 'application/json;charset=utf-8;'
    },
    body: JSON.stringify({name:"star"})
})
fetch(testRequest).then(res=>res.json()).then(data=>{console.log(data)})

UI库整合

sass使用，公共样式整合

安装sass

npm i sass -D

建立styles文件夹编写公共样式
index作为出口组织这些公共样式，最后一并导出
styles/index.scss

@import './mixin.scss';
#app {
    ...
}

main.js中导入样式

import './styles/index.scss'

element3使用

安装

npm i element3 -S

全局引入

main.js中直接引入

import element3 from 'element3'
import 'element3/lib/theme-chalk/index.css'
createApp(App).use(element3).mount('#app')

局部引入

建立plugins文件夹创建element3.js插件

import {ElButton} from 'element3'
import 'element3/lib/theme-chalk/button.css'
//插件写法
export default function(app){
    app.use(ElButton)
}

main.js中引入

import element3 from 'plugins/element3.js'
createApp(App).use(element3).mount('#app')

服务封装

创建请求服务和拦截器

安装axios

npm i axios -S

根目录创建.env.development / .env.production文件，设置公共接口前缀

VITE_BASE_API = /api

建立utils文件夹，创建request.js请求服务

import axios from 'axios'
import {Message, Msgbox} from 'element3'
import store from '@/store'

//创建axios实例
const service = axios.create({
    baseURL: import.meta.env.VITE_BASE_API,
    timeout: 5000
})

//请求拦截
service.interceptors.request.use(
    (config) => {
        //指定请求令牌
        if(store.getters.token){
            config.headers["X-Token"] = store.getters.token
        }
        return config
    },
    (error) => {
        return Promise.reject(error)
    }
)
//响应拦截
service.interceptors.response.use(
    //通过判断状态码统一处理响应
    (response) => {
        const res = response.data
        if(res.code !== 200){
            Message.error({
                message: res.message || "Error",
                duration: 5 *1000
            })
            // 50008: 非法令牌; 50012: 其他客户端已登入; 50014: 令牌过期;
            if(res.code === 50008 || res.code === 50012 || res.code === 50014){
                //重新登录
                Msgbox.confirm("您已登出，请重新登录", "确认", {
                    confirmButtonText: "重新登录",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(()=>{
                    store.dispatch("user/resetToken").then(() => {
                        location.reload()
                    })
                })
            }
            return Promise.reject(new Error(res.message || "Error"))
        }else{
            return res
        }
    },
    (error) => {
        Message({
            message: error.message,
            type: "error",
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)


export default service

组件中使用
script setup自带async

const res = await service.post('/createUser',JSON.stringify({name:"star"}))

路由

具体用法和之前没什么区别，就是创建和引入发生改变
安装

npm i vue-router@next -S

建立router文件夹创建路由
router/index.js

import {createRouter, createWebHashHistory} from 'vue-router'
//由之前的new Router改为了由工厂函数去创建
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {path:'/', component: () => import('views/home.vue')}
    ]
})
export default router

main.js中使用router插件

...
import router from './router'//变成了插件的形式
createApp(App).use(router).mount('#app')

App.vue中添加

<router-view></router-view>

获取路由参数

<script>
import {useRouter, useRoute} from 'vue-router'
export default {
	setup(){
	// 获取路由器实例
		const router = useRouter()
		//使用
		//router.push..... 等等方法
		
		// route响应式对象，监控变化，传值
		const route = useRoute()    
		//获取 处理route.query 等等
	}
}
</script>

状态管理

具体用法和之前没什么区别，就是创建和引入发生改变
安装

npm i vuex@next -S

建立store文件夹创建数据存储
store/index.js

import {createStore} from 'vuex'
const store = createStore({
    state:{
        counter: 1
    },
    mutations:{
        add(state){
            state.counter++
        }
    }
})
export default store

main.js中使用router插件

...
import store from './store'//变成了插件的形式
createApp(App).use(store).mount('#app')

组件中使用

<p>{{$store.state.counter}}</p>
<button @click="$store.commit('add')">add</button>

setup中使用

import { useStore } from "vuex";
const store = useStore();
const xxx = store.state.xxx