做个开源博客学习Vite2 + Vue3 (一)搭建项目

简介: 不会 webpack,遇到报错就一头雾水,完全不知道怎么办,而且体积还大速度还慢。 所以尤雨溪做了 vite 后就很向往,只是知道自己水平有限还是等大佬先趟趟坑,等差不多了在跳。

前言



不会 webpack,遇到报错就一头雾水,完全不知道怎么办,而且体积还大速度还慢。 所以尤雨溪做了 vite 后就很向往,只是知道自己水平有限还是等大佬先趟趟坑,等差不多了在跳。


现在vite2发布了,官网也有了,网上也能找到大佬写的相关资料,时机应该成熟可以往里跳了。 所以打算做个开源博客,一边做这个小项目,一边学习 vite2 和vue3,还有相关知识。


为啥选择博客呢?因为功能相对比较简单,不考虑皮肤等功能的话。 而且大家都比较熟悉,没写过博客总看过博文吧。 所以呢,业务需求方面一说大家也都懂,不用做过多的解释。


建立项目



因为GitHub总是连不上,速度还慢,所以选择了gitee。先在gitee上面建立一个项目:


gitee.com/naturefw/vu…


然后clone到本地,接下来就是用vite2建立项目了。


按照官网(cn.vitejs.dev/guide/#scaf…


yarn create @vitejs/app
复制代码


这里建议使用 yarn,因为可以更快一些。


  • 设置项目名称:


image.png


输入你喜欢的名称即可,这里用vue3-blog。


  • 选择模板


image.png


我也不知道都是啥,反正选 vue 就对了,如果你喜欢ts的话,那么可以选择vue-ts。


  • 初始化


进入项目文件夹,执行 yarn 安装需要的资源包。最后执行 yarn dev 就可以运行项目了。


image.png


  • 对比项目体积


vite2建立的项:


image.png


比vue-cli建立的项目小多了,不信可以对比一下:


image.png


  • 运行项目


如果是Windows环境的话,可以做个bat文件,内容是 yarn dev ,然后保存为run.bat,注意扩展名。然后双击文件即可运行,比较方便。


image.png


再也不需要漫长的等待了。


  • 看看效果


image.png


还是一贯的简洁。


安装路由



按照官网(next.vuex.vuejs.org/installatio…


yarn add vuex@next --save
复制代码


还是使用 yarn 的方式来安装。


image.png


  • 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
复制代码


image.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')
复制代码


具体使用方式在后面使用的时候在介绍。


  • 状态管理的源码


安装 element-plus



按照官网(element-plus.gitee.io/#/zh-CN/com… element-plus


yarn add element-plus --save
复制代码


image.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



按照官网(ckang1229.gitee.io/vue-markdow… v-md-editor,用于编辑博文。


yarn add @kangc/v-md-editor@next
复制代码


注意:一定要带上@next,否则在vue3里面会报错,别问我是怎么知道了,还不是没仔细看文档踩的坑。


image.png


好了项目的架子搭建起来了,后面就是具体的实现方式。 下篇更精彩。 码字不易,感谢点赞。


相关文章
|
9天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
6天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
19 7
|
7天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
27 3
|
6天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
24 1
|
6天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
25 1
|
9天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
9天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
9天前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
10天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
3天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发