目录
一、配置vite
二、router路由
1、安装router路由
2、配置router路由
3、注册router路由
4、使用router路由
三、安装element plus等其他依赖
1、注册element plus并配置图标
四、pinia使用                                
1、安装pinia
2、注册pinia
3、配置pinia
4、测试pinia
方式一、直接通过store.count++
直接从store取值并测试pinia:{{ count }}
使用storeToRefs函数解析store后测试pinia:{{ count1 }}
方式二、通过调用store中的函数
通过store中的函数并测试pinia:{{ count1 }}
五、layout布局
六、菜单栏logo
七、路由和页面联动
1、路由和页面联动的注意细节
首页 web前端 Vue.js 怎么使用vue3搭建后台系统

怎么使用vue3搭建后台系统

May 15, 2023 pm 10:43 PM
vue3

首先使用npm 或者yarn创建一个vue项目

// 使用npm创建一个基于vite构建的vue项目
npm create vite@latest
// 使用yarn创建一个基于vite构建的vue项目
yarn create vite@latest
登录后复制

在创建的构成中选择       

vue        
vue-ts
登录后复制

创建完之后将项目拖到编译器打开

一、配置vite

在vite.config.ts文件中配置项目的服务数据,配置如下:

  // 此处配置项目服务参数
  server: {
    host: "0.0.0.0", // 项目运行地址,此处代表localhost
    port: 8888, // 项目运行端口
    open: true, //编译之后是否自动打开页面
    hmr: true, // 是否开启热加载
  },
登录后复制

之后server下方接着配置src的别名@,配置如下

  // 配置src的别名@
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
登录后复制

此外还需在ts的配置文件tsconfig.json中加入以下配置:

    "baseUrl": "./",                                // 配置路径解析的起点
    "paths": {                                      // 配置src别名
      "@/*": ["src/*"]                              // 当我们输入@/时会被映射成src/
    }
登录后复制

二、router路由

1、安装router路由

npm install vue-router@latest
yarn add vue-router@latest
登录后复制

2、配置router路由

在src下新建router文件夹,同时创建index.ts并配置如下

import { createRouter, createWebHistory, RouteRecordRaw} from 'vue-router';
import Layout from '@/components/HelloWorld.vue'
 
// 定义路由,此处为Array数组,数据类型为RouteRecordRaw
const routes: Array<RouteRecordRaw> = [
    {
        path: &#39;/home&#39;,
        name: &#39;home&#39;,
        component: Layout
    }
]
 
// 创建路由
const router = createRouter({
    history: createWebHistory(),
    routes      // 将定义的路由传入
})
 
// 将创建的router路由暴露,使其在其他地方可以被引用
export default router
登录后复制

3、注册router路由

在main.ts中先通过        import router from '@/router/index'         引入路由,然后使用use函数注册路由,具体如下:

import { createApp } from &#39;vue&#39;
import &#39;./style.css&#39;
import App from &#39;./App.vue&#39;
// 此处引入定义的路由
import router from &#39;@/router/index&#39;
 
