vite2+vue3初探

迷南。 2022-11-03 10:40 241阅读 0赞

### 文章目录 ###

*  vite介绍
 *  项目创建
 *   *  创建命令
     *  安装依赖
     *  启动
 *  相关变化
 *   *  script setup语法
 *  vite.config.js内基础配置
 *  jsx使用（仅用于在单文件中使用）
 *  数据mock
 *  UI库整合
 *   *  sass使用，公共样式整合
     *  element3使用
     *   *  全局引入
         *  局部引入
 *  服务封装
 *   *  创建请求服务和拦截器
 *  路由
 *  状态管理

# vite介绍 #

[官网][Link 1]

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

它由两个主要部分组成:

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

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

# 项目创建 #

## 创建命令 ##

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

支持多种模板，选一种自己适合的就行  
![在这里插入图片描述][20210227143535815.png]

## 安装依赖 ##

进入项目目录执行

npm install

## 启动 ##

npm run dev

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]

# 相关变化 #

## 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: { {  state.count }}</button>
      <button @click="toParent">传递给父组件</button>
    </template>
    
    <script setup>
    import {  defineProps, reactive, defineEmit, useContext } 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 = defineEmit(['myclick'])
    const toParent = ()=> { 
      emit('myclick','hello parent')
    }
    const state = reactive({  count: 0 })
    </script>

# [vite.config.js内基础配置][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()]

**单文件中使用**

# 数据mock #

[git源码参考][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)})

![在这里插入图片描述][20210227170044935.png]  
![在这里插入图片描述][20210227170114872.png]

# 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>

# 状态管理 #

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

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>

**参考文章**  
[村长b站视频][b]

[Link 1]: https://vitejs.dev/
[20210227143535815.png]: /images/20221024/27910b9be2a04252af4557ceee037c71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]: /images/20221024/c0d198e239764b1ab8a04c3fbeebfd05.png
[vite.config.js]: https://vitejs.dev/config/
[git]: https://github.com/anncwb/vite-plugin-mock
[20210227170044935.png]: /images/20221024/bbe3d915e018408aa9acc4be7d38dbdb.png
[20210227170114872.png]: /images/20221024/4078859221284730aa3b94cdac77bd0d.png
[b]: https://www.bilibili.com/video/BV1vX4y1K7bQ