文章目录
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
参考文章
村长b站视频
286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
