Vue3——从0到1的搭建过程

vue3.0生命周期和钩子函数

项目搭建

既然是学习Vue3，那么首先应该需要的是如何初始化项目，在这里提供了两种方式供大家参考

• 方式一：vue-cli脚手架初始化Vue3项目

官方文档：https://cli.vuejs.org/zh/guid...

//    查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
//    安装或者升级你的@vue/cli
npm install -g @vue/cli
//     创建
vue create vue_test
// 启动
cd vue_test
npm run serve

• 方式二：vite初始化Vue3项目

vite官网：https://vitejs.cn/

//     创建工程
npm init vite-app <project-name>
//    进入工程目录
cd <project-name>
//     安装依赖
npm install
//    运行
npm run dev

项目目录结构分析

这里的项目目录结构分析主要是main.js文件

• Vue2里面的main.js

  new Vue({
  el: '#app',
  components: {},
  template: ''
  });

• Vue3里面的main.js

  import { createApp } from 'vue'
  import App from './App.vue'
  createApp(App).mount('#app')

  在Vue2里面，通过new Vue({})构造函数创建应用实例对象，而Vue3引入的不再是Vue的构造函数，引入的是一个名为createApp的工厂函数创建应用实例对象。

Composition API

setup

• 理解：Vue3.0中一个新的配置项，值为一个函数
• setup是所有Composition API(组合式API)的入口
• 组件中所用到的数据、方法等等，均要配置在setup里面

• setup函数的两种返回值

  • 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用
  • 若返回一个渲染函数，则可以自定义渲染内容

• setup的执行时机

  • 在beforeCreate之前执行一次，此时this为undefined

• setup的参数

  props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性

  context：上下文对象

  • attrs：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs
  • slots：收到的插槽内容，相当于this.$slots
  • emit：分发自定义事件的函数，相当于this.$emit

注意事项：

• 尽量不要与Vue2x的配置使用

  • Vue2x的配置(data、methods、computed)均可以访问到setup中的属性、方法
  • setup中不能访问Vue2x的配置(data、methods、computed)
  • 如果data里面的属性和setup里面的属性有重名，则setup优先
• setup不能是一个async函数，因为返回值不再是return的对象，而是Promise,模板看不到return对象中的属性，但是后期也可以返回一个Promise实例，需要Suspense和异步组件的配合。
• setup里面定义的属性和方法均可以在配置项里面使用(methods、computed、watch等)，而配置项里面定义的属性和方法无法在setup里面调用
• 如果setup里面的属性和data里面的属性有重名，则setup里面的属性优先

Vue3xUI组件库

Element-plus

• 仓库地址：https://github.com/element-pl...
• 文档地址：https://element-plus.gitee.io...

• 开源项目

  • Vue 3.0 + Vite 2.0 + Vue-Router 4.0 + Element-Plus + Echarts 5.0 + Axios 开发的后台管理系统：https://github.com/newbee-ltd...
  • Vue3.0+TypeScript+NodeJS+MySql编写的一套后台管理系统：https://github.com/xiaoxian52...

Ant Design of Vue

• 仓库地址：https://github.com/vueCompone...
• 文档地址：https://antdv.com/docs/vue/in...

• 开源项目

  • AntdV后台管理系统：https://github.com/iczer/vue-...
  • vue3.x + ant-design-vue（beta 版本，免费商用，支持 PC、平板、手机）：https://github.com/chuzhixin/...
  • 基于 Vue3.0 + Vite + Ant Design Vue：https://github.com/lirongtong...

Vant

• 仓库地址：https://github.com/youzan/vant
• 文档地址：https://vant-contrib.gitee.io...

• 开源项目

  • newbee-mall Vue3 版本：https://github.com/newbee-ltd...
  • 高仿微信笔记本：https://github.com/Nick930826...
  • 仿京东淘宝电商：https://github.com/geekskai/v...

NutUI 3

• 仓库地址：https://github.com/jdf2e/nutui

• 文档地址：https://nutui.jd.com/#/index