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");


第七步:学习全局引入

链接:https://www.h5.org.cn/edu-1421

第八步:学习接口联调

觉得有用请点个赞吧!
1 519