从 Vue2 到 Vue3 你需要知道这些

前言#

Vue3 必然是未来趋势，早学早超生

概念入门#

vue.js github库升级为 vue-next
element-ui github 库升级为 element-plus

vue3 官网地址https://v3.cn.vuejs.org/guide/composition-api-introduction.html

构建项目工具由 webpack 升级为 Vite

Vite 使用的 node 版本要高于12.0.0

vuex、vue-route 版本要高于 4.0

Vite 构建的 vue3 项目，配置文件名称是 vite.config.js, 该文件在 npm install 后会自动创建

上手使用#

1. 使用 Vite 初始化一个vue3.0项目#

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpx create-vite my-vue-app --template vue

2. 初始化项目#

cd my-vue-app
npm install
npm run dev

3. 引入各种组件#

# 引入 vue-router4 最新版本  https://next.router.vuejs.org/zh/installation.html
npm install vue-router@4

# 引入 vuex4 最新版本  https://next.vuex.vuejs.org/zh/installation.html
npm install vuex@next --save

# 引入 element-plus 最新版本 https://element-plus.gitee.io/#/zh-CN/component/installation
npm install element-plus --save