Vue3快速上手

已于 2023-11-25 20:24:28 修改
阅读量635 收藏
点赞数 1
分类专栏： 前端 框架学习 文章标签： vue 前端框架 elementui javascript
于 2023-06-13 00:28:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44915801/article/details/131179472
版权

  • 提供了一套声明式的、组件化的编程模型帮助你高效地开发用户界面

  • 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。

    响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

	vue create 项目名
	vue ui

单页 Web 应用（single page web application，SPA）

渐进式 Web 应用（PWA）

PWA（Progressive Web Apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。这组文档和指南告诉您有关 PWA 的所有信息。
来自 https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps

单文件组件SFC

项目结构

src下新建文件夹，除components组件文件夹外，可以文件夹下只有一个index.js，通过ES6语法的export向外暴露提供的对象，然后在main.js中通过import走相对路径获取。

  • store
    • modules目录
      • 各类模块需要的js文件
    • index.js及其他
  • src
    • api 该目录下用axios发请求
    • assets
    • router
    • views 视图组件
    • components 功能型组件（在视图内复用?）
    • store vuex?Pinia用store管理状态（全局数据，基于localstorage等）;
      • modules
        • …
      • index.js
      • …

CSS

在main.js中引入

import '@/assets/styles/index.scss' // global css

组件

生命周期

setup

  • setup属性created定义的函数还需要调用不?

路由

:to=“{ path: tag.path, query: tag.query, fullPath: tag.fullPath }”

在router文件夹下的index.js中import页面并配置路由

引入组件/页面：import，如果组件文件夹有index.vue就可省略具体文件名，写在文件夹级别就可以。

所有路由嵌套都在pages文件夹下的layout页面？

示例中的自定义对象：

  • constantRoutes: 用于配置路由列表
  • router： 用于被其他js文件引用，通过Vue3的createRouter方法
import { createWebHistory, createRouter } from 'vue-router'
import Layout from '@/layout'

/**
 * Note: 路由配置项
 *
 * hidden: true                     // 当设置 true 的时候该路由不会再侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
 * alwaysShow: true                 // 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
 *                                  // 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面
 *                                  // 若你想不管路由下面的 children 声明的个数都显示你的根路由
 *                                  // 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
 * redirect: noRedirect             // 当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
 * name:'router-name'               // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题。也可以在其他路由路径的redirect中直接使用'router-name' 
 * query: '{"id": 1, "name": "ry"}' // 访问路由的默认传递参数
 * meta : {
    noCache: true                   // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
    title: 'title'                  // 设置该路由在侧边栏和面包屑中展示的名字
    icon: 'svg-name'                // 设置该路由的图标，对应路径src/assets/icons/svg
    breadcrumb: false               // 如果设置为false，则不会在breadcrumb面包屑中显示
    activeMenu: '/system/user'      // 当路由设置了该属性，则会高亮相对应的侧边栏。
    name？ 用于匹配规则 
    requireAuth?
  }
 */

// 公共路由列表
export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {			//路由开头不加/也行
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/index.vue')
      }
    ]
  },
    {
    path: '',
    component: Layout,
    redirect: 'index',
    children: [
      {
        path: 'index',
        component: () => import('@/views/index'),
        name: 'Index',
        meta: { title: '首页', icon: 'dashboard', affix: true }
      }
    ]
  },
  {
    path: '/user',
    component: Layout,
    hidden: true,
    redirect: 'noredirect',
    children: [
      {
        path: 'profile',
        component: () => import('@/views/system/user/profile/index'),
        name: 'Profile',
        meta: { title: '个人中心', icon: 'user' }
      }
    ]
  }
];

// 动态路由，基于用户权限动态去加载
export const dynamicRoutes = [
  {
    path: '/system/user-auth',
    component: Layout,
    hidden: true,
    permissions: ['system:user:edit'],
    children: [
      {
        path: 'role/:userId(\\d+)',
        component: () => import('@/views/system/user/authRole'),
        name: 'AuthRole',
        meta: { title: '分配角色', activeMenu: '/system/user' }
      }
    ]
  },
  {
    path: '/system/role-auth',
    component: Layout,
    hidden: true,
    permissions: ['system:role:edit'],
    children: [
      {
        path: 'user/:roleId(\\d+)',
        component: () => import('@/views/system/role/authUser'),
        name: 'AuthUser',
        meta: { title: '分配用户', activeMenu: '/system/role' }
      }
    ]
  },
   {
    path: "/:pathMatch(.*)*",
    component: () => import('@/views/error/404'),
    hidden: true
  },
  {
    path: '/system/dict-data',
    component: Layout,
    hidden: true,
    permissions: ['system:dict:list'],
    children: [
      {
        path: 'index/:dictId(\\d+)',
        component: () => import('@/views/system/dict/data'),
        name: 'Data',
        meta: { title: '字典数据', activeMenu: '/system/dict' }
      }
    ]
  },
  {
    path: '/monitor/job-log',
    component: Layout,
    hidden: true,
    permissions: ['monitor:job:list'],
    children: [
      {
        path: 'index',
        component: () => import('@/views/monitor/job/log'),
        name: 'JobLog',
        meta: { title: '调度日志', activeMenu: '/monitor/job' }
      }
    ]
  },
  {
    path: '/tool/gen-edit',
    component: Layout,
    hidden: true,
    permissions: ['tool:gen:edit'],
    children: [
      {
        path: 'index/:tableId(\\d+)',
        component: () => import('@/views/tool/gen/editTable'),
        name: 'GenEdit',
        meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
      }
    ]
  }
]

