前言
不会 webpack，遇到报错就一头雾水，完全不知道怎么办，而且体积还大速度还慢。
所以尤雨溪做了 vite 后就很向往，只是知道自己水平有限还是等大佬先趟趟坑，等差不多了在跳。
现在vite2发布了，官网也有了，网上也能找到大佬写的相关资料，时机应该成熟可以往里跳了。
所以打算做个开源博客，一边做这个小项目，一边学习 vite2 和vue3，还有相关知识。
为啥选择博客呢？因为功能相对比较简单，不考虑皮肤等功能的话。
而且大家都比较熟悉，没写过博客总看过博文吧。
所以呢，业务需求方面一说大家也都懂，不用做过多的解释。
建立项目
因为GitHub总是连不上，速度还慢，所以选择了gitee。先在gitee上面建立一个项目：
https://gitee.com/naturefw/vue3-blog
![自然框架/vue3-blog]()
然后clone到本地，接下来就是用vite2建立项目了。
按照官网（https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project）介绍建立项目。
yarn create @vitejs/app
这里建议使用 yarn，因为可以更快一些。
- 设置项目名称：
![vite2建立项目，设置项目名称.png]()
输入你喜欢的名称即可，这里用vue3-blog。
- 选择模板
![vite2建立项目，选模板.png]()
我也不知道都是啥，反正选 vue 就对了，如果你喜欢ts的话，那么可以选择vue-ts。
![vite2建立项目的体积.png]()
比vue-cli建立的项目小多了，不信可以对比一下:
![vue-cli4.5建立项目的体积.png]()
- 运行项目
如果是Windows环境的话，可以做个bat文件，内容是 yarn dev ，然后保存为run.bat，注意扩展名。然后双击文件即可运行，比较方便。
![vite2运行项目.png]()
再也不需要漫长的等待了。
![vite2运行项目.png]()
还是一贯的简洁。
安装路由
按照官网（https://next.vuex.vuejs.org/installation.html#direct-download-cdn）介绍安装路由。（估计大家都会）
yarn add vuex@next --save
还是使用 yarn 的方式来安装。
![安装路由.png]()
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
![安装状态管理.png]()
- 设置
和 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')
具体使用方式在后面使用的时候在介绍。
- 状态管理的源码
[图片上传失败...(image-2dd5f1-1618448918633)]
安装 element-plus
按照官网（https://element-plus.gitee.io/#/zh-CN/component/installation）介绍安装 element-plus
yarn add element-plus --save
![安装element-plus.png]()
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
按照官网（https://ckang1229.gitee.io/vue-markdown-editor/zh/quick-start.html#安装支持-vue3-的版本）介绍，安装 v-md-editor，用于编辑博文。
yarn add @kangc/v-md-editor@next
注意：一定要带上@next，否则在vue3里面会报错，别问我是怎么知道了，还不是没仔细看文档踩的坑。
![安装v-mk-editor.png]()
好了项目的架子搭建起来了，后面就是具体的实现方式。
