vite
尤大在 Vue 3.0 beta 直播中推薦了 vite 的工具，強(qiáng)調(diào)：針對Vue單頁面組件的無打包開發(fā)服務(wù)器，可以直接在瀏覽器運行請求的 vue 文件
很新穎，這篇博客用它來搭建一個 vue3 的項目試試
Vite 是面向現(xiàn)代瀏覽器，基于原生模塊系統(tǒng) ESModule 實現(xiàn)了按需編譯的 Web 開發(fā)構(gòu)建工具。在生產(chǎn)環(huán)境下基于 Rollup 打包
- 快速冷啟動服務(wù)器
- 即時熱模塊更換（HMR）
- 真正的按需編譯
node >= 10.16.0
搭建
使用 vite 搭建項目
|
1
|
npm init vite-app <project-name> |
安裝 typescript、vue-router@next、axios、eslint-plugin-vue、sass 等相關(guān)插件
配置
vite.config.ts
vite.config.ts 相當(dāng)于 @vue-cli 項目中的 vue.config.js
我這簡單配置一下：
|
1
2
3
4
5
6
7
8
9
10
11
|
import path from 'path'module.exports = { alias: { '/@/': path.resolve(__dirname, './src') }, optimizeDeps: { include: ['lodash'] }, proxy: {}} |
Router
在 src 下新建 router 文件夾，并在文件夾內(nèi)創(chuàng)建 index.ts
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
import { createRouter, createWebHistory } from 'vue-router'const routes = [ { path: '/', name: 'Home', component: () => import('/@/views/Home.vue') }, { path: '/lifeCycle', name: 'lifeCycle', component: () => import('/@/views/LifeCycle.vue') }]export default createRouter({ history: createWebHistory('/krry/'), routes}) |
ts types
項目根目錄下新建 tsconfig.json 寫入相關(guān)配置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
{ "compilerOptions": { ...// 其他配置 "paths": { "/@/*": [ "src/*" ] }, "lib": [ "esnext", "dom", "dom.iterable", "scripthost" ] }, "include": [ "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/types/images.d.ts", "tests/**/*.ts", "tests/**/*.tsx" ], "exclude": [ "node_modules" ]} |
src 目錄下新建 types 文件夾，里面需要配置 ts 的類型
shims-vue.d.ts
|
1
|
declare module '*.vue' {} |
images.d.ts
|
1
2
3
4
5
6
7
|
declare module '*.svg'declare module '*.png'declare module '*.jpg'declare module '*.jpeg'declare module '*.gif'declare module '*.bmp'declare module '*.tiff' |
main.ts
|
1
2
3
4
5
6
7
8
|
import { createApp } from 'vue'import router from '/@/router'import App from '/@/App.vue'const app = createApp(App)app.use(router)app.mount('#app') |
然后就可以快樂地寫代碼了
vue3 知識
setup
vue3 中用 setup 函數(shù)整合了所有的 api；只執(zhí)行一次，在生命周期函數(shù)前執(zhí)行，所以在 setup 函數(shù)中拿不到當(dāng)前實例 this，不能用 this 來調(diào)用 vue2 寫法中定義的方法
它將接受兩個參數(shù)：props、context
|
1
2
3
4
5
6
|
// props - 組件接受到的屬性 context - 上下文 setup(props, context) { return { // 要綁定的數(shù)據(jù)和方法 }} |
props
setup 函數(shù)中的 props 是響應(yīng)式的，當(dāng)傳入新的 prop 時，它將被更新
但是，因為 props 是響應(yīng)式的，不能使用 ES6 解構(gòu)，因為它會消除 prop 的響應(yīng)性
如果需要解構(gòu) prop，可以通過使用 setup 函數(shù)中的 toRefs 來安全地完成此操作
|
1
2
3
4
5
6
|
import { toRefs } from 'vue'setup(props) { const { title } = toRefs(props) console.log(title.value)} |
context
context 暴露三個組件的 property：{ attrs, slots, emit }
它是一個普通的 JavaScript 對象，不是響應(yīng)式的，這意味著你可以安全地對 context 使用 ES6 解構(gòu)
生命周期
通過在生命周期鉤子前面加上 “on” 來訪問組件的生命周期鉤子
因為 setup 是圍繞 beforeCreate 和 created 生命周期鉤子運行的，所以不需要顯式地定義它們
換句話說，在這兩個鉤子中編寫的任何代碼都應(yīng)該直接在 setup 函數(shù)中編寫
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
setup() { onMounted(() => { console.log('組件掛載') }) onUnmounted(() => { console.log('組件卸載') }) onUpdated(() => { console.log('組件更新') }) onBeforeUpdate(() => { console.log('組件將要更新') }) onActivated(() => { console.log('keepAlive 組件 激活') }) onDeactivated(() => { console.log('keepAlive 組件 非激活') }) return {}} |
ref、reactive
ref 可以將某個普通值包裝成響應(yīng)式數(shù)據(jù)，僅限于簡單值，內(nèi)部是將值包裝成對象，再通過 defineProperty 來處理的
通過 ref 包裝的值，取值和設(shè)置值的時候，需用通過 .value來進(jìn)行設(shè)置
可以用 ref 來獲取組件的引用，替代 this.$refs 的寫法
reactive 對復(fù)雜數(shù)據(jù)進(jìn)行響應(yīng)式處理，它的返回值是一個 proxy 對象，在 setup 函數(shù)中返回時，可以用 toRefs 對 proxy 對象進(jìn)行結(jié)構(gòu)，方便在 template 中使用
使用如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<template> <div> <div> <ul v-for="ele in eleList" :key="ele.id"> <li>{{ ele.name }}</li> </ul> <button @click="addEle">添加</button> </div> <div> <ul v-for="ele in todoList" :key="ele.id"> <li>{{ ele.name }}</li> </ul> <button @click="addTodo">添加</button> </div> </div></template><script>import { ref, reactive, toRefs } from 'vue'export default { setup() { // ref const eleList = ref([]) function addEle() { let len = eleList.value.length eleList.value.push({ id: len, name: 'ref 自增' + len }) } // reactive const dataObj = reactive({ todoList: [] }) function addTodo() { let len = dataObj.todoList.length dataObj.todoList.push({ id: len, name: 'reactive 自增' + len }) } return { eleList, addEle, addTodo, ...toRefs(dataObj) } }}</script> |
computed、watch
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// computedlet sum = computed(() => dataObj.todoList.length + eleList.value.length)console.log('setup引用computed要.value：' + sum.value)// watchwatch( eleList, (curVal, oldVal) => { console.log('監(jiān)聽器：', curVal, oldVal) }, { deep: true }) |
watchEffect
響應(yīng)式地跟蹤函數(shù)中引用的響應(yīng)式數(shù)據(jù)，當(dāng)響應(yīng)式數(shù)據(jù)改變時，會重新執(zhí)行函數(shù)
|
1
2
3
4
5
6
|
const count = ref(0)// 當(dāng) count 的值被修改時，會執(zhí)行回調(diào)const stop = watchEffect(() => console.log(count.value))// 停止監(jiān)聽stop() |
還可以停止監(jiān)聽，watchEffect 返回一個函數(shù)，執(zhí)行后可以停止監(jiān)聽
與 vue2 一樣：
|
1
2
3
4
|
const unwatch = this.$watch('say', curVal => {})// 停止監(jiān)聽unwatch() |
useRoute、useRouter
|
1
2
3
4
|
import {useRoute, useRouter} from 'vue-router'const route = useRoute() // 相當(dāng)于 vue2 中的 this.$routeconst router = useRouter() // 相當(dāng)于 vue2 中的 this.$router |
route 用于獲取當(dāng)前路由數(shù)據(jù)
router 用于路由跳轉(zhuǎn)
vuex
使用 useStore 來獲取 store 對象 從 vuex 中取值時，要注意必須使用 computed 進(jìn)行包裝，這樣 vuex 中狀態(tài)修改后才能在頁面中響應(yīng)
|
1
2
3
4
5
6
7
8
9
10
|
import {useStore} from 'vuex'setup(){ const store = useStore() // 相當(dāng)于 vue2 中的 this.$store store.dispatch() // 通過 store 對象來 dispatch 派發(fā)異步任務(wù) store.commit() // commit 修改 store 數(shù)據(jù) let category = computed(() => store.state.home.currentCagegory return { category }} |
到此這篇關(guān)于vite+ts快速搭建vue3項目以及介紹相關(guān)特性的文章就介紹到這了,更多相關(guān)vite+ts搭建vue3內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://www.cnblogs.com/ainyi/p/13927377.html