// 防止连续点击多次路由报错
let routerPush = Router.prototype.push;
Router.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(err => err)
}


const router = createRouter({
  history: createWebHistory(),//？
  routes: constantRoutes,
  scrollBehavior(to, from, savedPosition) {//？
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
});

export default router;

cloud版本没有permission

外链示例

{
  path: 'http://ruoyi.vip',
  meta: { title: '若依官网', icon : "guide" }
}

引入组件的方式：在开头引入，或者在需要的地方用函数表达式引入

  • 是import方法的返回值？

在组件中用<router-view>定义路由显示的位置。App.vue中就有<router-view>

默认路由为路由列表中的第一个路由。（ruoyi中默认为主页然后没前端检测没token被拦截跳转）

静态路由

代表那些不需要动态判断权限的路由，如登录页、404、等通用页面，在@/router/index.js (opens new window)配置对应的公共路由。

动态路由

代表那些需要根据用户动态判断权限并通过addRoutes动态添加的页面，在@/store/modules/permission.js (opens new window)加载后端接口路由配置。

  • index.vue干嘛的？

可复用 & 组合是什么意思？难道说不是组件而是所有的可复用？框架允许复用的东西？

ref 有三种用法：
　　1、ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素

2、ref 加在子组件上，用this. r e f s . （ r e f 值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接 t h i s . refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this. refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.refs.（ref值）.方法（） 就可以使用了。
ref值是指html标签中设置属性ref的值。

可以这么理解：vue3中某一对象的$refs属性就是包含所有ref的对象。ref可一试方法、标签等

  • ref方法干什么的？

  • comupted

API

<script setup name="">单文件组件的语法糖

Vuex4.x

都是vue官方提供的功能（路由也是）。

  1. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

曾经组件中数据是单向传递，现在值可以由vuex统一管理。

React:UI = fn(state)

elm:UI = state + effect

主要概念：

状态管理，其实也是本地数据存储（store）管理。需要存储、操作、获取功能

  • state:定义变量一样定义存储的数据
  • mutation:对数据的操作，类似web开发三层架构的dao层，直接操作数据
  • action：调用mutation操作数据，类似service和dao的区别；可以异步

State | Vuex (vuejs.org)

  • SSOT？
  • plain?

用法

  • 项目根目录
    • src

      • store

    • main.js

在index.js中创建并export

在main.js中引入并注册

在 Vue 组件中获得 Vuex 状态

那么我们如何在 Vue 组件中展示状态呢？由于 Vuex 的状态存储是响应式?的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

// 创建一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。

$store.state.count

默认的this可以省

Mutation

定义方法，传递其他参数可以写在state添加一个对象（最多传入一个state和另一个参数，多个参数只能以一个对象包装进去）

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_EXPIRES_IN: (state, time) => {
      state.expires_in = time
    },
    SET_NAME: (state, name) => {
      state.name = name
    }
  }

根据方法名调用

store.commit('increment')

getters

对共享数据计算一次

store

util包中的auth.js

import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

const ExpiresInKey = 'Admin-Expires-In'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

export function getExpiresIn() {
  return Cookies.get(ExpiresInKey) || -1
}

export function setExpiresIn(time) {
  return Cookies.set(ExpiresInKey, time)
}

export function removeExpiresIn() {
  return Cookies.remove(ExpiresInKey)
}

18 其它个人总结

在vscode中使用vue模板：

vue然后按!

子组件就像吕布一样，先被导入，然后在父组件的子组件中注册自己，然后使用

单页应用：页面的dom结构一直在变化，而传统前后端项目，每次返回一个完整网页

Element UI Plus

布局

el-col不指定span会占据一整行倒是换行。。

interface Tree {
  id: number
  label: string
  children?: Tree[]
}
let id = 1000

