Vue3 通用配置路由拦截beforeEach

会点php的前端小渣渣2022-12-27 16:07:19

import {createRouter, createWebHistory} from 'vue-router'
import routes from './routes'  
import store from '../store/index';  
import { ElMessage } from "element-plus";
 
 
const router = createRouter({
	history: createWebHistory(),
	routes
})
 
 
router.beforeEach((to, from, next) => {
    if (to.path == '/login') {
        // 登录或者注册才可以往下进行
        next();
    } else {
        // 获取 token
         const token = store.state.token;
        // token 不存在
        if (token === null || token === '') {
            ElMessage.error('您还没有登录，请先登录');
            next('/login');
        } else {
            next();
        }
    }
});
 
export default router;

Vue中实现等待几秒的5种方法

在Vue开发中，有时候我们需要实现等待几秒的逻辑，比如在数据加载完成后延迟执行某些操作。传统的做法是使用轮询，即每隔一段时间检查条件是否满足。然而，这种方法不仅效率低下，而且可能导致资源浪费。本文将介绍五种在Vue中实现等待几秒的高效技巧，帮助您告别轮询，让代码更优雅。

技巧一：使用JavaScript的setTimeout函数

JavaScript的setTimeout函数允许您在指定的毫秒数后执行一个函数。在Vue中，您可以使用setTimeout来实现等待几秒的逻辑。

methods: {  
  waitSeconds(seconds) {  
    setTimeout(() => {  
      // 在这里执行需要等待几秒后执行的操作  
      console.log('等待了' + seconds + '秒');  
    }, seconds * 1000);  
  }  
}  

技巧二：利用Vue的nextTick方法

Vue的nextTick方法用于在下次DOM更新循环结束之后执行延迟回调。在Vue中，您可以结合setTimeout和nextTick来实现等待几秒的逻辑。

methods: {  
  waitSeconds(seconds) {  
    this.$nextTick(() => {  
      setTimeout(() => {  
        // 在这里执行需要等待几秒后执行的操作  
        console.log('等待了' + seconds + '秒');  
      }, seconds * 1000);  
    });  
  }  
}  

技巧三：使用Promise和async/await语法

在Vue中，您可以使用Promise和async/await语法来实现异步操作。以下是一个使用Promise和setTimeout的示例：

methods: {  
  async waitSeconds(seconds) {  
    return new Promise(resolve => {  
      setTimeout(() => {  
        resolve();  
      }, seconds * 1000);  
    });  
  }  
}  

然后在组件的其他部分，您可以这样使用：

async waitAndDoSomething() {  
  await this.waitSeconds(5);  
  // 在这里执行需要等待5秒后执行的操作  
  console.log('等待了5秒');  
}  

技巧四：使用setInterval结合clearInterval

虽然轮询不是最佳实践，但在某些情况下，您可能需要使用setInterval结合clearInterval来实现等待几秒的逻辑。

methods: {  
  startWaiting(seconds) {  
    let counter = 0;  
    const intervalId = setInterval(() => {  
      counter++;  
      if (counter >= seconds) {  
        clearInterval(intervalId);  
        // 在这里执行需要等待几秒后执行的操作  
        console.log('等待了' + seconds + '秒');  
      }  
    }, 1000);  
  }  
}  

技巧五：使用第三方库

如果您需要更复杂的等待逻辑，可以考虑使用第三方库，如lodash中的delay函数。

methods: {  
  async waitSeconds(seconds) {  
    await _.delay(seconds * 1000);  
    // 在这里执行需要等待几秒后执行的操作  
    console.log('等待了' + seconds + '秒');  
  }  
}  

总结

在Vue中实现等待几秒的逻辑，有五种高效技巧：使用setTimeout、Vue的nextTick、Promise和async/await、setInterval结合clearInterval以及第三方库。选择合适的方法取决于您的具体需求。通过这些技巧，您可以告别轮询，让代码更优雅。

vue3 axios统一添加headers和单独接口添加headers

qq_376560052022-07-21 16:56:11

vue3 axios统一添加headers 和单独某一个接口添加headers的语法是不一样的，其中接口添加headers需要区分请求方式是GET还是POST,下面依次介绍3种情况

第一种：统一添加headers 以token为例
在main.ts 里引入axios