// createApp(App).mount(&#39;#app&#39;)
// 此处将链式创建拆解,从中注册路由
const app = createApp(App);
// 注册路由
app.use(router)
app.mount(&#39;#app&#39;)
登录后复制

4、使用router路由

注册完成之后,在程序入口App.vue中通过 使用路由,具体如下:

<template>
  <!-- <div>
    <a href="https://vitejs.dev" rel="external nofollow"  target="_blank">
      <img class="logo lazy"  src="/static/imghw/default1.png"  data-src="/vite.svg"    alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" rel="external nofollow"  target="_blank">
      <img class="logo vue lazy"  src="/static/imghw/default1.png"  data-src="@/assets/vue.svg"    alt="Vue logo" />
    </a>
  </div> -->
  <!-- 在App的入口程序使用路由,会将我们注册的路由全部引入到App入口,通过路由的路径确定跳转的页面 -->
  <router-view></router-view>
</template>
登录后复制

三、安装element plus等其他依赖

# 选择一个你喜欢的包管理器
 
// 安装element-plus
npm install element-plus --save
 
yarn add element-plus
 
pnpm install element-plus
 
// 安装element-plus的图标库组件
npm install @element-plus/icons-vue
 
yarn add @element-plus/icons-vue
 
pnpm install @element-plus/icons-vue
登录后复制

1、注册element plus并配置图标

和router一样都是在main.ts中注册,配置如下:

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
// 次数引入定义的路由
import router from "@/router/index";
// 引入element-plus
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
// 引入element-plus的图标库
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 
// createApp(App).mount(&#39;#app&#39;)
// 此处将链式创建拆解,从中注册路由
 
const app = createApp(App);
// 注册路由、element-plus等
app.use(router).use(ElementPlus);
// 将所有配置挂载到index.html的id为app的容器上
app.mount("#app");
 
// 此处参考官网,意为将图标库中的每个图标都注册成组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
登录后复制

四、pinia使用                                

pinia官网

1、安装pinia

yarn add pinia
# 或者使用 npm
npm install pinia
登录后复制

2、注册pinia

// 从pinia中引入创建实例的函数
import { createPinia } from &#39;pinia&#39;
 
// 使用createPinia函数创建一个pinia实例并注册
app.use(createPinia())
登录后复制

3、配置pinia

在src下面新建store文件夹并新建index.ts文件,并配置如下:

// 从pinia中引入defineStore函数来定义store
import { defineStore } from "pinia";
 
// 定义一个store并取名为useStore
// defineStore第一个参数是应用程序中store的唯一标识,也就是在定义其他store时该标识不能相同
// 此处可以类比为java中的实体类,useStore就是类名,state里的属性是成员属性,getters里的函数是getter方法,actions里的函数是setter方法
export const useStore = defineStore("useStore", {
  // 定义state
  // 推荐使用 完整类型推断的箭头函数
  state: () => {
    return {
      // 所有这些属性都将自动推断其类型
      count: 0,
      name: "Eduardo",
      isAdmin: true,
    };
  },
 
  // 定义getters,里面定义一些对state值的取值操作
  // 指向箭头函数定义的时候所处的对象,而不是其所使用的时候所处的对象,默认指向父级的this
  // 普通函数中的this指向它的调用者,如果没有调用者则默认指向window
  getters: {
    doubleCount: (state) => state.count * 2,
    doubleCountOne(state) {
      return state.count * 2;
    },
    doublePlusOne(): number {
      return this.count * 2 + 1;
    },
  },
 
  // 定义actions,里面定义一些对state的赋值操作
  actions: {
    setCounter(count:number){
        this.count = count
    }
  }
});
 
// 1、只有一个参数的时候,参数可以不加小括号,没有参数或2个及以上参数的,必须加上小括号
// 2、返回语句只有一条的时候可以不写{}和return,会自动加上return的,返回多条语句时必须加上{}和return
// 3、箭头函数在返回对象的时候必须在对象外面加上小括号
// 在vue中定义函数时,我们尽量都指明函数返回值类型以及参数的数据类型
登录后复制

4、测试pinia

<template>
  <!-- 测试element-plus -->
  <el-button type="primary">Primary</el-button>
 
  <!-- 测试element-plus图标 -->
  <div >
    <Edit  />
    <Share  />
    <Delete  />
    <Search  />
  </div>
 
  <h3 id="方式一-直接通过store-count">方式一、直接通过store.count++</h3>
  <!-- 测试pinia -->
  <h4 id="直接从store取值并测试pinia-nbsp-count-nbsp">直接从store取值并测试pinia:{{ count }}</h4>
  <el-button type="primary" @click="addCount">增加</el-button>
 
  <h4 id="使用storeToRefs函数解析store后测试pinia-nbsp-count-nbsp">使用storeToRefs函数解析store后测试pinia:{{ count1 }}</h4>
  <el-button type="primary" @click="addCount1">增加</el-button>
 
    <h3 id="方式二-通过调用store中的函数">方式二、通过调用store中的函数</h3>
   <h4 id="通过store中的函数并测试pinia-nbsp-count-nbsp">通过store中的函数并测试pinia:{{ count1 }}</h4>
  <el-button type="primary" @click="addCount2">增加</el-button> 
</template>
 
<script setup lang="ts">
import { useStore } from "@/store/index";
import { storeToRefs } from "pinia"; // 解析store中的数据,如成员属性、方法
 
// 创建了一个useStore实例对象
const store = useStore();
// 增加成员属性count的值,方式一、直接通过store.count++
 
// 拿到成员属性count,但这样取值会失去响应性,也就是不能实时同步,当我们点击增加按钮后,虽然操作已经完成,count也增加了,但展示有延迟
// 这个取值过程可能涉及解析数据,从而导致函数执行完后数据没有变化
const count = store.count;
const addCount = () => {
  store.count++;
};
// 通过pinia中的storeToRefs函数将store中的数据都进行解析
const count1 = storeToRefs(store).count;
const addCount1 = () => {
  store.count++;
};
 
// 方式二、通过调用store中的函数
const addCount2 = () => {
  store.setCounter(++store.count)
};
</script>
 
<style scoped>
.read-the-docs {
  color: #888;
}
</style>
登录后复制

五、layout布局

在配置layout之前,我们还需要对一些标签做初始化的样式设置,比如:html、body等,具体如下

在项目的index.html文件下添加样式设置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" rel="external nofollow"  />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <!-- 此处为程序的最终入口,会引入App.vue 并将相应的配置挂载到id为app <div id="app"></div> 上 -->
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
 
<!-- 这里对html、body、挂载容器div做样式的初始化设置,去除原有的设置 -->
<style lang="less">
  html,body,#app {
    padding: 0px;
    margin: 0px;
    height: 100%;
    box-sizing: border-box;
  }
  #app {
    width: 100%;
    max-width: 100%;
  }
</style>
登录后复制

之后在src下新建layout文件夹并新建index.vue文件,配置如下:

整个el-container为layout布局的整体,其下又可以按照布局的不同划分出不同的区块,但总结起来可以划分为:1、侧边菜单栏;2、头部区;3、内容展示区;4、尾部区,我们根据自己的需要进行选择组合,这些划分出来的区块涉及到不同的配置和处理,因此,我们可以将这些大的区块从layout整体布局中抽离成组件,让代码拥有更好的可读性;此外,每个抽离的组件自己本身也可能存在需要拆分的问题。我们通过拆分,可以很好的将一个问题化繁为简,从而很轻松的解决。

<template>
  <el-container class="container">
    <!-- layout布局左侧菜单区 -->
    <el-aside width="200px" class="aside">
      <!-- 菜单项,通过组件的形式引入 -->
      <Menu></Menu>
    </el-aside>
    <!-- layout布局内容区 -->
    <el-container>
      <!-- 内容区头部 -->
      <el-header class="header">
        <!-- 头部组件,抽离成组件形式 -->
        <Header></Header>
      </el-header>
      <!-- 内容区的主体,用于数据展示 -->
      <el-main class="content">Main</el-main>
    </el-container>
  </el-container>
</template>
 
<script setup lang="ts">
// vue3中组件引入后不需要使用conponents注册,可以直接使用
import Header from &#39;@/layout/header/Header.vue&#39;
import Menu from &#39;@/layout/menu/Menu.vue&#39;
 
</script>
 
<style scoped lang="less">
.container {
  height: 100%;
  .aside {
    background-color: antiquewhite;
  }
  .header {
    background-color: aquamarine;
  }
  .content {
    background-color: pink
  }
}
</style>
登录后复制

从layout布局抽离的菜单栏组件:

<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :unique-opened=&#39;uniqueOpenedFlag&#39;
  >
    <!-- 在为el-menu设置unique-opened属性时必须要确保el-sub-menu、el-menu-item中index的唯一性,如果index不唯一则不生效 -->
    <!-- 本组件作为父组件向子组件传递数据menuList,子组件需要定义menuList属性以确保可以接受该数据 -->
    <menu-item :menuList="menuList"></menu-item>
  </el-menu>
</template>
 
<script setup lang="ts">
import { ref, reactive } from "vue";
import MenuItem from "@/layout/menu/item/MenuItem.vue";
 
// 自定义的假的树形菜单数据
// reactive函数用来处理响应式数据,处理的数据一般是复杂类型数据,如对象类型
// ref函数也可以处理响应式数据,不过数据一般是基本数据类型
const isCollapse = ref(false)
const uniqueOpenedFlag = ref(true)
 
 
const menuList = reactive([
  {
    path: "/system",
    name: "system",
    component: "Layout",
    meta: {
      title: "系统管理",
      icon: "Setting",
      roles: ["sys:manage"],
    },
    children: [
      {
        path: "/worker",
        name: "worker",
        component: "Layout",
        meta: {
          title: "员工管理",
          icon: "Setting",
          roles: ["sys:manage"],
        },
      },
      {
        path: "/happy",
        name: "happy",
        component: "Layout",
        meta: {
          title: "菜单管理",
          icon: "Setting",
          roles: ["sys:manage"],
        },
      },
    ],
  },
  {
    path: "/mail",
    name: "mail",
    component: "Layout",
    meta: {
      title: "商场管理",
      icon: "Setting",
      roles: ["sys:manage"],
    },
    children: [
      {
        path: "/worker11",
        name: "worker11",
        component: "Layout",
        meta: {
          title: "员工管理22",
          icon: "Setting",
          roles: ["sys:manage"],
        },
      },
      {
        path: "/happy22",
        name: "happy22",
        component: "Layout",
        meta: {
          title: "菜单管理22",
          icon: "Setting",
          roles: ["sys:manage"],
        },
      },
    ],
  },
]);
 
</script>
 
<style lang="less" scoped></style>
登录后复制

从菜单栏抽离的菜单项组件:

<template>
  <template v-for="item in menuList" :key="item.path">
    <!-- 判断该菜单项是否有子菜单 -->
    <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.path" >
      <template #title>
        <el-icon>
          <!-- 通过动态组件展示图标,因为图标数据一般是通过后端查数据库拿到的 -->
          <component :is="item.meta.icon"></component>
        </el-icon>
        <span>{{ item.meta.title }}</span>
      </template>
      <!-- 递归调用,将子菜单传递给组件处理 -->
      <menu-item :menuList="item.children"></menu-item>
    </el-sub-menu>
    <el-menu-item v-else :index="item.path">
      <el-icon>
        <!-- 通过动态组件展示图标 -->
        <component :is="item.meta.icon"></component>
      </el-icon>
      <span>{{ item.meta.title }}</span>
    </el-menu-item>
  </template>
</template>
 
<script setup lang="ts">
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
 
// 子组件接受父组件传递的数据
// 本组件为子组件,接受父组件传过来的数据,此处定义menuList属性,接受父组件传递的menuList数据
defineProps(["menuList"]);
</script>
 
<style lang="less" scoped></style>
登录后复制

首先,将自己准备的logo图片放到src下的assets文件夹下,然后在layout的menu的logo文件夹下新建MenuLogo.vue文件,并配置如下:

<template>
  <div class="logo">
    <img  src="/static/imghw/default1.png"  data-src="Logo"  class="lazy"  : / alt="怎么使用vue3搭建后台系统" >
    <span class="logo-title">{{ title }}</span>
  </div>
</template>
 
<script setup lang="ts">
import { ref } from "vue";
import Logo from "@/assets/logo.png";
const title = ref("博客管理系统");
</script>
 
<style lang="less" scoped>
.logo {
  display: flex; // 弹性布局
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: rgb(234, 255, 127);
  text-align: center;
  cursor: pointer; // 鼠标悬浮在元素上时,鼠标从箭头变成小手
  align-items: center;
  img {
    width: 36px;
    height: 36px;
    margin-left: 20px; // 元素的外边距
    margin-right: 12px;
  }
  .logo-title {
    font-weight: 800; // 800为加粗
    color: black;
    font-size: 20px;
    line-height: 60px; // 元素上下居中
    font-family: FangSong; // 字体类型
  }
}
</style>
登录后复制

最后在菜单栏组件中引入菜单logo组件并使用

// 在script标签中引入
import MenuLogo from "@/layout/menu/logo/MenuLogo.vue";
 
// el-menu标签上方引入使用
<menu-logo></menu-logo>
登录后复制

效果如下:

怎么使用vue3搭建后台系统

七、路由和页面联动

在src的router的index.ts文件下添加如下路由配置并在views文件夹下创建对应的文件

{
    path: "/",
    component: Layout,      // 每个路由都需要通过component指定归属的布局组件
    redirect: "/index",
    name: "Root",
    children: [
      {
        path: "/index",
        name: "Index",
        component: () => import("@/views/index/index.vue"),
        meta: {
          title: "首页看板",
          icon: "icon-home",
          affix: true,
          noKeepAlive: true,
        },
      },
    ],
  },
  {
    path: "/comp",
    component: Layout,
    name: "Comp",
    meta: { title: "系统管理", icon: "icon-code" },
    children: [
      {
        path: "/element",
        name: "ElementComp",
        component: () => import("@/views/element/index.vue"),
        meta: {
          title: "菜单管理",
          icon: "icon-code",
        },
      },
      {
        path: "/iconPark",
        name: "IconPark",
        component: () => import("@/views/icon/index.vue"),
        meta: {
          title: "路由管理",
          icon: "icon-like",
        },
      },
      {
        path: "/chart",
        name: "Chart",
        component: () => import("@/views/echarts/index.vue"),
        meta: {
          title: "员工管理",
          icon: "icon-chart-line",
        },
        children: [
          {
            path: "/line",
            name: "Line",
            component: () => import("@/views/echarts/line.vue"),
            meta: {
              title: "商品管理",
            },
          },
          {
            path: "/bar",
            name: "Bar",
            component: () => import("@/views/echarts/bar.vue"),
            meta: {
              title: "手机管理",
            },
          },
          {
            path: "/otherChart",
            name: "OtherChart",
            component: () => import("@/views/echarts/other.vue"),
            meta: {
              title: "会员管理",
            },
          },
        ],
      },
    ],
  },
  {
    path: "/errorPage",
    name: "ErrorPage",
    component: Layout,
    meta: {
      title: "用户管理",
      icon: "icon-link-cloud-faild",
    },
    children: [
      {
        path: "/404Page",
        name: "404Page",
        component: () => import("@/views/errorPage/404.vue"),
        meta: {
          title: "角色管理",
          icon: "icon-link-cloud-faild",
        },
      },
      {
        path: "/401Page",
        name: "401Page",
        component: () => import("@/views/errorPage/401.vue"),
        meta: {
          title: "权限管理",
          icon: "icon-link-interrupt",
        },
      },
    ],
  },
登录后复制

添加完路由配置之后,创建路由的对应文件并添加一些描述文字,此时虽然路由和对应的页面都已经创建完毕并关联在了一起,但路由并没有被引用,也就无法在正确的位置展示路由页面的数据,所以,我们需要将路由引用到layout布局的main区域,也就是数据展示区,确保当我们访问某个路由时,对应的路由页面能够在该区域展示。

怎么使用vue3搭建后台系统

1、路由和页面联动的注意细节

在菜单项组件中,我们给菜单项的index属性绑定了路由的path值,其用意是为了启用element-plus中提供的一种在激活导菜单时(当我们点击某个菜单项时,该菜单项就是被激活的菜单)以index作为path进行路由跳转,所以为了我使用这个功能,我们还需要在菜单栏组件的el-menu标签中添加 router 属性以开启该功能,同时再添加 default-active 属性来指明当前被激活的菜单。用例如下

<template>
  <menu-logo></menu-logo>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical-demo"
    :unique-opened="uniqueOpenedFlag"
    router
  >
    <!-- 在为el-menu设置unique-opened属性时必须要确保el-sub-menu、el-menu-item中index的唯一性,如果index不唯一则不生效 ,一般我们为index绑定路由的path值 -->
    <!-- 本组件作为父组件向子组件传递数据menuList,子组件需要定义menuList属性以确保可以接受该数据 -->
    <!-- router属性可以激活以 index 作为 path 进行路由跳转 -->
    <!-- default-active属性用来指明当前被激活的菜单,其值为菜单项中index的值,也就是path值 -->
    <menu-item :menuList="menuList"></menu-item>
  </el-menu>
</template>
 
import { useRouter, useRoute } from "vue-router";
 
// 获取当前点击的路由
const route = useRoute();
// 从路由中获取path
const activeIndex = computed(() => {
  const { path } = route;
  return path;
});
登录后复制

怎么使用vue3搭建后台系统

以上是怎么使用vue3搭建后台系统的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vue3项目中怎么使用tinymce vue3项目中怎么使用tinymce May 19, 2023 pm 08:40 PM

tinymce是一个功能齐全的富文本编辑器插件,但在vue中引入tinymce并不像别的Vue富文本插件一样那么顺利,tinymce本身并不适配Vue,还需要引入@tinymce/tinymce-vue,并且它是国外的富文本插件,没有通过中文版本,需要在其官网下载翻译包(可能需要翻墙)。1、安装相关依赖npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2、下载中文包3.引入皮肤和汉化包在项目public文件夹下新建tinymce文件夹,将下载的

