目录

一、Vue3框架基础

1、创建项目

2、项目结构

3、Vue基础语法

4、组件之间通信

5、组合式api

二、VueRouter的基础使用

1、安装

2、使用案例

3、完整案例步骤

4、调优-路由懒加载

三、Vuex数据管理

1、实现案例

 2、更改store状态，同步操作

3、store中的计算属性

4、redux里的异步操作Action

5、模块化管理

四、网络请求

Vue3官方文档：Vue.js - 渐进式 JavaScript 框架 | Vue.js

基础部分见官方文档

一、Vue3框架基础

1、创建项目

安装yarn

npm install -g yarn//检验是否安装成功yarn -v

yarn配置taobao镜像源

yarn config set registry https://registry.npm.taobao.org

安装vue-cli脚手架

yarn global add @vue/cli// 检查vue是否被安装vue -V

创建vue3项目,注意这里项目名不能有大写字母

vue create my-project(你的项目名)

启动项目

yarn run serve

2、项目结构

3、Vue基础语法

4、组件之间通信

props父组件向子组件传值，见：Props | Vue.js

事件传值，子组件向父组件传值，见：组件事件 | Vue.js

跨级通信，见：依赖注入 | Vue.js

5、组合式api

使用组合式api的风格开发更有利于大型项目的维护

组合式 API：setup() | Vue.js

二、VueRouter的基础使用

官方文档：介绍 | Vue Router

1、安装

安装 | Vue Router

2、使用案例

基本使用案例官方：入门 | Vue Router

// 1. 定义路由组件.
// 也可以从其他文件导入
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
 
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]
 
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})
 
// 5. 创建并挂载根实例
const app = Vue.createApp({})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)
 
app.mount('#app')
 
// 现在，应用已经启动了！

3、完整案例步骤

（1）创建src/router/index.js文件用于存放路由表

// 1. 定义路由组件.
// 也可以从其他文件导入
import HomePage from "../views/HomePage.vue"
import AboutPage from "../views/AboutPage.vue"
 
import { createRouter,createWebHistory } from "vue-router"
 
 
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
    { path: '/', component: HomePage },
    { path: '/about', component: AboutPage },
]
 
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHistory(),
    routes, // `routes: routes` 的缩写
})
 
export default router

(2)main.js中导入依赖，并配置使用

（3）配置跳转使用

<template>
  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <!--使用 router-link 组件进行导航 -->
      <!--通过传递 `to` 来指定链接 -->
      <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
      <router-link to="/">Go to Home</router-link>
      <router-link to="/about">Go to About</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

实现路由跳转，更多路由熟悉参考官网文档。

4、调优-路由懒加载

路由懒加载 | Vue Router

三、Vuex数据管理

官网案例: 开始 | Vuex

安装依赖：安装 | Vuex

1、实现案例

（1）新建src/store/index.js文件

import { createStore } from 'vuex'
 
// 创建一个新的 store 实例
const store = createStore({
    state () {
        return {
            count: 0
        }
    },
    mutations: {
        increment (state) {
            state.count++
        }
    }
})
 
export default store

（2）main.js中添加依赖并配置

使用

 2、更改store状态，同步操作

参考：Mutation | Vuex

3、store中的计算属性

参考：Getter | Vuex

4、redux里的异步操作Action

参考：Action | Vuex

5、模块化管理

使用时最好开启命名空间

参考：Module | Vuex

四、网络请求

见我的博客：前端框架 网络请求 Fetch Axios_Dragon Wu的博客-CSDN博客