vue3快速入门教程集合

曹え 5811 发布于：2023-12-28 03:23:36

vue3快速入门

首先看这个：3分钟学会vue3核心知识点：

https://www.bilibili.com/video/BV1gi4y1h75q/?spm_id_from=333.999.0.0

动手创建一个项目：

https://www.bilibili.com/video/BV1Pg4y1A7pn/?share_source=copy_web&vd_source=1ac984fddc1d7f13ff726153ec50718e

响应式变量

数组和对象的操作

Reactive 多层

shallowReactive 一层，只响应一级变量，二级的数据不响应

单个变量的响应式变量

ref

const n = ref(0)

n.value

操作ref数据的时候，要加上 value

学会Pinia状态管理：(快速搭建一个vue3项目脚手架，包含 router 和 pinia)

https://www.bilibili.com/video/BV1s94y1q79q/?share_source=copy_web&vd_source=1ac984fddc1d7f13ff726153ec50718e

步骤

第一步：安装脚手架

npm init vue@latest

第二步：了解页面结构

assets/ 静态文件图片等

components/ 自己组件

router/ 路由配置

stores/ 状态管理

views/ 页面管理

第三步：学习router

教程链接：https://www.h5.org.cn/edu-268

第四步：学习pinia

教程链接：https://www.h5.org.cn/edu-1425

第五步：安装vue3ui组件

推荐的vue3组件

pc版本

antui https://www.antdv.com/docs/vue/getting-started-cn

ElementPlus https://element-plus.org/zh-CN/guide/installation.html

移动端

vantui https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

nutui https://nutui.jd.com/h5/vue/4x/#/zh-CN/guide/start

第六步：自定义组件的全局引入

在main.js 中

// 全局引入导航
import Nav from './components/Nav.vue'
app.component('Nav', Nav)

示例

import { createApp } from 'vue'
import Antd from 'ant-design-vue';
import App from './App.vue'
import 'ant-design-vue/dist/reset.css';
import './style.css'

// 全局引入导航
import Nav from './components/Nav.vue'

// 引入路由
import router from "./router";

const app = createApp(App)
app.use(Antd)
app.use(router)
app.component('Nav', Nav)
app.mount("#app");