做個開源部落格學習Vite2 + Vue3 （一）搭建項目
前言
不會 webpack，遇到報錯就一頭霧水，完全不知道怎麼辦，而且體積還大速度還慢。
所以尤雨溪做了 vite 後就很嚮往，只是知道自己水平有限還是等大佬先趟趟坑，等差不多了在跳。
現在vite2發布了，官網也有了，網上也能找到大佬寫的相關資料，時機應該成熟可以往裡跳了。
所以打算做個開源部落格，一邊做這個小項目，一邊學習 vite2 和vue3，還有相關知識。
為啥選擇部落格呢？因為功能相對比較簡單，不考慮皮膚等功能的話。
而且大家都比較熟悉，沒寫過部落格總看過博文吧。
所以呢，業務需求方面一說大家也都懂，不用做過多的解釋。
建立項目
因為GitHub總是連不上，速度還慢，所以選擇了gitee。先在gitee上面建立一個項目：
//gitee.com/naturefw/vue3-blog
然後clone到本地，接下來就是用vite2建立項目了。
按照官網（//cn.vitejs.dev/guide/#scaffolding-your-first-vite-project）介紹建立項目。
yarn create @vitejs/app
這裡建議使用 yarn，因為可以更快一些。
- 設置項目名稱：
輸入你喜歡的名稱即可，這裡用vue3-blog。
- 選擇模板
我也不知道都是啥，反正選 vue 就對了，如果你喜歡ts的話，那麼可以選擇vue-ts。
-
初始化
進入項目文件夾，執行 yarn 安裝需要的資源包。最後執行 yarn dev 就可以運行項目了。
-
對比項目體積
vite2建立的項：
比vue-cli建立的項目小多了，不信可以對比一下:
- 運行項目
如果是Windows環境的話，可以做個bat文件，內容是yarn dev，然後保存為run.bat，注意擴展名。然後雙擊文件即可運行，比較方便。
再也不需要漫長的等待了。
- 看看效果
還是一貫的簡潔。
安裝路由
按照官網（//next.vuex.vuejs.org/installation.html#direct-download-cdn）介紹安裝路由。（估計大家都會）
yarn add vuex@next --save
還是使用 yarn 的方式來安裝。
- main裡面做設置
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 路由
createApp(App)
.use(router) // 路由
.mount('#app')
路由的設置和使用沒啥區別，所以就不多說了。
安裝輕量級狀態管理
vite2也是支援Vuex的，只是個人感覺Vuex有點繁瑣，所以自己做了個輕量級的狀態管理，部落格項目採用這個vue-data-state來嘗試一下，具體好不好用看後面的實際使用情況。
- 安裝
yarn add vue-data-state
- 設置
和 Vuex 比較像，先做一個index.js 文件定義狀態，然後在main.js 裡面掛載
// store-ds/index.js
import VuexDataState from 'vue-data-state'
export default VuexDataState.createStore({
global: { // 全局狀態
blogState: {
name:'博文的狀態', // 測試用
currentGroupId: 0, // 選擇的分組ID。0：沒選擇
currentArticleId: 0, // 選擇的文章ID。
editArticleId: 0 // 當前修改的文章ID
},
dicussState: {
name: '討論的狀態'
}
},
local: { // 局部狀態
// 數據列表，使用前需要先註冊
dataListState() { // 顯示博文列表用的狀態
return {
findKind: {}, // 查詢方式
find: {}, // 查詢關鍵字
page: { // 分頁參數
pageTotal: 100,
pageSize: 2,
pageIndex: 1,
orderBy: { id: false }
},
_query: {}, // 快取的查詢條件
isReload: false // 重新載入數據，需要統計總數
}
}
},
// 可以給全局狀態設置初始狀態，同步數據可以直接在上面設置，如果是非同步數據，可以在這裡設置。
init(state) {
setTimeout(() => {
state.blogState.name = 'int裡面設置的數據，可以非同步'
},3000)
}
})
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 路由
import store from './store-ds' // 輕量級狀態
createApp(App)
.use(router) // 路由
.use(store) // 輕量級狀態
.mount('#app')
具體使用方式在後面使用的時候在介紹。
安裝 element-plus
按照官網（//element-plus.gitee.io/#/zh-CN/component/installation）介紹安裝 element-plus
yarn add element-plus --save
vite2支援各種UI庫，或者說支援什麼UI庫，其實還是看vue3。
使用方面也沒啥區別。
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 路由
import store from './store-ds' // 輕量級狀態
// UI庫
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn'
createApp(App)
.use(router) // 路由
.use(store) // 輕量級狀態
.use(ElementPlus, { locale, size: 'small' }) // UI庫
.mount('#app')
安裝 v-md-editor
按照官網（//ckang1229.gitee.io/vue-markdown-editor/zh/quick-start.html#安裝支援-vue3-的版本）介紹，安裝 v-md-editor，用於編輯博文。
yarn add @kangc/v-md-editor@next
注意：一定要帶上@next，否則在vue3裡面會報錯，別問我是怎麼知道了，還不是沒仔細看文檔踩的坑。
好了項目的架子搭建起來了，後面就是具體的實現方式。
下篇更精彩。
碼字不易，感謝點贊。