import axios from 'axios'
axios.interceptors.request.use(config => {
    // 为请求头添加x-access-token字段为服务端返回的token
    config.headers['x-access-token'] = sessionStorage.getItem('token')
    // return config是固定用法 必须有返回值
    return config
})

第二种： 某一个接口添加headers，请求的方式为GET

axios.get(interfaceUrl, {
		params:{}, //如果没有传参，直接注释掉此行代码
        headers : {
            'x-access-token': sessionStorage.getItem('token')
        }
      }).then((res) => {
         
      })

第三种： 某一个接口添加headers，请求的方式为POST

 axios.post(interfaceUrl,
	 {}, //传参，直接写入参就可以， 注意：如果没有传参也必须写{}
 	 {
          headers : {
              'x-access-token': sessionStorage.getItem('token')
          }
      }).then((res) => {
        
      })

npm---依赖包的增删改查

monstkl2022-04-21 23:12:35

一、增加依赖包

1、项目中增加某个依赖包
npm install xxx
npm install xxx@版本号
 
2、安装项目的全部依赖
npm install
 
3、安装全局依赖
npm install xxx -g
// 安装位置
C:\user\当前用户\AppData\Roaming\npm中

二、删除项目中某个依赖包

// 不管是在开发依赖项中还是在生产依赖项中，也不管什么版本
// 会自动找到这个包，并删除
npm uninstall xxx

三、修改项目中某个依赖包

// 方式一
// 不管在开发依赖项中还是在生产依赖项中
// 自动找到这个包，按照包的更新规则（~、^、latest）更新
npm update xxx
 
// 方式二
npm uninstall xxx
npm install xxx@版本号

四、查询依赖包

npm list  依赖树
npm list --depth=0  依赖树的第一层

记录安装 node-sass 失败原因及解决办法汇总

乐潇游2021-04-02

我们在安装 node-sass 的时候总是会因为各种原因不成功，今天我就一口气把这些可能导致失败的坑汇总一下，以免以后再被坑。

node-sass 安装过程分析

首先了解一下 node-sass 安装的过程：

1. npm 拉下 node-sass包；

2. 根据node版本和node-sass版本拉取对应的binding.node编译器，原因是sass的编译语言比较特殊，需要下载对应版本的编译器才能编译；（node scripts/install.js 阶段）

3. 如果能拉下binding.node就【安装成功】；

   如果找不到对应的binding.node包，即失败，然后就会尝试本地编译。

可能失败的原因

一、网络不稳定

首先要知道的是，安装 node-sass 时在 node scripts/install.js 这个阶段会从 github.com 上下载一个 .node 文件，大部分安装不成功的原因都源自这里，因为 GitHub Releases 里的文件都托管在 s3.amazonaws.com 上面，而这个网址在国内总是"网络不稳定"，所以我们需要通过第三方服务器下载这个文件。

解决办法

1. 使用淘宝镜像

npm set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass

然后重新执行 npm i node-sass 即可完成安装。

2. 使用梯子

假设你的梯子在你本地机器上开启了一个第三方服务器 127.0.0.1:1080，那么只需按照下面的方法配置一下就能正常安装 node-sass 了（如果你开启的是 PAC 模式而不是全局模式，那还需要将 s3.amazonaws.com 加入 PAC 列表）：

npm config set proxy http://127.0.0.1:1080
npm i node-sass

# 下载完成后删除 http 代理
npm config delete proxy

3. 本地指定.node文件

比如我们在安装 node-sass 的时候可以发现它需要下载具体版本对应的 .node 文件:

$ npm install --save-dev node-sass
> node-sass@5.0.0 install D:\WorkSpace\node-sass-test\node_modules\gulp-sass\node_modules\node-sass
> node scripts/install.js

Downloading binary from http://npm.taobao.org/mirrors/node-sass/v5.0.0/win32-x64-72_binding.node

如果你的办公环境不能访问外网，那么可以从有网络的电脑上将.node文件（下载对应 node-sass 版本以及对应操作系统的）下载过来，再传到离线的电脑上指定 binary 路径(一定要用绝对路径)来安装，执行以下命令完成安装：

npm i -D node-sass@5.0.0 --sass_binary_path=D:\files\win32-x64-72_binding.node

二、本地编译没有Python环境

方法1：通过 NPM 包

网络正常的情况下安装 node-sass 是不需要Python环境的，如果拉不下来对应的binding.node就会进入尝试【本地编译】，然后会检查是否具备的条件：需要python环境，报的错一般就会提示python没有安装（还是 Mac 香，自带python环境没有这些烦恼），安装下面两个包可以快速解决：

不过需要注意：拉包的方式需要cmd用管理员模式打开! ! !

npm install -g node-gyp
npm install --global --production windows-build-tools

如果本地有网络还好，这两个包如果安装成功了，node-sass 基本就能安装成功了，但是如果你的办公环境限制网络可能也比较坑，参考：离线安装 node-gyp 。

方法2：搭建Python环境（建议2.7）

• 1、去官网下载 www.python.org/download/re… ；
• 2、安装成功之后，在环境变量中的系统变量新增python的安装路径；
• 3、执行 npm rebuild node-sass 重构一下；
• 4、再重新执行 npm install node-sass

三、node-sass版本与当前Node版本不匹配

因node版本与node-sass版本不匹配导致 binding.node 拉不下来，无法编译。

node-sass 版本的兼容性不好，老项目中依赖的 node-sass 很可能已经不兼容新的 node 版本，对应版本兼容参考如下（或官方仓库）：

比如我在 Node 8 的环境下安装 node-sass@3.13.1, 安装的时候就会出现找不到对应的 binding.node 而报错，如下：

$ npm install --save-dev node-sass
> node-sass@3.13.1 install D:\WorkSpace\mumble-next-ng\node_modules\gulp-sass\node_modules\node-sass
> node scripts/install.js

Downloading binary from http://npm.taobao.org/mirrors/node-sass/v3.13.1/win32-x64-57_binding.node
Cannot download "http://npm.taobao.org/mirrors/node-sass/v3.13.1/win32-x64-57_binding.node":

HTTP error 404 OK

出现 404 了，此时更换 node-sass 或 node 的版本即可。

具体参考方案：

npm i node-sass@4.8.3

因为Node 8 不能装 node-sass 3.x 这是肯定的（Node 7才对应 3.x），所以得装 node-sass 4.x。

如果项目中还有 gulp-sass 之类的包，而 gulp-sass 2.x 里面用了 node-sass 3.x，还是会有坑，所以 gulp-sass 得换到 3.x，建议安装 gulp-sass@3.2.1。

四、没有清理缓存

每次装包失败报错后记得都要 npm uninstall xxx 清除装包错误留下的缓存。

比如 npm i -D node-sass 报错了，就要执行一遍 npm uninstall node-sass，然后再重新安装。

常见镜像源设置

由于国内网络环境或者办公网络环境限制的原因，装 npm 包的时候总是会遇到各种坑，这里分享一些其他的常见 NPM 镜像地址设置：

$ npm set registry https://registry.npm.taobao.org  # 注册模块镜像
$ npm set disturl https://npm.taobao.org/dist      # node-gyp 编译依赖的 node 源码镜像

// 以下根据自己需要选择添加
$ npm config set proxy http://example.com:8080  # 设置代理
$ npm set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass # node-sass 二进制包镜像
$ npm i -D node-sass@3.13.1 --sass_binary_path=C:\Users\<username>\Downloads\win32-x64-57_binding.node  // 下载相关的sass_binary 404，强行指定path

$ npm set chromedriver_cdnurl http://cdn.npm.taobao.org/dist/chromedriver # chromedriver 二进制包镜像
$ npm set operadriver_cdnurl http://cdn.npm.taobao.org/dist/operadriver # operadriver 二进制包镜像
$ npm set phantomjs_cdnurl http://cdn.npm.taobao.org/dist/phantomjs # phantomjs 二进制包镜像
$ npm set fse_binary_host_mirror https://npm.taobao.org/mirrors/fsevents # fsevents 二进制包
$ npm set electron_mirror http://cdn.npm.taobao.org/dist/electron/ # electron 二进制包镜像

结语

总算把 node-sass 的坑捋清楚了，如果还有其他的坑欢迎大家补充，但愿大家以后都能顺利安装 node-sass，其实也可以用 dart-sass 无缝替换 node-sass 了！dart-sass 兼容 node-sass 的 API，而且安装过程无需下载二进制文件，这样大家就不需要再去踩 node-sass 的坑了，哦不，less 它不香吗？

参考链接

• 安装 node-sass 的正确姿势
• node-sass安装失败的问题汇总
• 离线安装 node-gyp

vue3: vueuse中use函数的使用

追旅2021-12-08

前言

这段时间开发，封装了非常多的use函数，大多是业务型函数，也有一些基础的功能函数，例如useTimeout等，最近在项目中使用了vueuse，发现其已经对绝大部分的基础功能都进行了封装（ahooks是针对react hooks进行的封装，react同学可以拿去参考），有些方法还是非常不错的可以直接使用，有些则是需要结合业务进行二次封装，这里简单介绍几个

useClipboard

useClipboard实现了复制功能

import { useClipboard } from '@vueuse/core'
const { text, copy } = useClipboard()
// 复制
const copyHandle = () => copy('123123123')
console.log(text) // 123123123

useCssVar

useCssVar可以用来动态设置css变量，如： var(--color)，可以用来配合完成动态主题

import { useCssVar } from '@vueuse/core'
// dom-ref
const el = ref(null)
const color = useCssVar('--color', el)

根据上述代码，可以做一下简单的二次封装，完成动态主题的效果，如下：

import { useCssVar } from '@vueuse/core'

export default el => {
  // 初始化颜色
  const color = useCssVar('--color', el)
  // 设置主题色，作为更新全局主题方法
  const setColor = color => color.value = color

  return {
    setColor,
    setFontColor
  }
}

useFetch

useFetch是对fetch请求的封装，返回了接口返回的数据（data）和loading状态（isFetching），还有初始化是否请求（immediate）、主动请求（execute）、以及终止请求方法（abort）、拦截器等等方法，是一个非常强大的api，且不需要在安装额外插件

import { useFetch } from '@vueuse/core'
const { execute } = useFetch(url, { immediate: false })
execute()

useScriptTag

控制js脚本的加载时机（manual）、加载（load）、卸载（unload）、添加标签属性（defer、async）、脚本加载完毕做一些事情等等，配合资源可以做一些优化

import { useScriptTag } from '@vueuse/core'

const { scriptTag, load, unload } = useScriptTag(
  'https://player.twitch.tv/js/embed/v1.js',
  () => {
    console.log('loaded')
  },
  { manual: true, defer: true, async: true },
)

// 加载
await load()
// 卸载
await unload()

useTitle

设置浏览器标题

import { useTitle } from '@vueuse/core'
const title = useTitle('default title')
setTimeout(() => title.value = 'new title', 0)

onClickOutside

点击元素外部触发，通常写一些ui组件时会用到该方法，如：弹窗点击外部隐藏

// 目标元素
const target = ref(null)

onClickOutside(target, (event) => console.log('未点中目标元素'))

useDevicePixelRatio

获取设备像素比

import { useDevicePixelRatio } from '@vueuse/core'

const { pixelRatio } = useDevicePixelRatio()

useDraggable

元素拖拽，这个还是很好用的，但是有点小小的问题，初始化的时候只能定义left和top的位置

<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } from '@vueuse/core'

const el = ref<HTMLElement | null>(null)

// `style` will be a helper computed for `left: ?px; top: ?px;`
const { x, y, style } = useDraggable(el, {
  initialValue: { x: 40, y: 40 },
})
</script>

<template>
  <div ref="el" :style="style" style="position: fixed; width: 200px; height: 200px; background: #f0f;">
    Drag me! 
  </div>
</template>

useMove

由于useDraggable不能初始化定义right和bottom的位置，所以结合useMousePressed、 useMouse，封装了一个useMove，同样是拖拽功能，但是可以在left、right、bottom、top中选择其二定义初始化位置

封装如下：

import { useMousePressed, useMouse } from '@vueuse/core'
import { reactive, toRefs, watch } from '@vue/composition-api'

/**
 * 元素可拖拽时，计算元素位置，left和right取其一，top和bottom取其一
 * @param right 元素初始化right位置
 * @param left 元素初始化left位置
 * @param top 元素初始化top位置
 * @param bottom 元素初始化bottom位置
 * @param target 元素ref
 */

export default ({
  right,
  left,
  top,
  bottom,
  target
}) => {
  // state
  const state = reactive({
    right,
    left,
    top,
    bottom
  })
  // useMousePressed
  const { pressed } = useMousePressed({ target })
  // useMouse
  const { x, y } = useMouse()
  // watch：监听鼠标移动计算left,top,right,bottom
  watch(
    [x, y],
    ([x1, y1], [x2, y2]) => {
      try {
        // 鼠标按下后移动开始计算位置
        if (pressed.value) {
          state.right = state.right - (x1 - x2)
          state.left = state.left + (x1 - x2)
          state.top = state.top + (y1 - y2)
          state.bottom = state.bottom - (y1 - y2)
        }
      } catch (error) {
        console.error(`error: ${error}`)
      }
    }
  )

  return {
    ...toRefs(state)
  }
}

使用：

import { templateRef } from '@vueuse/core'
import useMove from '@/hooks/useMove'

const target = templateRef(null)
// 位置
const { right, top } = useMove({ right: 30, top: 90, target })

useMousePressed

鼠标是否按下

import { templateRef, useMousePressed } from '@vueuse/core'

const target = templateRef(null) 
const { pressed } = useMousePressed({ target })

console.log(pressed) // 按下： true，起来： false

useMouse

鼠标位置

import { useMouse } from '@vueuse/core'

const { x, y } = useMouse()

结语

太多了先列举与部分，真是万物皆可封装啊

Vue3 实现Excel下载模板

解决：使用element-ui中的checkBox复选框组件时，绑定click事件会触发两次

TypeScript中如何循环迭代一个Array？

el-text详解

笨鸟先死2024-11-11

<template>
  <div>
    <h2>Text 示例</h2>

    <!-- 基本用法 -->
    <el-text>普通文本</el-text>

    <!-- 不同类型的文本 -->
    <el-text type="primary">主要文本</el-text>
    <el-text type="success">成功文本</el-text>
    <el-text type="warning">警告文本</el-text>
    <el-text type="danger">危险文本</el-text>
    <el-text type="info">信息文本</el-text>

    <!-- 不同大小的文本 -->
    <el-text size="small">小号文本</el-text>
    <el-text size="medium">中号文本</el-text>
    <el-text size="large">大号文本</el-text>

    <!-- 截断文本 -->
    <el-text truncated>
      这是一段很长很长的文本，会被截断显示。这是一段很长很长的文本，会被截断显示。
    </el-text>

    <!-- 限制文本行数 -->
    <el-text :line-clamp="2">
      这是一段很长很长的文本，会被限制显示两行。这是一段很长很长的文本，会被限制显示两行。
    </el-text>

    <!-- 下划线文本 -->
    <el-text underline>带有下划线的文本</el-text>

    <!-- 删除线文本 -->
    <el-text strikethrough>带有删除线的文本</el-text>

    <!-- 斜体文本 -->
    <el-text italic>斜体文本</el-text>

    <!-- 加粗文本 -->
    <el-text bold>加粗文本</el-text>

    <!-- 禁用文本 -->
    <el-text disabled>禁用文本</el-text>
  </div>
</template>

Vue的'反引号'模板字符串例子

Jetpropelledsnake212019-02-15 16:27:47

1 $('#result').append(
2   'There are <b>' + basket.count + '</b> ' +
3   'items in your basket, ' +
4   '<em>' + basket.onSale +
5   '</em> are on sale!'
6 );

1 $('#result').append(`
2   There are <b>${basket.count}</b> items
3    in your basket, <em>${basket.onSale}</em>
4   are on sale!
5 `);

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

let greeting = `\`Yo\` World!`;

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

vue组件中的反斜杠作用

脚下的黑珍珠号2018-06-21 18:23:45

正常情况下：

var htmlString = '<div>this is a string</div>';

下面写法是不对的

var htmlString = '<div>
   this is a string
</div>';

但是一些时候我们希望像上面这种写法，可读性更高

所以要进行转义处理

var htmlString = '<div>\
   this is a string\
</div>';

引用官方的话

上述的这个和一些接下来的示例使用了 JavaScript 的模板字符串来让多行的模板更易读。它们在 IE 下并没有被支持，所以如果你需要在不 (经过 Babel 或 TypeScript 之类的工具) 编译的情况下支持 IE，请使用折行转义字符取而代之。

vue项目引入全局的.css文件

vue子组件向父组件传值的两种方法

夏末_阳光依然耀眼2021-08-24

<template>
<div>
    <Tree :data="treeData" show-checkbox ref="treeData"></Tree>
    <Button type="success" @click="submit"></Button>
</div>  
</template>

submit(){
  this.$emit('getTreeData',this.$refs.treeData.getCheckedNodes());
},

<AuthTree  @getTreeData='testData'></AuthTree>

testData(data){
      console.log("parent");
      console.log(data)
},

<template>
<div>
<Tree :data="treeData" show-checkbox ref="treeData"></Tree>
</div>  
</template>

getData(){
        return this.$refs.treeData.getCheckedNodes()
},

<AuthTree ref="authTree"></AuthTree>

this.$refs.authTree.getData()

Vue :class 的使用

绑定对象 ​

我们可以给 :class (v-bind:class 的缩写) 传递一个对象来动态切换 class：

<div :class="{ active: isActive }"></div>

上面的语法表示 active 是否存在取决于数据属性 isActive 的真假值。

你可以在对象中写多个字段来操作多个 class。此外，:class 指令也可以和一般的 class attribute 共存。举例来说，下面这样的状态：

const isActive = ref(true)
const hasError = ref(false)

data() {
  return {
    isActive: true,
    hasError: false
  }
}

配合以下模板：

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

渲染的结果会是：

<div class="static active"></div>

当 isActive 或者 hasError 改变时，class 列表会随之更新。举例来说，如果 hasError 变为 true，class 列表也会变成 "static active text-danger"。

绑定的对象并不一定需要写成内联字面量的形式，也可以直接绑定一个对象：

const classObject = reactive({
  active: true,
  'text-danger': false
})

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}

<div :class="classObject"></div>

这将渲染：

<div class="active"></div>

我们也可以绑定一个返回对象的计算属性。这是一个常见且很有用的技巧：

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

<div :class="classObject"></div>

绑定数组 ​

我们可以给 :class 绑定一个数组来渲染多个 CSS class：

const activeClass = ref('active')
const errorClass = ref('text-danger')

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

<div :class="[activeClass, errorClass]"></div>

渲染的结果是：

<div class="active text-danger"></div>

如果你也想在数组中有条件地渲染某个 class，你可以使用三元表达式：

<div :class="[isActive ? activeClass : '', errorClass]"></div>

errorClass 会一直存在，但 activeClass 只会在 isActive 为真时才存在。

然而，这可能在有多个依赖条件的 class 时会有些冗长。因此也可以在数组中嵌套对象：

<div :class="[{ [activeClass]: isActive }, errorClass]"></div>

3分钟了解 vue props type类型

创建一个 Vue 应用

import { createApp } from 'vue'

const app = createApp({
  /* 根组件选项 */
})

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'

const app = createApp(App)

App (root component)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

<div id="app"></div>

app.mount('#app')

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

app.config.errorHandler = (err) => {
  /* 处理错误 */
}

app.component('TodoDeleteButton', TodoDeleteButton)

const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

Vue Router: RouterView和RouterLink的使用

Vue Router 是 Vue 官方的客户端路由解决方案。

客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。

Vue Router 基于 Vue 的组件系统构建，你可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。

示例 ​

让我们首先来看根组件, App.vue。

<template>
  <h1>Hello App!</h1>
  <p>
    <strong>Current route path:</strong> {{ $route.fullPath }}
  </p>
  <nav>
    <RouterLink to="/">Go to Home</RouterLink>
    <RouterLink to="/about">Go to About</RouterLink>
  </nav>
  <main>
    <RouterView />
  </main>
</template>

在这个 template 中使用了两个由 Vue Router 提供的组件: RouterLink 和 RouterView。

不同于常规的 <a> 标签，我们使用组件 RouterLink 来创建链接。这使得 Vue Router 能够在不重新加载页面的情况下改变 URL，处理 URL 的生成、编码和其他功能。我们将会在之后的部分深入了解 RouterLink 组件。

RouterView 组件可以使 Vue Router 知道你想要在哪里渲染当前 URL 路径对应的路由组件。它不一定要在 App.vue 中，你可以把它放在任何地方，但它需要在某处被导入，否则 Vue Router 就不会渲染任何东西。

上述示例还使用了 {{ $route.fullPath }} 。你可以在组件模板中使用 $route 来访问当前的路由对象。

创建路由器实例 ​

路由器实例是通过调用 createRouter() 函数创建的:

import { createMemoryHistory, createRouter } from 'vue-router'