const append = (data: Tree) => {
  const newChild = { id: id++, label: 'testtest', children: [] }
  if (!data.children) {
    data.children = []
  }
  data.children.push(newChild)

}
const renderContent = (
  h,
  {
    node,
    data,
    store,
  }: {
    node: Node
    data: Tree
    store: Node['store']
  }
) => {
  return h(
    'span',
    {

    },
    h('span', null, node.label),
    h(
      'span',
      null,
      h(
        'a',
        {
          onClick: () => append(data),
        },
        '禁用'
      )
    )
  )
}

渲染函数

node

提前把这个类写一遍，是单例模式的对象声明？

setup里不能有export

js变量必须用var或者let声明？

Tree组件

slot就是写个template

节点点击事件经常传入两个参数，node和data

node： 节点本身的代理对象

  • level 几级结点
  • isLeaf 是否为叶子结点
  • parent 父节点代理对象
    • id 应该是节点的id
    • data：父节点数据，如果有id则在里面

data：节点的数据

有些属性要带上v-bind才能使用，比如

<el-rate v-model="form.rank" :max="5" show-score allow-half/>

的:max

渲染函数

<h1>{{ blogTitle }}</h1>

或者一个渲染函数里：

render() {
  return h('h1', {}, this.blogTitle)
}

在这两种情况下，Vue 都会自动保持页面的更新。

Vue通过创建虚拟Dom树的结点VNode来追踪和管理dom

最后的子渲染函数，似乎也可以不用数组，直接传入多个参数

  • 和js数组、可变参数的特性有关么

一个嵌套渲染、并渲染图标的例子：

const renderContent = (
  h,
  {
    node,
    data,
    store,
  }: {
    node: Node
    data: Tree
    store: Node['store']
  }
) => {
  return h(
    'span',
    {
      class: 'custom-tree-node',
    },[
        h('span', null, node.label),
        h('svg', {
            class: "svg-icon",
            'aria-hidden': "true"
        }, h(
            'use',
            {
                'xlink:href': "#icon-dict"
            },
            null
        )),
        h(
          'span',
          null,
          h(
            'a',
            {
              // onClick: () => append(data),
            },
            '禁用'
          )
        )
    ]
  )
}

如果这时prop时，对象的key含有’:‘、’-'等字符，可以用单引号将键值对中的键括起来

Vue2主要区别

.native修饰符过时

xxx.sync（注:v-bind和sync） v-model:xxxx:

slot-scope #default=“scope”

