vite
尤大在 Vue 3.0 beta 直播中推薦了 vite 的工具，強調：針對Vue單頁面組件的無打包開發服務器，可以直接在瀏覽器運行請求的 vue 文件
很新穎，這篇博客用它來搭建一個 vue3 的項目試試
Vite 是面向現代瀏覽器，基于原生模塊系統 ESModule 實現了按需編譯的 Web 開發構建工具。在生產環境下基于 Rollup 打包
- 快速冷啟動服務器
- 即時熱模塊更換（HMR）
- 真正的按需編譯
node >= 10.16.0
搭建
使用 vite 搭建項目
|
1
|
npm init vite-app <project-name> |
安裝 typescript、vue-router@next、axios、eslint-plugin-vue、sass 等相關插件
配置
vite.config.ts
vite.config.ts 相當于 @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 文件夾，并在文件夾內創建 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 寫入相關配置
|
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 函數整合了所有的 api；只執行一次，在生命周期函數前執行，所以在 setup 函數中拿不到當前實例 this，不能用 this 來調用 vue2 寫法中定義的方法
它將接受兩個參數：props、context
|
1
2
3
4
5
6
|
// props - 組件接受到的屬性 context - 上下文 setup(props, context) { return { // 要綁定的數據和方法 }} |
props
setup 函數中的 props 是響應式的，當傳入新的 prop 時，它將被更新
但是，因為 props 是響應式的，不能使用 ES6 解構，因為它會消除 prop 的響應性
如果需要解構 prop，可以通過使用 setup 函數中的 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 對象，不是響應式的，這意味著你可以安全地對 context 使用 ES6 解構
生命周期
通過在生命周期鉤子前面加上 “on” 來訪問組件的生命周期鉤子
因為 setup 是圍繞 beforeCreate 和 created 生命周期鉤子運行的，所以不需要顯式地定義它們
換句話說，在這兩個鉤子中編寫的任何代碼都應該直接在 setup 函數中編寫
|
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 可以將某個普通值包裝成響應式數據，僅限于簡單值，內部是將值包裝成對象，再通過 defineProperty 來處理的
通過 ref 包裝的值，取值和設置值的時候，需用通過 .value來進行設置
可以用 ref 來獲取組件的引用，替代 this.$refs 的寫法
reactive 對復雜數據進行響應式處理，它的返回值是一個 proxy 對象，在 setup 函數中返回時，可以用 toRefs 對 proxy 對象進行結構，方便在 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('監聽器：', curVal, oldVal) }, { deep: true }) |
watchEffect
響應式地跟蹤函數中引用的響應式數據，當響應式數據改變時，會重新執行函數
|
1
2
3
4
5
6
|
const count = ref(0)// 當 count 的值被修改時，會執行回調const stop = watchEffect(() => console.log(count.value))// 停止監聽stop() |
還可以停止監聽，watchEffect 返回一個函數，執行后可以停止監聽
與 vue2 一樣：
|
1
2
3
4
|
const unwatch = this.$watch('say', curVal => {})// 停止監聽unwatch() |
useRoute、useRouter
|
1
2
3
4
|
import {useRoute, useRouter} from 'vue-router'const route = useRoute() // 相當于 vue2 中的 this.$routeconst router = useRouter() // 相當于 vue2 中的 this.$router |
route 用于獲取當前路由數據
router 用于路由跳轉
vuex
使用 useStore 來獲取 store 對象 從 vuex 中取值時，要注意必須使用 computed 進行包裝，這樣 vuex 中狀態修改后才能在頁面中響應
|
1
2
3
4
5
6
7
8
9
10
|
import {useStore} from 'vuex'setup(){ const store = useStore() // 相當于 vue2 中的 this.$store store.dispatch() // 通過 store 對象來 dispatch 派發異步任務 store.commit() // commit 修改 store 數據 let category = computed(() => store.state.home.currentCagegory return { category }} |
到此這篇關于vite+ts快速搭建vue3項目以及介紹相關特性的文章就介紹到這了,更多相關vite+ts搭建vue3內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://www.cnblogs.com/ainyi/p/13927377.html
