vue3.0 上手体验

vue3.0 beta 版本已经发布有一阵子了,是时候上手体验一波了~

注意,本文所有演示都是基于 vue3.0 beta 版本,不保证后续正式版 api 不改动。等官方文档出来后,以官网为准。

环境搭建

直接使用脚手架,如果本地没有安装的可以执行脚手架安装命令:

npm install -g @vue/cli

如果本地安装过的,可以尝试更新一下:

npm update -g @vue/cli

测试 vue-cli 版本:

vue -V
@vue/cli 4.4.1

接下来创建一个vue项目:

vue create vue3-demo

在出现的命令交互窗口选择 Manually select features :

Vue CLI v4.4.1
? Please pick a preset:
 常用配置 (router, vuex, sass, babel, eslint)
 sass (router, vuex, sass, babel, eslint)
 test (less, babel, eslint)
 default (babel, eslint)
❯ Manually select features

随后勾选以下选项,一般开发商业项目都需要这些:

Vue CLI v4.4.1
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

回车后根据自己的习惯选择好,就开始创建项目。注意这时候还是 vue2 的项目环境,接下来就是升级为 vue3 的运行环境。

升级为 vue3.0 项目

vue-cli 还没有直接支持 vue3.0,需要依赖插件升级,输入指令:

cd vue3-demo
vue add vue-next

执行完上述命令后,会自动安装 vue-cli-plugin-vue-next 插件,它会将项目升级为 vue3.0 的依赖环境,包括 vue-router 和 vuex 都会升级为 4.x 的版本。

最新版 vue-cli 可以直接创建 vue3 项目了(2020.09更新)

今天将 vue-cli 更新到了 4.5.4 版本,发现可以直接创建 vue3 项目了。使用 vue create vue3-demo 命令创建一个测试项目,会出现以下选项:

vue3.0 上手体验

 可以直接选择默认的 vue3 配置,也可以选择最后一项来手动配置,这里演示手动配置,选择 Manually select features,回车:

vue3.0 上手体验

根据需要选择,注意第一项表明了可以选择 vue 版本,选完后回车:

vue3.0 上手体验

这里选择 vue 的版本,直接选择 3.x 回车即可。这样就能创建一个基于 vue3 搭建的项目了。

vue3.0 特性体验

按照上面步骤升级为 vue3.0 项目后,会自动帮我们将一些文件改成 vue3.0 的写法。

创建vue实例

vue3 创建vue实例不需要使用 new 的方式了,来看 src/main.js 文件:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

现在是函数式风格来创建vue实例,还记得 vue2 是怎么创建实例的吗,对比下:

// Vue2 创建实例

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

new Vue({
 el: '#app',
 router,
 store,
 render: h => h(App)
})

你喜欢哪一种方式?我比较喜欢vue3.0的函数式风格。

路由

看看路由配置文件:src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
 {
 path: '/',
 name: 'Home',
 component: Home
 },
 {
 path: '/about',
 name: 'About',
 // route level code-splitting
 // this generates a separate chunk (about.[hash].js) for this route
 // which is lazy-loaded when the route is visited.
 component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
 }
]

const router = createRouter({
 history: createWebHistory(process.env.BASE_URL),
 routes
})

export default router

这是升级后路由配置方法,可以看到与 vue2 版本有很大的区别。现在创建路由实例需要手动引入 createRouter 方法,创建 history 模式路由也需要手动引入 createWebHistory 方法,这达到 Tree-Shaking 的目的,即不会把所有的 api 都打包进来,只会打包你用到的 api,vue3 将都会使用这种形式。 

vue3.0 上手体验

扫一扫手机访问