Tina_Run_润
关注
专栏目录
使用vuex4初体验
qq_43115434的博客
07-05 233
什么是 vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应 用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。         上面的解释来自 vuex 官网。         看完很懵？什么是状态管理模式？什么是情况我们该使用 vuex ？   
vue3 携带id （传参）
ZDM_9999的博客
12-25 1069
query 路由传值。
vue3中随机ID nanoid工具
laoli815的博客
02-23 624
vue 随机ID生成
若依学习笔记（二）
最新发布
huilang041的博客
07-14 235
因为是一级分类 而是下面对应的页面,需要设置对应的路径和权限等信息选择菜单名称前面的小图标可以在源文件内添加自己需要的图标再选择显示的目录/菜单名称就是目录/菜单的展示顺序 基本是从1开始向后排序如果选择 则路由地址需要以 ‘’ 开头访问的动态路由地址 比如 ‘选择隐藏 则该路由不会出现在左侧边栏 但是可以通过路由去访问选择停用 则该路由不会出现在左侧边栏 并且不能访问由于新增菜单和新增目录有重合的 所以这里只写不重合的地方访问的组件路径 例如: ‘’ 默认是在’’目录下的。
Vuex 4的基本使用
oi
03-27 1387
Vuex 4的基本使用Vuex 是什么？ Vuex 是什么？ 官方说法： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有
vuex4的基本用法
窄门狭路的博客
05-28 2595
vuex4的基本用法 VueX 是一个专门为 Vue.js 应用设计的状态管理构架，统一管理和维护各个vue组件的可变化状态。 Vuex五个核心概念： state, getters, mutations, actions, modules state：vuex的基本数据，用来存储变量 getter：从基本数据(state)派生的数据，相当于state的计算属性 mutation：提交更新数据的方法，必须是同步的(异步逻辑在action中写) action：Action 提交的是 mutati
vue3快速上手.md
01-06
- Vue3可以更好的支持TypeScript 4.新的特性 1. Composition API（组合API） - setup配置 - ref与reactive - watch与watchEffect - provide与inject 2. 新的内置组件 - Fragment - Teleport - Suspense 3. ...
Vue3快速上手(Vue3学习笔记)
07-11
Vue3快速上手(Vue3学习笔记) .Vue3简介 - 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） - 耗时2年多、[2600+次提交](https://github.com/vuejs/vue-next/graphs/commit-activity)、[30+个RFC]...
Vue3快速上手-vue3详细基础教程
06-20
Vue3快速上手,vue3详细基础教程,涵盖了知识点讲解和案例的使用讲解，makdown格式，是一份不可多得的学习资料
vue3快速上手demo,结合vant3，快速能理解手机开发、vue3开发
04-11
Vue3 快速上手与 Vant3 结合的实践指南 Vue3 是 Vue.js 的最新版本，带来了许多性能优化和开发体验改进。本指南通过一个实际的开发 demo，将帮助你快速掌握 Vue3 的核心概念和 vant3 移动端组件库的应用，从而提升...
【vue3: vuex4 状态管理库】使用&讲解
从今年开始写写博客~~
09-19 669
本文章目的：快速上手vue3 的 vuex ，并了解各个常用的功能：state、getters、mutations、actions、modules。 不常用的和非必要的在此不进行讲述，需要更完善自己的请查看官网。 【建议使用Pinia代替vuex > 移步我pinia文章】
《vue3+ts+element-plus 后台管理系统系列》之vuex4
2401_84094979的博客
04-13 869
前端校招精编面试解析大全点击这里获取完整版pdf查看eStore({plugins:?[]自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
Vuex4
qq_39375532的博客
04-12 99
vue前端开发可能使用的一个模块，用于存储并管理共享状态
手写vuex4源码（一）Vuex的基本使用
cwjxyp的博客
04-02 337
State：状态，可以理解为 vue 组件中的 data 数据；Getter：可以理解为 vue 中的 computed 计算属性；Mutation：同步函数，可以同步更改状态；Action：异步函数，可以执行异步操作，配合 Mutation 实现状态的异步更新；Module： vuex 的模块化，能够将臃肿复杂的 store 容器进行模块化分割，每个模块拥有独立的 state、mutation、action、getter；
Vuex4之简单使用
youhebuke225的博客
06-16 404
或者
vuex4
weixin_45730243的博客
05-12 1373
vuex4是vue3的兼容版本，关注于兼容性、提供和vue3x相同的API，因此我们可以在vue3中复用之前已存在的vuex代码 安装vuex4 npm i vuex@next 初始化方式 为了向vue3初始化方式看齐，vuex4初始化方式做了相应变化：使用新的createStore函数创建新的store实例 import {createApp} from 'vue' import {createStore} from 'vuex' import App from './App.vue' //1.创建s
Vuex3(对应Vue2.x) & Vuex4(对应Vue3.x)
weixin_40944062的博客
01-27 3334
VueX 的学习 瞎叨叨: 通过长时间的学习和搜索过程中发现, 好多人对Vue, Vuex,Veu-router, Vue-cli之间的版本有很多混淆, 看到标题是Vue3.x, 点进去, 发现还是new Vue({}), 其实, Vue3.x应该是createApp(App). 还是稍微整理一下, 贴在下面: vue-version name version Vue2.x Vuex 3.x Vue2.x Vue-router 3.x Vue2.x Vue-cli 3.x 4.x
路由传递参数的两种方式 [web前端][Vue框架]
m0_57001006的博客
06-06 719
前面的时候我们经常会看到导航栏中的输入地址后面加了一个? , 后面就是一些参数, 那么这里我们就来讲解我们如果通过路由来传递参数 小结: 我们的组件和Vue一样都是有声明周期的, 那么也就有相应的声明周期钩子函数, 我们在组件中created声明周期钩子函数中可以获取到路由传递过来的参数...
Vue路由传递query参数的两种方式
见证自己学习,成长的记录
02-02 1008
Vue路由传递query参数两种方式
vue3快速上手.md尚硅谷文档下载
10-27
要下载尚硅谷关于Vue3快速上手的文档，可以按照以下步骤进行： 1. 打开浏览器，进入尚硅谷的官方网站（ https://www.atguigu.com/ ）。 2. 在网站的首页或者导航栏中找到“文档”或者“学习资料”等相关入口。 3. 进入文档页面后，可以选择查看目录或者搜索框中输入“Vue3快速上手”进行搜索。 4. 找到相关的文档后，点击进入该文档的页面。 5. 在文档页面中，应该会有一个类似于“下载”、“PDF”等的按钮或链接，点击该按钮或链接。 6. 浏览器会自动开始下载该文档，保存到指定的下载文件夹中。 7. 下载完成后，可以在下载文件夹中找到该文档，并进行查阅学习。 尚硅谷是一个知名的IT教育培训机构，他们提供了许多优质的学习资料和文档，对于Vue3快速上手的文档应该也是一份很不错的教程。希望我的回答能对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值