手把手教学 如何快速搭建一个vue3开发框架
之前写过一篇vue3框架的博客,但需要自己搭配路由,vuex,以及eslint等等,今天用最简单的方式,搭建一个vue3全家桶框架。全局安装最近版本的 vue/clihttps://v3.cn.vuejs.org/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-cliyarn global add @vue
vue3 介绍
Vue.js 3 是 Vue.js 框架的下一个主要版本,是 Vue.js 2 的继任者。Vue.js 3 引入了一些重大改进和新特性,旨在提高性能、可维护性和开发体验。以下是一些 Vue.js 3 的重要特点和改进:
1. Composition API(组合式 API): Composition API 是 Vue.js 3 中引入的一种新的 API 风格,它允许开发者更灵活地组织和复用组件逻辑。相比 Vue 2 的 Options API,Composition API 更容易维护和测试,尤其适用于大型和复杂的应用。
<script setup>
import { ref, computed, watch } from 'vue'
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
watch(count, (newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}`)
})
</script>
2. Teleport(传送门): Vue.js 3 引入了 Teleport 组件,允许你将内容渲染到 DOM 中的其他位置,这对于实现模态框、下拉菜单等功能非常有用。Teleport 可以帮助你更好地控制组件的渲染位置。
<template>
<Teleport to="body">
<div class="modal">
<!-- Modal content -->
</div>
</Teleport>
</template>
3. Vue 3 的响应式系统: Vue 3 的响应式系统经过了全面优化,性能得到了显著提升。它引入了 Proxy 对象作为底层实现,使得 Vue 更快速和高效地追踪状态变化。
4. Fragment 和 Portals: Vue 3 支持使用片段(Fragment)来返回多个根元素,这样可以更灵活地组织组件的结构。此外,Portals 允许你在 Vue 组件之外渲染内容,比如在全局级别渲染通知或弹出窗口。
5. Suspense: Vue 3 引入了 Suspense 特性,可以更容易地处理异步数据加载和组件懒加载。这使得你可以更好地管理数据加载和页面加载状态。
6. 更好的 TypeScript 支持: Vue 3 提供了更完善的 TypeScript 类型支持,包括更强大的类型推断、支持定义组件 API、自动生成 TypeScript 类型等。
7. 更小的体积和更快的渲染性能: Vue 3 的代码体积更小,性能更高,包括更好的树摇动态性能、更少的运行时开销等。
8. Vue CLI 4: Vue CLI 4 是适用于 Vue.js 3 的官方脚手架工具,它提供了创建、开发和构建 Vue.js 3 项目的一套现代工具和配置。
这些是 Vue.js 3 的一些主要特点和改进。Vue 3 的目标是提供更好的开发体验和更好的性能,同时保持对 Vue 2 的兼容性,以便现有项目可以逐渐升级到新版本。如果你已经熟悉 Vue.js 2,学习和使用 Vue.js 3 应该会相对容易,并且带来更多的好处。如果你是新手,也可以直接学习 Vue.js 3,以获得更先进的特性和工具。
我之前写过一篇vue3框架的博客,但需要自己搭配路由,vuex,以及eslint等等,今天用最简单的方式,搭建一个vue3全家桶框架。
全局安装最近版本的 vue/cli
https://v3.cn.vuejs.org/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-cli
yarn global add @vue/cli
# 或
npm install -g @vue/cli
选好一个文件夹,在地址栏输入cmd,进入命令行模式
输入 vue create <项目名称>
接下来依次选择
Manually select features
从上到下依次
Babel 很重要,涉及到项目的代码兼容性配置,建议勾选
typescript 你如果已经学会了ts就勾选,如果还没学会就不用
PWA(Progressive WEB APP)这个渐进式网络应用,涉及桌面添加图标,以及离线应用等等,一般用不上
router 很重要,除非你的项目只有一个页面
vuex 很重要 数据管理中心,项目有公用数据基本都得使用
css pre-precessors 是否使用样式预编译器 ,less,sass ,建议勾选
linter/Formatter 涉及eslint检测和eslint标准的选择,为了让整个项目的代码风格保持一致,建议勾选
unit testing 单元测试
e2e testing 端到端的测试,极少有公司会使用
选择3.x
是否允许对class和style绑定数据,推荐允许,这样做将更加自由,vue官网的介绍如下
https://cn.vuejs.org/v2/guide/class-and-style.html
使用Babel做转义, 与TypeScript一起用于自动检测,推荐使用
路由模式, 是否选择history模式,路由模式分为history和hash模式两种,根据项目特点进行选择吧
这里有三种样式预编译,选一种自己会的吧,不知道怎么选推荐选择less
选择eslint的规范,可以根据项目的实际情况进行选择
选择保存的时候就检测
将配置文件放在哪儿? 一般来说都是在package.json文件夹中
是否保存上面的配置,再次确认,如果你配错了,就选择no
剩下的就按回车,等待项目的搭建
通过yarn serve 或者 npm run serve 就可以启动整个项目
为了方便我们开发,开发规范是必不可少的,可以使用prettier - code formatter
https://blog.csdn.net/glorydx/article/details/107183884
更多推荐
所有评论(0)