前言

不会 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 (一)搭建项目的更多相关文章

  1. 基于开源博客系统(mblog)搭建网站

    基于开源博客系统(mblog)搭建网站 上一章讲了基于jpress部署的博客系统,这一章了解一下 mblog这个开源的基于springboot的博客系统,相比与jpress 的热度fork数量要少一些 ...

  2. 基于开源博客系统(jpress)搭建网站

    基于开源博客系统(jpress)搭建网站 JPress 使用 Java8 开发,基于流行的JFinal和Jboot框架. 目前JPress已经内置的文章和页面其实是两个模块,可以移除和新增其他模块,因 ...

  3. 26种基于PHP的开源博客系统

    26种基于PHP的开源博客系统 来源:本站原创 PHP学习笔记 以下列举的PHP开源Blog系统中,除了我们熟知的WordPress之外,大多都没有使用过,其中一些已经被淘汰,或者有人还在使用.除了做 ...

  4. Java程序员博客系统推荐!我调研了100来个 Java 开源博客系统,发现这 5 个最好用!

    大家好!我是 Guide 哥,Java 后端开发.一个会一点前端,喜欢烹饪的自由少年. 最近想倒腾一下博客,看了很多现成的比较成熟的开源博客系统,自己也简单从下面几个维度总结对比了一下: star数量 ...

  5. Java 开源博客——B3log Solo 0.6.6 正式版公布了!

    Java 开源博客 -- B3log Solo 0.6.6 正式版公布了!欢迎大家下载. 该版本号引入了数据库连接池:Druid. 另外,欢迎观摩 B3log 团队的新项目:Noty,也很欢迎大家參与 ...

  6. Java 开源博客——B3log Solo 0.6.7 正式版公布了!

    Java 开源博客 -- B3log Solo 0.6.7 正式版公布了!欢迎大家下载. 另外,欢迎观摩 B3log 团队的新项目:Wide,也很欢迎大家參与进来 :-) 特性 基于标签的文章分类 P ...

  7. Java 开源博客——B3log Solo 0.6.1 正式版发布了!

    Java 开源博客 —— B3LOG Solo 0.6.1 正式版发布了!欢迎大家下载. 该版本主要是改善细节体验,并加入了一款 Metro 风格的皮肤. 特性 基于标签的文章分类 Ping Goog ...

  8. Java 开源博客 Solo 1.8.0 发布 - 改进文件上传

    本次发布主要是更新了编辑器,使其更好地支持文件上传.(1.8.0 版本变更记录请看这里) 我们的 Markdown 编辑器: 另外,我们对 HTTPS 的支持也更完善了,欢迎大家试用! 简介 Solo ...

  9. Java开源博客My-Blog之mysql容器重复初始化的严重bug修复过程

    写在前面的话 <Docker+SpringBoot+Mybatis+thymeleaf的Java博客系统开源啦> <Java开源博客My-Blog之docker容器组件化修改> ...

  10. Java 开源博客 —— Solo 0.6.8 正式版发布了!

    Java 开源博客 -- Solo 0.6.8 正式版发布了,欢迎大家下载.另外,欢迎观摩我们的另一个产品,在线 Golang IDE--Wide! 特性 基于标签的文章分类 博客/标签 Atom/R ...

随机推荐

  1. 编译android 4.4.2

    1.获取Android源码 (1)下载repo 在用户目录下创建一个bin文件夹来存放repo,并把该路径设置到环境变量中 mkdir ~/bin PATH=~/bin:$PATH 下载repo脚本 ...

  2. C++ 虚函数,纯虚函数的一些问题

    #include <iostream> using namespace std; #define cendl cout << endl; class AA{//这是一个纯虚函数 ...

  3. iOS xib中TableView创建的2种模式

    在xcode 5.0中 用xib编辑tableview有2种模式,见下图 其中,dynamic prototype 动态原型 表示tableview会询问它指定的 data source获取数据,如果 ...

  4. H5笔记——locaStorage和sessionStorage本地存储的一些坑

    当使用window.localStorage或者window.sessionStorage 存储json数据时需要将json数据用JSON.stringify(data)转换成json字符串再存储在本 ...

  5. 使用hwclock同步RTC(硬件时钟)和OS Clock(操作系统时钟)

    Linux下面有个命令叫做hwclock,其主要的功能是用来在RTC和操作系统之间进行时钟同步.既可以将RTC的时钟同步到操作系统,也可以在通过hwclock将当前系统时间.Internet时间.本地 ...

  6. MyEclipse从数据库表反向生成实体类之Hibernate方式(反向工程)

    一.打开Myeclipse Database Explorer 二.新建[New..] 三.选择数据库,添加驱动 四.测试连接 五.选中数据库中的表单击右键选择[Hibernate Rever..] ...

  7. 腾讯QQAndroid API调用实例(QQ分享无需登录)

    腾讯QQAndroid API调用实例(QQ分享无需登录)   主要分为两个步骤: 配置Androidmanifest.xml 修改activity里边代码 具体修改如下:   1.Activity代 ...

  8. WORD分栏后左右都能编辑

    操作如下: 如果是office的请参照:https://zhidao.baidu.com/question/403577041.html 如果是WPS:1.点击插入,有一个分页,点击之后下面有一个可选 ...

  9. 深入理解koa中的co源码

    阅读目录 一:理解Generator 二:理解js函数柯里化 三:理解Thunk函数 四:理解CO源码 回到顶部 一:理解Generator 在看co源码之前,我们先来理解下Generator函数.G ...

  10. Redis和Memcached对比【转】

    Redis和Memcached对比 这两年 Redis火得可以,Redis也常常被当作 Memcached的挑战者被提到桌面上来.关于Redis与Memcached的比较更是比比皆是.然而,Redis ...