每天學一點 Vue3(一) CND方式的安裝以及簡單使用
阿新 • • 發佈:2021-01-29
# 簡介
感覺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 路由的演示
~~~
* 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
{{value}}
antdv的按鈕
~~~ ~~~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方式不太適合用路由,因為元件寫起來比較麻煩。
首頁