簡介
感覺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/[email protected]/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