1. 为什么学vue3
Vue3现状:
- vue-next 2020年09月18日,正式发布vue3.0版本。但是由于刚发布周边生态不支持,大多数开发者处于观望。
- 现在主流组件库都已经发布了支持vue3.0的版本,其他生态也在不断地完善中,这是趋势。
- element-plus 基于 Vue 3.0 的桌面端组件库
- vant vant3.0版本,有赞前端团队开源移动端组件库
- ant-design-vue Ant Design Vue 2.0版本,社区根据蚂蚁 ant design 开发
Vue3优点:
- 最火框架,它是国内最火的前端框架之一,官方文档 中文文档
- 性能提升,运行速度事vue2.x的1.5倍左右
- 体积更小,按需编译体积比vue2.x要更小
- 类型推断,更好的支持Ts(typescript)这个也是趋势
- 高级给予,暴露了更底层的API和提供更先进的内置组件
- ★组合API (composition api) ,能够更好的组织逻辑,封装逻辑,复用逻辑
Vue3展望:
- 这是趋势,越来越多的企业将来肯定会升级到Vue3.0
- 大型项目,由于对Ts的友好越来越多大型项目可以用Vue3.0
2. vite基本使用
vite是什么:官方文档
- 它是一个更加轻量(热更新速度快,打包构建速度快)的vue项目脚手架工具。
- 相对于vue-cli它默认安装的插件非常少,随着开发过程依赖增多,需要自己额外配置。
- 所以: 在单纯学习vue3语法会使用它,后面做项目的时候我们还是使用vue-cli
vite基本使用:
- 创建项目
npm init vite-app 项目名称
或者yarn create vite-app 项目名称
- 切换到项目目录下 cd
项目名称
- 安装依赖
npm i
或者yarn
- 启动项目
npm run dev
或者yarn dev
总结: vite是什么?
- 使用vite创建项目学习vue3语法,使用vue-cli创建项目正式开发。
3. 创建vue应用
基本步骤:
- 在main.js中导入createApp函数
- 定义App.vue组件,导入main.js
- 使用createApp函数基于App.vue组件创建应用实例
- 挂载至index.html的#app容器
总结: 如何创建vue应用实例?
- 通过createApp创建应用实例--->扩展功能将来都是在app上进行。
4. 遇到的问题
4.1 Vue3+Vite项目启动报错警告
vue3 项目启动时报错如下,这个警告不会影响到项目的运行。太复杂,主要是版本兼容的问题,暂时选择忽略。
原因:
- 这个警告是由 Vue 在开发环境中的特定配置引起的,它提示你在 esm-bundler 版本的 Vue 中需要定义特定的编译时特性标志(compile-time feature flags)以获得更好的树状结构提示(better tree-shaking)。
解决方案:
① 查看 package.json 中你正在使用的打包工具。
- 打开项目根目录下的
package.json
文件,查看其中的dependencies
和devDependencies
。这通常可以告诉你正在使用的打包工具。- 如果看到
vite
,那么你使用的是 Vite。 - 如果看到
webpack
,那么你使用的是 Webpack。 - 如果看到
rollup
,那么你使用的是 Rollup。
- 如果看到
- 检查项目根目录下的文件:
- 如果你找到
vite.config.js
或vite.config.ts
文件,那么你使用的是 Vite。 - 如果你找到
webpack.config.js
文件,那么你使用的是 Webpack。 - 如果你找到
rollup.config.js
文件,那么你使用的是 Rollup。
- 如果你找到
检查启动和构建脚本:
在
package.json
文件中,查看scripts
部分。这可以告诉你项目是如何启动和构建的。
② 打包工具为 vite 时的解决方案。
步骤:
- 在项目根目录下创建一个名为
vite.config.js
的文件(如果还没有的话) - 添加以下内容到
vite.config.js
文件中:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
define: {
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
},
})
- 安装
@vitejs/plugin-vue
插件,在项目根目录下运行以下命令:
npm install @vitejs/plugin-vue --save-dev
- 若报错信息如下,则是
@vitejs/plugin-vue
的版本要求和当前使用的 Vite 版本不兼容。
- 卸载当前的vite版本,安装最新版本的 Vite 和
@vitejs/plugin-vue。
npm uninstall vite
npm install vite @vitejs/plugin-vue --save-dev
4.2 Vue.js Devtools 版本问题
- 问题:谷歌浏览器上,点击“Vue.js Devtools”,显示“Vue.js not detected”。
- 原因:当前的调试工具版本与当前的 vue 版本不兼容。
- 解决方案:下载新版本的调试工具。
不可取方案:打开 chrome 浏览器的管理扩展程序,进入 Chrome 应用商店直接下载。(需要翻墙,一般进不去)
国内 Vue.js devtools 安装教程
- 浏览器直接搜索极简插件,点击极简插件官网。搜索工具,点击推荐下载。
- 解压安装包(.crx 后缀),拖动解压后的安装包到 chrome 浏览器的管理扩展程序页面进行安装。
5. 选项API和组合API
理解什么是选项API写法,什么是组合API写法。
① 什么是选项API写法:Options ApI
- 在vue2.x项目中使用的就是
选项API
写法- 代码风格:data选项写数据,methods选项写函数...,一个功能逻辑的代码分散。
- 优点:易于学习和使用,写代码的位置已经约定好
- 缺点:代码组织性差,相似的逻辑代码不便于复用,逻辑复杂代码多了不好阅读。
- 补充:虽然提供mixins用来封装逻辑,但是出现数据函数覆盖的概率很大,不好维护。
② 什么是组合API写法:Compositon API
- 在vue3.0项目中将会使用
组合API
写法- 代码风格:一个功能逻辑的代码组织在一起(包含数据,函数...)
- 优点:功能逻辑复杂繁多情况下,各个功能逻辑代码组织再一起,便于阅读和维护
- 缺点:需要有良好的代码组织能力和拆分逻辑能力,PS:大家没问题。
- 补充:为了能让大家较好的过渡到vue3.0的版本来,
也支持vue2.x选项API写法
总结:
- 知道选项API和组合API的写法区别,建议大家使用组合API在vue3.0项目中。
6. 组合API-setup函数
使用细节:
setup
是一个新的组件选项,作为组件中使用组合API的起点。- 从组件生命周期来看,它的执行在组件实例创建之前
vue2.x的beforeCreate
执行。 - 这就意味着在
setup
函数中this
还不是组件实例,this
此时是undefined
- 在模版中需要使用的数据和函数,需要在
setup
返回(return)。