簡介
感覺vue3的新特性很舒服，這樣才是寫軟體的感覺嘛。打算用Vue實現自己的一些想法。
Vue3還有幾個必備庫，比如Vue-Router（負責路由導航）、Vuex（狀態管理、元件間通訊），還有第三方UI庫，比如element Plus、Antdv、Vant 等。
這裡會介紹他們的CND的安裝方法，以及簡單的使用方式。
Vue3 的使用方式
使用方式有兩大類：
- CDN package
- 工程化方式開發
cnd方式就是在script裡面引用js檔案（類似於JQuery），然後就可以開魯了，簡單粗暴，適合於新手學習基礎知識，或者做點小專案。
但是如果想要開發中大型專案的話，就需要使用工程化的開發方式了。
本來想在這裡把這兩種方式都寫完，但是沒想到cnd的方式越寫越多，所以還是分成兩份來寫把。工程化方式在下一篇。
CND package 的方式
由於使用範圍比較小，所以網上的介紹資料比較少，往往都是一筆帶過，這裡想做一個整體介紹，也許是因為我比較喜歡這種簡單粗暴的方式吧。
不囉嗦，簡單粗暴，直接上程式碼：
js指令碼的引用方式
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-router@next"></script>
<script src="https://unpkg.com/vuex@next"></script>
<link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
<link rel="stylesheet" href="js/antdv/antd.css">
<script src="js/antdv/antd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css"/>
<script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>
-
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/element-plus@1.0.2-beta.30/lib/index.full.js
目前是 v1.0.2-beta.30，沒有發現next版本。
js指令碼一般都可以採用這種方式引入，UI庫需要引入對應的css檔案。
注意：https://unpkg.com/antd 這個是 react 的UI庫，並不是Vue的，不要混淆。
vue3的簡單使用
資料繫結和UI庫的使用
資料繫結和UI庫的演示<br>
{{value}}<br>
<!--原生dom-->
<input type="button" value="測試" @click="click"/><br>
<!--element-plus 的 按鈕-->
<el-button @click="click">elemet的按鈕</el-button><br>
<!--Ant Design Vue 的 按鈕-->
<a-button type="primary" @click="click">antdv的按鈕</a-button><br>
<!--Vant 的 按鈕-->
<van-button type="success" @click="click">vant的按鈕</van-button><br>
// 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狀態管理的簡單使用
模板裡的使用方式
vuex狀態演示<br>
<!--模板裡面可以直接使用$store，當然不建議這麼用-->
$store - count：{{$store.state.count}}<br>
$store - myObject：{{$store.state.myObject}}<br>
$store - myObject.time：{{$store.state.myObject.time}}<br>
<!--setup裡面返回的物件-->
setup - count：{{count}}<br>
setup - obj ：{{obj}}<br>
setup - objTime ：{{objTime}}<br>
<a-button type="primary" @click="setCount">vuex的 計數</a-button><br>
<a-button type="primary" @click="setTime">vuex的 設定屬性</a-button><br>
定義一個vuex例項
// 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裡的使用方式
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
}
路由的簡單使用
模板裡的使用方式，簡單版
路由的演示<br>
<div>
<p>
路由的簡單演示，其實CND方式不太適合用路由，因為元件寫起來比較麻煩。<br>
<!-- 使用 router-link 元件來導航. -->
<!-- 通過傳入 `to` 屬性指定連結. -->
<!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
<router-link to="/home">首頁</router-link>
<router-link to="/product">產品</router-link>
</p>
<!-- 路由匹配到的元件將在這裡渲染 -->
路由入口<br>
<router-view></router-view>
</div>
-
router-link
類似於 a 標籤。但是不要直接用 a 標籤，因為會導致頁面重新載入。 -
router-view
路由入口，或者說是容器，載入路由指定的元件的位置。
定義一個路由，簡單版
// 路由的簡單使用 ========================================
// 1、定義元件，便於路由導航的演示，裡面可以加vuex的state
const home = {
template: '<div>假裝這是首頁{{$store.state.myObject.time}}</div>',
setup() {
// alert('我是首頁')
}
}
const product = {
template: '<div>假裝這是商品頁面{{$store.state.count}}</div>',
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/cnd.html