前言
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