# 簡介 感覺vue3的新特性很舒服，這樣才是寫軟體的感覺嘛。打算用Vue實現自己的一些想法。 Vue3還有幾個必備庫，比如Vue-Router（負責路由導航）、Vuex（狀態管理、元件間通訊），還有第三方UI庫，比如element Plus、Antdv、Vant 等。 這裡會介紹他們的CND的安裝方法，以及簡單的使用方式。 # Vue3 的使用方式 使用方式有兩大類： * CDN package * 工程化方式開發 cnd方式就是在script裡面引用js檔案（類似於JQuery），然後就可以開魯了，簡單粗暴，適合於新手學習基礎知識，或者做點小專案。 但是如果想要開發中大型專案的話，就需要使用工程化的開發方式了。 本來想在這裡把這兩種方式都寫完，但是沒想到cnd的方式越寫越多，所以還是分成兩份來寫把。工程化方式在下一篇。 # CND package 的方式 由於使用範圍比較小，所以網上的介紹資料比較少，往往都是一筆帶過，這裡想做一個整體介紹，也許是因為我比較喜歡這種簡單粗暴的方式吧。 不囉嗦，簡單粗暴，直接上程式碼： ## js指令碼的引用方式 ~~~js ~~~ * https://unpkg.com/vue 引用預設版本的vue.js檔案，目前是 v2.6.12。 * https://unpkg.com/vue@3 @後面可以指定版本號。 * https://unpkg.com/vue@next 引用最新版本。目前是3.0 * Ant Design Vue 似乎沒有提供cnd的方式，我們需要先使用npm安裝，然後到 （node_modules/）ant-design-vue/dist 裡面找到需要的檔案，或者到 [UNPKG](https://unpkg.com/ant-design-vue/dist/) 進行下載。 * https://unpkg.com/[email protected]/lib/index.full.js 目前是 v1.0.2-beta.30，沒有發現next版本。 js指令碼一般都可以採用這種方式引入，UI庫需要引入對應的css檔案。 > 注意：https://unpkg.com/antd 這個是 react 的UI庫，並不是Vue的，不要混淆。 # vue3的簡單使用 ## 資料繫結和UI庫的使用 ~~~html 資料繫結和UI庫的演示
{{value}}

