做个开源博客学习Vite2 + Vue3 (一)搭建项目
前言
不会 webpack,遇到报错就一头雾水,完全不知道怎么办,而且体积还大速度还慢。
所以尤雨溪做了 vite 后就很向往,只是知道自己水平有限还是等大佬先趟趟坑,等差不多了在跳。
现在vite2发布了,官网也有了,网上也能找到大佬写的相关资料,时机应该成熟可以往里跳了。
所以打算做个开源博客,一边做这个小项目,一边学习 vite2 和vue3,还有相关知识。
为啥选择博客呢?因为功能相对比较简单,不考虑皮肤等功能的话。
而且大家都比较熟悉,没写过博客总看过博文吧。
所以呢,业务需求方面一说大家也都懂,不用做过多的解释。
建立项目
因为GitHub总是连不上,速度还慢,所以选择了gitee。先在gitee上面建立一个项目:
https://gitee.com/naturefw/vue3-blog
然后clone到本地,接下来就是用vite2建立项目了。
按照官网(https://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,注意扩展名。然后双击文件即可运行,比较方便。
再也不需要漫长的等待了。
- 看看效果
还是一贯的简洁。
安装路由
按照官网(https://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
按照官网(https://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
按照官网(https://ckang1229.gitee.io/vue-markdown-editor/zh/quick-start.html#安装支持-vue3-的版本)介绍,安装 v-md-editor,用于编辑博文。
yarn add @kangc/v-md-editor@next
注意:一定要带上@next,否则在vue3里面会报错,别问我是怎么知道了,还不是没仔细看文档踩的坑。
好了项目的架子搭建起来了,后面就是具体的实现方式。
下篇更精彩。
码字不易,感谢点赞。
做个开源博客学习Vite2 + Vue3 (一)搭建项目的更多相关文章
- 做个开源博客学习Vite2 + Vue3 (三)博客设计和代码设计
项目搭建好了之后是不是可以编码了呢? 等等不要着急,我们是不是应该先设计一下?比如博客的功能等? 博客设计 先做个简单的个人博客,因为是个人版,所以可以省略注册.登录这些功能,表结构也可以简单一点. ...
- 做个开源博客学习Vite2 + Vue3 (四)实现博客功能
我们再来看一下管理类的设计. Composition API,就是组合API的意思,那么是不是应该把js代码分离出来,做成独立的管理类的形式呢? 这样代码可以更整洁一些,主要是setup里面的代码就不 ...
- 基于开源博客系统(mblog)搭建网站
基于开源博客系统(mblog)搭建网站 上一章讲了基于jpress部署的博客系统,这一章了解一下 mblog这个开源的基于springboot的博客系统,相比与jpress 的热度fork数量要少一些 ...
- 基于开源博客系统(jpress)搭建网站
基于开源博客系统(jpress)搭建网站 JPress 使用 Java8 开发,基于流行的JFinal和Jboot框架. 目前JPress已经内置的文章和页面其实是两个模块,可以移除和新增其他模块,因 ...
- 26种基于PHP的开源博客系统
26种基于PHP的开源博客系统 来源:本站原创 PHP学习笔记 以下列举的PHP开源Blog系统中,除了我们熟知的WordPress之外,大多都没有使用过,其中一些已经被淘汰,或者有人还在使用.除了做 ...
- Java程序员博客系统推荐!我调研了100来个 Java 开源博客系统,发现这 5 个最好用!
大家好!我是 Guide 哥,Java 后端开发.一个会一点前端,喜欢烹饪的自由少年. 最近想倒腾一下博客,看了很多现成的比较成熟的开源博客系统,自己也简单从下面几个维度总结对比了一下: star数量 ...
- Java 开源博客——B3log Solo 0.6.6 正式版公布了!
Java 开源博客 -- B3log Solo 0.6.6 正式版公布了!欢迎大家下载. 该版本号引入了数据库连接池:Druid. 另外,欢迎观摩 B3log 团队的新项目:Noty,也很欢迎大家參与 ...
- Java 开源博客——B3log Solo 0.6.7 正式版公布了!
Java 开源博客 -- B3log Solo 0.6.7 正式版公布了!欢迎大家下载. 另外,欢迎观摩 B3log 团队的新项目:Wide,也很欢迎大家參与进来 :-) 特性 基于标签的文章分类 P ...
- Java 开源博客——B3log Solo 0.6.1 正式版发布了!
Java 开源博客 —— B3LOG Solo 0.6.1 正式版发布了!欢迎大家下载. 该版本主要是改善细节体验,并加入了一款 Metro 风格的皮肤. 特性 基于标签的文章分类 Ping Goog ...
随机推荐
- 2021年-在windwos下如何用TOMACT发布一个系统(完整配置案列)
2021年新年第一篇:博主@李宗盛-关于在Windwos下使用TOMCAT发布一个系统的完成配置案列. 之前写过关于TOMCAT的小篇幅文档,比较分散,可以作为对照与参考. 此篇整合在一起,一篇文档写 ...
- 类关系与uml图示表示
1. 关联(Association).聚合(Aggregation).组合(Composition)区别 association: 两者之间存在某种关联即可,很弱的关系,如student and co ...
- Java中base64与byte[]转换
1.base64转byte[] 导包: import java.util.Base64 转换: String base64Str = base64的字符串; byte[] bytes = Base64 ...
- 🤔 移动端 JS 引擎哪家强?美国硅谷找......
如果你喜欢我写的文章,可以把我的公众号设为星标 ,这样每次有更新就可以及时推送给你啦 在一般的移动端开发场景中,每次更新应用功能都是通过 Native 语言开发并通过应用市场版本分发来实现的.但是市场 ...
- Java流程控制:顺序结构
一.流程控制 Java中的流程控制语句可以这样分类:顺序结构.选择结构.循环结构.这三种结构就足够解决所有的问题了! 二.顺序结构 描述: Java流程控制的基本结构就是顺序结构,除非特别指明,否则J ...
- 正月十五吃汤圆CountDownLatch
CountDownLatch实际应用 今天是正月十五,给大家拜个晚年啦! 元宵节是中国传统节日,吃汤圆不能少啊,今天我们统计下"叫练"吃汤圆时间,并用代码模拟下叫练吃汤圆!其中用到 ...
- 167. 两数之和 II - 输入有序数组 + 哈希表 + 双指针
167. 两数之和 II - 输入有序数组 LeetCode_167 题目描述 方法一:暴力法(使用哈希表) class Solution { public int[] twoSum(int[] nu ...
- HDR(高动态范围)
一: 简介 一般来说,当存储在帧缓冲(Framebuffer)中时,亮度和颜色的值是默认被限制在0.0到1.0之间的. 但是如果我们遇上了一个特定的区域,其中有多个亮光源使这些数值总和超过了1.0,又 ...
- Microsoft Teams 2021最新功能发布解读 – 会议篇
正在进行的2021年的Microsoft Ignite大会,发布了一系列跟Microsoft Teams相关的新功能,英文介绍请参考 https://techcommunity.microsoft.c ...
- 【粉丝问答10】C语言关键字static的使用详解
视频地址:https://www.ixigua.com/6935761378816819748 粉丝提问 粉丝问题,总结一下: 关键字static的使用方法. 要想搞清楚关键字static的使用方法, ...