4

VueConf 2021 抢先看,Evan You 和你聊聊 Vue 的未来

 3 years ago
source link: https://my.oschina.net/sl1673495/blog/5021999
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

本文首发公众号「前端从进阶到入院」,欢迎关注!

158 万周活跃用户(通过 devtools 插件来统计),940 万的月下载量。

Devtools:110 万 -> 158 万(+43.6%) NPM:620 万 -> 940 万(+51.6%)

Vue 3.0 One Piece

自那之后,Vue3 逐渐趋于稳定,继续探索用户体验。

Vue Router 4.0

已经稳定。

Vuex 4.0

已经稳定。

慢慢赶上了!

  • Nuxt 3
  • Vuetify
  • Quasar
  • Element Plus
  • Ant Design Vue

持续探索中:

  • 新的构建工具
  • 更棒的语法
  • IDE/TS 支持

Vite,不用说了,今年的明星项目。

  • 和 Vue-CLI 更加相似的体验
  • 基于 ESM 的 HMR 热更新
  • ESBuild 提供依赖预构建
  • Rollup 兼容的插件接口
  • 内置 SSR 支持
  • 更多更多……

可以扩展阅读笔者之前写的浅谈 Vite 2.0 原理,依赖预编译,插件机制是如何兼容 Rollup 的?

Vite 还是 Vue-CLI?

  • 短期内会共存
  • 长期会融合:Vite 的速度 + Vue-CLI 的全面度支持
  • Cypress 新版组件测试
  • @web/test-runner
  • Jest 集成进行中

看了下 @web/test-runner 的简介,非常全面的测试解决方案:

VitePress

基于 Vue3 + Vite 的静态站点生成器。

它的独特之处在于:

  • 利用 SPA 的开发体验来定制用户主题
  • 在 Markdown 里自由加入动态组件
  • 自动消除静态内容的“双重负载”

利用 VitePress 这个平台,探索未来 SSR/SSG 优化(Eat Your Own Dog Food)

  • 更积极的消除静态内容(甚至是主题组件)
  • 更高效的构建
  • 按需构建 + 边缘缓存

新的开发体验

利用编译器做更多事情:

  • script setup
  • style CSS 变量注入

script setup

  • RFC 地址
  • 在单文件组件中提供更符合用户体验的 Composition API
  • 提高运行时性能

style 变量注入

  • RFC 地址
  • 利用 v-bind() 在单文件组件的 style 中注入 JS 状态驱动的 CSS 变量
  • CSS-in-JS 的好处尽享,但避免了它的心智负担。

更好的 IDE/TS 支持

多个探索中的项目

  • Vetur
  • VueDX
  • Volar
  • 类型检查,语法提示和 SFC templates 的自动重构
  • 把这些努力整合成更推荐的链路
  • 提供 CLI 工具来利用 TS 校验 SFC
  • 基于 Volar 的新的官方 VSCode 插件,从 Vetur 和 VueDX 上汲取很多灵感。
  • 通过内部设计来支持其他编辑器,通过 LSP(Language Service Protocol)

我们在 Vue3 中放弃了 IE11。

笔者对这个 RFC 也进行了翻译:

Vue3 考虑彻底放弃 IE 浏览器

Vue 2.7 会成为坚持留守 IE11 人群的选择,它会提供更多的 Vue3 特性和 TS 支持。(估计在 2021 第三季度)

Vue3 的集成构建也要来了!

  • 估计在四月末
  • 可单独配置来兼容 v2

Vue3 会在 2021 二季度末尾,变成新的默认版本!

  • npm 的 lastest tag 会默认安装 Vue3
  • vuejs.org 官网会指向 Vue3 的文档

欢迎关注 ssh,前端潮流趋势、原创面试热点文章应有尽有。

记得关注后加我好友,我会不定期分享前端知识,行业信息。2021 陪你一起度过。

© 著作权归作者所有

portrait.gif
好像很牛逼,但我还在用vue2,感觉可以期待下Vite
昨天 17:52

其他人还在看