elemet的按鈕
antdv的按鈕
vant的按鈕
~~~ ~~~js // vue3的 Composition API 的奧義， // 不要傻傻的把程式碼都寫到setup裡面了，分出來寫才是王道。 // 便於複用，可以寫到單獨的js檔案裡面 const testManage = () => { const value = Vue.ref('你好，世界') // 相當於data const click = () => { // 相當於 methods 裡面的事件 value.value = '好的，收到！' + new Date() } return { value, click } } // 定義 vue3 的物件 const vue3Composition = { setup() { // 傳說中的setup // 使用上面的定義的“類”，分散setup內部的程式碼 const { value, click } = testManage() return { // 返回給模板，否則模板訪問不到。這裡返回的是物件。 value, click } } } // 建立vue3的例項 const vm = Vue.createApp(vue3Composition) .use(myVuex) // 掛載vuex，myVuex在下面介紹 .use(router) // 掛載路由，router 在下面介紹 .use(antd) // 載入 Ant Design Vue .use(ElementPlus) // 載入ElementPlus .use(vant) // 載入vant .mount('#app') // 掛載Vue的app例項 ~~~ > 一般UI庫用一個就行，不用都安裝。這裡只是想看看都安裝上會不會衝突，好吧，是我懶不想弄多個檔案。 ## Vuex狀態管理的簡單使用 ### 模板裡的使用方式 ~~~html vuex狀態演示
$store - count：{{$store.state.count}}
$store - myObject：{{$store.state.myObject}}
$store - myObject.time：{{$store.state.myObject.time}}
setup - count：{{count}}
setup - obj ：{{obj}}
setup - objTime ：{{objTime}}
vuex的 計數
vuex的 設定屬性
~~~ ### 定義一個vuex例項 ~~~js // vuex 的簡單使用 ======================= const myStore = { state: { // 可以理解為大號 data（不準確） count: 0, myObject: { time: '現在的時間' } }, getters: { // 設定屬性的值 getCount: (state) => { return state.count }, getMyObject: (state) => { return Vue.readonly(state.myObject) }, getTime: (state) => { return state.myObject.time } }, mutations: { // 獲取屬性的值 setCount(state) { state.count++ }, setTime(state) { state.myObject.time = '現在時間：' + new Date() } } // 其他方法暫略 } // 建立vuex的例項，vue3需要掛載例項，掛載方式在上面 const myVuex = Vuex.createStore(myStore) ~~~ * state 在vue3裡面，整個state都是Proxy的，也就是說，可以認為state是一個reactive。 這裡定義一個簡單型別和引用型別，state裡的簡單型別不會變，但是引用型別也會自動變成Proxy，也就不用我們自己用Reactive了。 * getMyObject 和 readonly 因為不建議在元件裡面直接對state設定值，而是要用 mutations 設定值，使用getters獲取值。 如果state是簡單型別的話沒有問題，但是如果state裡面有物件型別的話，那麼getters裡面直接return，就有可能發生誤賦值的問題。 為了避免這個漏洞，可以使用readonly來返回，這樣元件裡面就無法直接給state賦值了。 ### setup裡的使用方式 ~~~js setup() { // 傳說中的setup // 獲得store物件 const store = Vuex.useStore() console.log(store) // 打印出來看看 const setCount = () =>{ // 使用 mutations 的 setCount 實現計數 store.commit('setCount') } const setTime = () =>{ // 使用 mutations 的 setTime 實現修改屬性 store.commit('setTime') // 測試直接修改 // 加上 readonly 就不可修改了， // 但是程式碼並不會報錯 setTimeout(() => { obj.time = '222' console.log('setTimeout-obj',obj) },500) } // 獲取state // const count = store.state.count 強烈建議不要直接訪問 const count = store.getters.getCount const obj = store.getters.getMyObject const objTime = store.getters.getTime console.log('obj', obj) console.log('objTime', objTime) return { // 返回給模板，否則模板訪問不到。 value, click, setCount, setTime, count, obj, objTime } ~~~ ## 路由的簡單使用 ### 模板裡的使用方式，簡單版 ~~~html 路由的演示

路由的簡單演示，其實CND方式不太適合用路由，因為元件寫起來比較麻煩。

首頁    產品

路由入口
~~~ * router-link 類似於 a 標籤。但是不要直接用 a 標籤，因為會導致頁面重新載入。 * router-view 路由入口，或者說是容器，載入路由指定的元件的位置。 ### 定義一個路由，簡單版 ~~~js // 路由的簡單使用 ======================================== // 1、定義元件，便於路由導航的演示，裡面可以加vuex的state const home = { template: '假裝這是首頁{{$store.state.myObject.time}}', setup() { // alert('我是首頁') } } const product = { template: '假裝這是商品頁面{{$store.state.count}}', setup() { // alert('我是商品介紹') } } // 2、定義路由，路由規則 const routes = [ { path: '/home', component: home }, { path: '/product', component: product } ] // 獲取路由方式 const history = VueRouter.createWebHistory() // 3. 建立 router 例項，vue3需要掛載例項，掛載方式在上面 const router = VueRouter.createRouter({ history, routes }) ~~~ * const home 、const product 需要先定義兩個簡單的元件，便於演示。 * const routes 定義一個簡單的路由規則。 * VueRouter.createWebHistory() 建立一個導航方式，hash 和 history api（歷史模式）。預設是history api。 * VueRouter.createRouter 建立一個路由的例項，然後把這個例項掛到app例項上面。這樣就可以正式使用路由了。 * setup 可以不在在setup裡面寫程式碼，當然也可以在setup裡面手寫路由，這裡就不演示了。 # 小結 以上就是cnd方式的vue3的載入方式和簡單使用，包含路由、狀態管理、UI庫的引入、繫結、事件等。 這裡主要介紹如何組合起來，而不是具體用法。具體用法後面會陸續介紹。 # 線上演示 https://naturefwvue.github.io/vue3-zhihu/src/cnd-blog/cnd.html github 有點卡，可能會轉很久。（或者是js掛的有點多。。。） 如果等不急的話，可以到下面看原始碼。 # 原始碼 https://github.com/naturefwvue/vue3-zhihu/blob/main/src/cnd-blog/c