import HomeView from './HomeView.vue'
import AboutView from './AboutView.vue'

const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView },
]

const router = createRouter({
  history: createMemoryHistory(),
  routes,
})

这里的 routes 选项定义了一组路由，把 URL 路径映射到组件。其中，由 component 参数指定的组件就是先前在 App.vue 中被 <RouterView> 渲染的组件。这些路由组件通常被称为视图，但本质上它们只是普通的 Vue 组件。

其他可以设置的路由选项我们会在之后介绍，目前我们只需要 path 和 component。

ElemenPlus与ElementUI关系和却别总结

秋书一叶2024-03-19 15:19:39

Element Plus 是 Element UI 的进一步发展和升级版本，两者之间有关联但也存在一些区别，有着各种的优缺点。

1.关系

Element Plus 是 Element UI 的一个分支和进化版本。Element UI 是一个非常受欢迎的 Vue UI 组件库，旨在为开发者提供现代、美观的界面组件。Element Plus 则是在 Element UI 的基础上进一步发展而来，专注于提供更好的性能、更丰富的组件以及更好的开发体验，同时也兼容了 Vue 3 的新特性。因此，可以说 Element Plus 是 Element UI 的下一个版本，是 Element UI 的升级和扩展。

2.区别

• 性能： Element Plus 在性能方面进行了优化，采用了虚拟滚动、渲染优化等策略，以确保在处理大数据量时也能保持流畅。相比之下，Element UI 的性能可能在一些特定场景下稍显不足。

• Vue 版本： Element UI 是基于 Vue 2 的，而 Element Plus 则是基于 Vue 3 开发的，充分利用了 Vue 3 的性能和新特性，如 Composition API。

• 组件： Element Plus 在组件方面引入了一些新的组件，如 Timeline 时间轴、TreeSelect 树选择器等，丰富了组件库。

• 按需加载： Element UI 支持按需加载，但 Element Plus 更加推崇按需加载，以减小项目的体积。

• 主题定制： Element Plus 在主题定制方面也进行了优化，使得定制主题更加容易。

• 适用场景： Element UI 适用于许多类型的项目，而 Element Plus 在大数据量、性能要求较高的项目中可能更为合适。

• 社区维护： Element UI 和 Element Plus 都拥有活跃的开发社区，但 Element Plus 的社区可能会更加关注最新的技术和需求。

3.优缺点

3.1 ElementPlus

优点：

1. 更好的性能： Element Plus 在性能方面进行了优化，采用了虚拟滚动、渲染优化等策略，适用于处理大数据量的场景。

2. Vue 3 的支持： Element Plus 是基于 Vue 3 开发的，充分利用了 Vue 3 的性能优势和新特性，如 Composition API。

3. 丰富的组件： Element Plus 提供了丰富的 UI 组件，涵盖了各种常见的界面元素，如表单、表格、菜单等。

4. 定制主题： Element Plus 提供了较好的主题定制能力，可以根据项目需求定制主题，以满足品牌一致性。

5. 模块化导入： Element Plus 支持按需导入组件，减小项目的体积，提高加载速度。

6. 开发者友好： Element Plus 提供了详细的文档和示例，方便开发者学习和使用。

缺点：

1. 学习曲线增加： 对于初学者来说，由于引入了 Vue 3 的新特性和 Composition API，可能需要更长的时间来掌握。

2. 生态系统适配问题： Element Plus 相对较新，一些第三方库和插件可能需要进行适配才能与其配合使用。

3.2 ElementUI

优点

1. 成熟稳定： Element UI 是一个经过多年发展和广泛应用的成熟框架，拥有稳定的生态系统和文档。

2. 易学易用： Element UI 的选项式 API 非常直观，适用于初学者，可以快速上手。

3. 广泛的生态系统： 由于广泛应用，有许多第三方库、组件和插件，加速开发。

4. 生态工具支持： Element UI 配备了丰富的生态工具，如 Element Devtools，便于调试和开发。

缺点：

1. 性能限制： 在处理大数据量和复杂页面时，性能可能相对较低。

2. Vue 3 的支持较弱： Element UI 是基于 Vue 2 的，不直接支持 Vue 3 的新特性。

3. 全局状态管理不便： 在处理复杂的状态管理时，全局状态管理可能显得不够方便。

element-ui表单el-form的label自适应宽度并对齐