本来我是不想写的,但为了加深印象还是写一写吧。 ./config/index.js module.exports = { dev: {

// Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { //使用"/api"来代替"http://charon-satellite.com" target: 'http://xxx.cha...

页面展示: vue组件中分页代码: <div class="pagination"> <el-pagination @size-change="handleSizeChange" @current-change="hand...
1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点<html>字体的大小。所以不用px; 根字体:<html>字体的大小px; px:你就当成cm(厘米)这样的东西吧; 基准:750设计稿; 这是方案的基础理论,在这个基础上,我们还要搞明白,到底要干一件什么事情! 目标一 、手机适配:就是...
摘自:https://www.cnblogs.com/lzkwin/p/11867960.html 下面是我在开发大型 Vue 项目时的最佳实践。这些技巧将帮助你开发更高效、更易于维护和共享的代码。 今年做自由职业的时候,我有机会开发了一些大型 Vue 应用程序。我所说的这些项目,Vuex store 超过十个,包含大量的组件(有时候几百个)和视图页面。对我来说这...
创建导航页组件 在components目录下新建一个navigation目录,在Navi目录中新建一个名为Navi.vue的组件。至此我们的目录应该是如下图所示: 然后我们修改main.js文件,修改后的文件如下 import Vue from 'vue' //import App from './App' import router from './router' import ElementUI from 'element-ui'; import...
手动搭建vue项目 搭建vue前首先搭建webpack项目     首先你应当安装一下npm以及nodejs     安装完成后,进行如下操作: // 创建项目根目录 mkdir some_project_name // 切换到项目目录下 cd some_project_name // 初始化该项目 npm init -y // 下载并安装webpack相关包 npm install webpack webpack-cli w...
vue打包时使用不同的环境变量 需求 同一个项目通过打包使用不同的环境变量,目前的环境有三个: 一、本地------开发环境 二、线上------测试环境 三、线上------正式环境 我们都知道vue默认的打包都是生产模式,所以说打包后的都是线上的东西,现在我们解决一下如何通过不同命令的打包方式使用不同的环境变量。 安装cro...
Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新。基于这种特性,通过vue.js动态绑定class就变得非常简单。 1. 数据绑定 vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名,...
在vue.js 框架搭建好后,其vue-cli 自动构建的目录里面相关环境变量及其基本变量配置,如下代码所示: module.exports = { build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: ...
Vue.js笔记第二波,Class 与 Style 绑定,条件渲染,列表渲染 今天学了三个大的板块,学起来很快,但是整理笔记很浪费时间,后面把笔记补上,我的学习方法是先快速学习,然后整理笔记,充分消化,再学习新的,温故而知新。 Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是...

本来我是不想写的,但为了加深印象还是写一写吧。 ./config/index.js module.exports = { dev: {

// Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { //使用"/api"来代替"http://charon-satellite.com" target: 'http://xxx.cha...

页面展示: vue组件中分页代码: <div class="pagination"> <el-pagination @size-change="handleSizeChange" @current-change="hand...
1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点<html>字体的大小。所以不用px; 根字体:<html>字体的大小px; px:你就当成cm(厘米)这样的东西吧; 基准:750设计稿; 这是方案的基础理论,在这个基础上,我们还要搞明白,到底要干一件什么事情! 目标一 、手机适配:就是...
摘自:https://www.cnblogs.com/lzkwin/p/11867960.html 下面是我在开发大型 Vue 项目时的最佳实践。这些技巧将帮助你开发更高效、更易于维护和共享的代码。 今年做自由职业的时候,我有机会开发了一些大型 Vue 应用程序。我所说的这些项目,Vuex store 超过十个,包含大量的组件(有时候几百个)和视图页面。对我来说这...
创建导航页组件 在components目录下新建一个navigation目录,在Navi目录中新建一个名为Navi.vue的组件。至此我们的目录应该是如下图所示: 然后我们修改main.js文件,修改后的文件如下 import Vue from 'vue' //import App from './App' import router from './router' import ElementUI from 'element-ui'; import...
手动搭建vue项目 搭建vue前首先搭建webpack项目     首先你应当安装一下npm以及nodejs     安装完成后,进行如下操作: // 创建项目根目录 mkdir some_project_name // 切换到项目目录下 cd some_project_name // 初始化该项目 npm init -y // 下载并安装webpack相关包 npm install webpack webpack-cli w...
vue打包时使用不同的环境变量 需求 同一个项目通过打包使用不同的环境变量,目前的环境有三个: 一、本地------开发环境 二、线上------测试环境 三、线上------正式环境 我们都知道vue默认的打包都是生产模式,所以说打包后的都是线上的东西,现在我们解决一下如何通过不同命令的打包方式使用不同的环境变量。 安装cro...
Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新。基于这种特性,通过vue.js动态绑定class就变得非常简单。 1. 数据绑定 vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名,...
在vue.js 框架搭建好后,其vue-cli 自动构建的目录里面相关环境变量及其基本变量配置,如下代码所示: module.exports = { build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: ...
Vue.js笔记第二波,Class 与 Style 绑定,条件渲染,列表渲染 今天学了三个大的板块,学起来很快,但是整理笔记很浪费时间,后面把笔记补上,我的学习方法是先快速学习,然后整理笔记,充分消化,再学习新的,温故而知新。 Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK