han-1034683568

Vue 3 出来之后,很多人有如下想法,“又要学新东西啦”、“我学不动了”等等。

但是事物总有它的两面性,前端知识更新的很快,利好勤奋好学的同学。计算机行业的迭代速度很快,前端在计算机领域里,算是前浪被拍在沙滩上比较快的。

我很羡慕还在学校的同学,因为现在的大学生,信息的获取量比我当年在大学的时候大得多,我希望你们能珍惜这样的机会,好好的学习新知识,希望你们进入社会不要被毒打。

学习一门新的技术,我认为最好的方式就是通过 Demo 去制造使用场景,通览一遍 API,需要做到什么程度呢?

大概就是什么场景用什么 API 都能了如于心,再大白话一点就是可以将之前用 Vue2.x 写的代码,用 Vue 3 无差别重构一遍。

构建 Vue3.0 的三种方式

就目前而言,构建 Vue 3 的项目有三种方式。

1、命令行工具 (CLI)

对于 Vue 3,你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli@next。要升级,你应该需要全局重新安装最新版本的 @vue/cli

yarn global add @vue/cli@next
# OR
npm install -g @vue/cli@next

2、Vite

Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方法,它允许快速提供代码。

通过在终端中运行以下命令,可以使用 Vite 快速设置 Vue 项目。

使用 npm:

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

3、Webpack

很早的时候,Vue-CLI 还没支持 Vue 3 项目的创建,Vue 团队制作了一个 Webpack 的项目配置放在 Github,可以直接克隆下来使用。

git clone https://github.com/vuejs/vue-next-webpack-preview.git demov3
cd demov3
npm install
npm run dev

不推荐使用这种方式,现在都有上面两种了~~

(以前看星星看月亮的时候叫人家“小甜甜”,现在新人胜旧人,叫人家“牛夫人”)

代码实践

我们选择比较新鲜的 Vite 去构建项目,要玩就玩最潮的。我的本地 Node 版本是 v12.6.0,尽量保持一致。

构建项目

npm init vite-app todo-v3
cd todo-v3
npm install // 建议使用淘宝镜像 cnpm install
npm run dev

启动之后如下所示,代表成功了:

入口页面

首先映入眼帘的是 main.js 的变化:

// Vue 3.0
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')
// Vue 2.x
import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

第一段代码是 Vue 3 的创建 Vue 实例形式,通过 createApp 的形式,你别说,和 React 真的挺像的

相关文章: