前言
不会 webpack,遇到报错就一头雾水,完全不知道怎么办,而且体积还大速度还慢。 所以尤雨溪做了 vite 后就很向往,只是知道自己水平有限还是等大佬先趟趟坑,等差不多了在跳。
现在vite2发布了,官网也有了,网上也能找到大佬写的相关资料,时机应该成熟可以往里跳了。 所以打算做个开源博客,一边做这个小项目,一边学习 vite2 和vue3,还有相关知识。
为啥选择博客呢?因为功能相对比较简单,不考虑皮肤等功能的话。 而且大家都比较熟悉,没写过博客总看过博文吧。 所以呢,业务需求方面一说大家也都懂,不用做过多的解释。
建立项目
因为GitHub总是连不上,速度还慢,所以选择了gitee。先在gitee上面建立一个项目:
然后clone到本地,接下来就是用vite2建立项目了。
按照官网(cn.vitejs.dev/guide/#scaf…
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/installatio…
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/com… 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-markdow… v-md-editor,用于编辑博文。
yarn add @kangc/v-md-editor@next 复制代码
注意:一定要带上@next,否则在vue3里面会报错,别问我是怎么知道了,还不是没仔细看文档踩的坑。
好了项目的架子搭建起来了,后面就是具体的实现方式。 下篇更精彩。 码字不易,感谢点赞。