前端框架 Vue3框架使用总结(一) Vue框架的基础使用

Dragon Wu

已于 2022-11-19 18:06:22 修改

阅读量1.2k

点赞数

分类专栏：前端框架文章标签：前端框架前端 javascript vue.js vue

于 2022-11-19 18:05:08 首次发布

本文链接：https://blog.csdn.net/qq_50909707/article/details/127541225

版权

前端框架专栏收录该内容

25 篇文章 2 订阅

订阅专栏

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基础语法

指令名称	指令作用	备注
v-html	显示与解析HTML代码	等效与JS的innerHTML,<p v-html="'<h1>hello</h1>'"</p>标签h1不会直接显示而是编程h1标签
v-text	原封不动的展示	等效与JS的innerText
v-for	遍历与循环功能	遍历数字，字符串,对象,数组
v-bind	绑定属性	简单形式 :属性名=“值”
v-model	双向绑定,可配合修饰符使用	只支持input,select,textarea
v-show	显示与隐藏	隐藏只是样式:style=“display=none”
v-if	判断	v-if/v-else-if/v-else是一组
v-on	绑定事件	简写形式 @事件名=方法名()
v-once	数据只渲染一次，渲染后数据不会发生变化	<p v-once>{{msg}}</p>即使msg改变也不会再渲染

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中添加依赖并配置