vue3+vite:src使用require动态导入图片报错怎么解决 vue3+vite:src使用require动态导入图片报错怎么解决 May 21, 2023 pm 03:16 PM

vue3+vite:src使用require动态导入图片报错和解决方法vue3+vite动态的导入多张图片vue3如果使用的是typescript开发,就会出现require引入图片报错,requireisnotdefined不能像使用vue2这样imgUrl:require(’…/assets/test.png’)导入,是因为typescript不支持require所以用import导入,下面介绍如何解决:使用awaitimport

Vue3怎么解析markdown并实现代码高亮显示 Vue3怎么解析markdown并实现代码高亮显示 May 20, 2023 pm 04:16 PM

Vue实现博客前端,需要实现markdown的解析,如果有代码则需要实现代码的高亮。Vue的markdown解析库有很多,如markdown-it、vue-markdown-loader、marked、vue-markdown等。这些库都大同小异。这里选用的是marked,代码高亮的库选用的是highlight.js。具体实现步骤如下:一、安装依赖库在vue项目下打开命令窗口,并输入以下命令npminstallmarked-save//marked用于将markdown转换成htmlnpmins

Vue3如何实现刷新页面局部内容 Vue3如何实现刷新页面局部内容 May 26, 2023 pm 05:31 PM

想要实现页面的局部刷新,我们只需要实现局部组件(dom)的重新渲染。在Vue中,想要实现这一效果最简便的方式方法就是使用v-if指令。在Vue2中我们除了使用v-if指令让局部dom的重新渲染,也可以新建一个空白组件,需要刷新局部页面时跳转至这个空白组件页面,然后在空白组件内的beforeRouteEnter守卫中又跳转回原来的页面。如下图所示,如何在Vue3.X中实现点击刷新按钮实现红框范围内的dom重新加载,并展示对应的加载状态。由于Vue3.X中scriptsetup语法中组件内守卫只有o

vue3项目打包发布到服务器后访问页面显示空白怎么解决 vue3项目打包发布到服务器后访问页面显示空白怎么解决 May 17, 2023 am 08:19 AM

vue3项目打包发布到服务器后访问页面显示空白1、处理vue.config.js文件中的publicPath处理如下:const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({publicPath:process.env.NODE_ENV==='production'?'./':'/&

Vue3复用组件怎么使用 Vue3复用组件怎么使用 May 20, 2023 pm 07:25 PM

前言无论是vue还是react,当遇到多处重复代码的时候,我们都会想着如何复用这些代码,而不是一个文件里充斥着一堆冗余代码。实际上,vue和react都可以通过抽组件的方式来达到复用,但如果遇到一些很小的代码片段,你又不想抽到另外一个文件的情况下,相比而言,react可以在相同文件里面声明对应的小组件,或者通过renderfunction来实现,如:constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

Vue3中如何使用defineCustomElement定义组件 Vue3中如何使用defineCustomElement定义组件 May 28, 2023 am 11:29 AM

使用Vue构建自定义元素WebComponents是一组web原生API的统称,允许开发者创建可复用的自定义元素(customelements)。自定义元素的主要好处是,它们可以在使用任何框架,甚至是在不使用框架的场景下使用。当你面向的最终用户可能使用了不同的前端技术栈,或是当你希望将最终的应用与它使用的组件实现细节解耦时,它们会是理想的选择。Vue和WebComponents是互补的技术,Vue为使用和创建自定义元素提供了出色的支持。你可以将自定义元素集成到现有的Vue应用中,或使用Vue来构

怎么用Vue3和Element Plus实现自动导入 怎么用Vue3和Element Plus实现自动导入 May 22, 2023 pm 04:58 PM

1前言1.1目的ElementPlus使用按需引入,大大缩小打包后的文件大小1.2最终效果自动生成components.d.ts文件,并在文件中引入ElementPlus组件自动生成components.d.ts文件,并在文件中引入ElementPlusAPI2准备工作安装ElementPlus#选择一个你喜欢的包管理器#NPM$npminstallelement-plus--save#Yarn$yarnaddelement-plus#pnpm$pnpminstallelement-plus3按

See all articles