Vue+Vite+Element Plus基础操作

news2024/9/22 9:53:21

Vue.js 是一个流行的前端框架，‌而 Vite 是一个快速构建前端应用的新型开发服务器和构建工具，‌两者结合可以显著提升开发效率和体验。‌

Vue.js 是一个用于构建用户界面的渐进式框架，‌它易于上手且功能强大。‌Vue 的核心库只关注视图层，‌非常容易与其他库或已有项目整合。‌此外，‌Vue 也完全有能力驱动复杂的单页应用。‌Vue 的浏览器开发者工具为调试和开发提供了极大的便利，‌使得开发者可以更高效地开发和调试应用。‌

Vite，‌作为一个下一代前端开发与构建工具，‌旨在提供开箱即用的配置，‌同时具有高度的可扩展性和完整的类型支持。‌它基于原生 ES 模块提供了快速的模块热更新功能，‌使用 Rollup 打包代码，‌并预配置以输出用于生产环境的高度优化过的静态资源。‌Vite 的设计目标是解决传统构建工具在处理大型项目时遇到的性能瓶颈问题，‌通过利用浏览器对 ES 模块的原生支持和编译型语言的流行，‌提供更快的开发服务器启动速度和更高效的代码更新。‌

结合 Vue 和 Vite，‌开发者可以享受到快速的开发和构建过程，‌以及 Vue 提供的强大功能和灵活性。‌这种组合特别适合构建大型、‌复杂的前端应用，‌因为它提供了快速的反馈循环和优化的构建输出，‌从而提高了开发效率和应用程序的性能。‌此外，‌Vite 的插件系统和 API 提供了高度的自定义性，‌使得开发者可以根据项目需求轻松扩展和配置构建过程。‌

1.安装node.js

2.构建前端项目

  1. 按照提示要求进入目录cd StudentMgrFE
  2. 安装项目所需的包npm install
  3. 然后运行查看效果 npm run dev

 3.Vue3项目目录结构

  • 修改项目运行地址
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    host: '192.168.20.110',
    port: 8080,
    open: true,
  }
   
})

  • Package.json文件 

# 生产环境命令等价
npm install vuex --save
npm install vuex -S
npm i vuex --save
npm i vuex -S
# 开发环境命令等价
npm install vuex --save-dev
npm install vuex -D
npm i vuex --save-dev
npm i vuex -D
  •  页面加载

  • Vue文件三个组成部分 

// 接受父组件传递的变量
defineProps<{ msg: string }>()

// 定义基础数据类型
const count = ref(0)

// apps.vue 组件调用
/*
    lang="ts"-->脚本语言使用 Ts
    setup-->使用关键字简化脚本
*/
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import Demo from './components/Demo.vue'
</script>

<template>
  <HelloWorld msg="Vite + Vue" />
  <Demo />
</template>

// scoped 不影响其他组件样式
<style scoped>

</style>

 4.Vue3使用ElementPlus前端UI

  • 生产环境安装
npm install element-plus --save
  • 注册到项目中全局引入
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' 

// createApp(App).mount('#app')
createApp(App).use(ElementPlus).mount('#app')
  • 简单ElementUI Plus使用实例
// demo.vue
<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
} from '@element-plus/icons-vue'

// 定义一个函数
const queryStudent = () => {
    ElMessageBox.confirm(
    '是否开启编写？',
    '提示',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '已开启',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })

}

</script>

<template>
    <h1>Demo中的标题</h1>
    <div>
        <el-button :icon="Search" circle />
        <!-- 绑定点击事件 -->
        <el-button type="primary" @click="queryStudent" :icon="Edit" circle />
        <el-button type="success" :icon="Check" circle />
        <el-button type="info" :icon="Message" circle />
        <el-button type="warning" :icon="Star" circle />
        <el-button type="danger" :icon="Delete" circle />
    </div>

</template>


<style>
h1 {
    color: blue;
}

</style>

5. 使用vue-router实现路由

  • 安装
npm install vue-router@4 --save

  • 新建路由匹配文件

  • 定义index.ts必要配置 
// 1.导入组件              路由匹配模式          基本数据格式
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import HelloWorld from "../components/HelloWorld.vue";
import Demo from "../components/Demo.vue";

// 2.创建路由匹配的数据集合 --Array
const routes: Array<RouteRecordRaw>= [
    {
        path: "/",
        // name: 'Home',
        component: HelloWorld,
        
    },
    {
        path: "/demo",
        component: Demo
    },
]

// 3.创建一个 vue-router对象
const router = createRouter({
    history: createWebHistory(),
    // history: createWebHashHistory(import.meta.env.BASE_URL),
    routes,
})


// 4.暴露接口
export default router
  • 全局注册
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router' // 导入路由文件

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' 

// createApp(App).mount('#app')
createApp(App).use(router).use(ElementPlus).mount('#app')
  • 动态匹配路由
// app.vue template下添加
<script setup lang="ts">
// import HelloWorld from './components/HelloWorld.vue'
// import Demo from './components/Demo.vue'
// import Test from './components/Test.vue'
</script>

<template>
  <router-view></router-view>
  <!-- <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
  <Demo /> -->
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

6. 案例实现

  • 导航栏实现
// 新建test.vue

<script setup lang="ts">

</script>

<template>
  <div class="outer">
    <div class="inner">
      <el-menu class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">电视剧</el-menu-item>
        <el-menu-item index="3">电影</el-menu-item>
        <el-menu-item index="4">综艺</el-menu-item>
      </el-menu>
    </div>
  </div>
</template>


<style scoped>
.outer{
  width: 100%;
}
.inner{
  width: 1200px;
  margin: 0 auto;
}
</style>

// index.ts 配置路由
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Test from "../components/Tests.vue";
const routes: Array<RouteRecordRaw>= [
    {
        path: "/test",
        component: Test
    },
]

// app.vue入口配置
<template>
  <router-view></router-view>
</template>

  • 实现点击导航路由切换（每个页面都有导航）
// index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Test from "../components/Tests.vue";
import Tv from "../components/tv.vue";

// 2.创建路由匹配的数据集合 --Array
const routes: Array<RouteRecordRaw>= [
    {
        path: "/test",
        name: 'Index',
        component: Test
    },
    {
        path: "/tv",
        name: 'Tv',
        component: Tv
    },
]

// 3.创建一个 vue-router对象
const router = createRouter({
    history: createWebHistory(),
    // history: createWebHashHistory(import.meta.env.BASE_URL),
    routes,
})

// 4.暴露接口
export default router

// test.vue 

<script setup lang="ts">

</script>

<template>
  <div class="outer">
    <div class="inner">
      <el-menu class="el-menu-demo" mode="horizontal">
        // 方法一定义路由
        <el-menu-item index="1"><router-link :to="{name:'Index'}">首页</router-link></el-menu-item>
        <el-menu-item index="2"><router-link :to="{name: 'Tv'}">电视剧</router-link></el-menu-item>
        <el-menu-item index="3">电影</el-menu-item>
        <el-menu-item index="4">综艺</el-menu-item>
      </el-menu>
      <div class="content">首页</div>
    </div>   
  </div>
</template>


<style scoped>
.outer{
  width: 100%;
}
.inner{
  width: 1200px;
  margin: 0 auto;
}
.content{
  width: 1200px;
  height: 500px;
  background-color: lightblue;
  line-height: 500px;
  font-size: 100px;
  text-align: center;
}
</style>

// tv.vue
<script setup lang="ts">

</script>

<template>
  <div class="outer">
    <div class="inner">
      <el-menu class="el-menu-demo" mode="horizontal">
        // 方法二匹配路由
        <el-menu-item index="1"><router-link to="/test">首页</router-link></el-menu-item>
        <el-menu-item index="2"><router-link to="/tv">电视剧</router-link></el-menu-item>
        <el-menu-item index="3">电影</el-menu-item>
        <el-menu-item index="4">综艺</el-menu-item>
      </el-menu>
      <div class="content">电视剧</div>
    </div>   
  </div>
</template>


<style scoped>
.outer{
  width: 100%;
}
.inner{
  width: 1200px;
  margin: 0 auto;
}
.content{
  width: 1200px;
  height: 500px;
  background-color: lightblue;
  line-height: 500px;
  font-size: 100px;
  text-align: center;
}
</style>
  • 简便写法在app.vue中定义
// app.vue

<script setup lang="ts">

</script>

<template>
    <div class="outer">
    <div class="inner">
      <el-menu class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1"><router-link :to="{name:'Index'}">首页</router-link></el-menu-item>
        <el-menu-item index="2"><router-link :to="{name: 'Tv'}">电视剧</router-link></el-menu-item>
        <el-menu-item index="3">电影</el-menu-item>
        <el-menu-item index="4">综艺</el-menu-item>
      </el-menu>
      <router-view></router-view>
    </div>   
  </div>
</template>

<style scoped>
.outer{
  width: 100%;
}
.inner{
  width: 1200px;
  margin: 0 auto;
}
 
</style>

// test.vue
<script setup lang="ts">

</script>

<template>
    <div class="content">首页</div>
</template>

<style scoped>

.content{
  width: 1200px;
  height: 500px;
  background-color: lightblue;
  line-height: 500px;
  font-size: 100px;
  text-align: center;
}
</style>

// tv.vue
<script setup lang="ts">

</script>

<template>
    <div class="content">电视剧</div>
</template>


<style scoped>
.content{
  width: 1200px;
  height: 500px;
  background-color: lightblue;
  line-height: 500px;
  font-size: 100px;
  text-align: center;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1990285.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

前端构建工具|vite快速入门

前端构建工具|vite快速入门

认识vite vite组成部分 Vite是一种新型前端构建工具&#xff0c;能够显著提升前端开发体验。它主要由两部分组成&#xff1a; 一个开发服务器&#xff0c;它基于 原生 ES 模块 提供了 丰富的内建功能&#xff0c;如速度快到惊人的 模块热更新&#xff08;HMR&#xff09;。一…
阅读更多...
DERPNSTINK: 1-打靶渗透【附代码】(权限提升)

DERPNSTINK: 1-打靶渗透【附代码】(权限提升)

DerpNStink 靶机下载地址&#xff1a; https://www.vulnhub.com/entry/derpnstink-1,221/#downloadhttps://www.vulnhub.com/entry/derpnstink-1,221/#download 1. 主机发现端口扫描目录扫描操作系统等信息收集 1.1. 主机发现 nmap -sn 192.168.7.0/24|grep -B 2 08:00:27…
阅读更多...
Rabbit高级特性 - 消息重试机制（两种实现）

Rabbit高级特性 - 消息重试机制（两种实现）

文章目录 消息重试机制概述实现方式一&#xff1a;基于消息手动确认机制&#xff0c;返回 nack 实现配置文件交换机、队列、绑定生产者接口消费者演示和结论 实现方式二&#xff1a;基于重试配置实现配置文件交换机、队列、绑定生产者接口消费者演示和结论 消息重试机制 概述 …
阅读更多...
对深度学习神经网络做了小改进，效果提升明显，可以发论文吗？

对深度学习神经网络做了小改进，效果提升明显，可以发论文吗？

小改了深度学习神经网络某一层&#xff0c;效果提升显著&#xff0c;可以发顶会吗&#xff1f; 结论就是&#xff0c;当然可以发&#xff0c;只是能不能发出高质量论文&#xff0c;中稿顶会&#xff0c;还得看你这个小改进的具体情况还有你讲故事的能力。 先说改进的具体情况…
阅读更多...
国家统计局中国主要城市面板数据（1990-2023年）

国家统计局中国主要城市面板数据（1990-2023年）

数据说明&#xff1a;数据来源于国家统计局&#xff0c;指标包含&#xff1a;城市、年份、第三产业增加值、第一产业增加值 地区生产总值、第二产业增加值、年末户籍人口、城镇非私营单位在岗职工平均工资 房地产开发投资额、房地产开发住宅投资额、房地产开发办公楼投资额、房…
阅读更多...
什么是股指期权与股指期货的套利策略？

什么是股指期权与股指期货的套利策略？

沪深300股指期权和沪深300股指期货就像是孪生兄弟&#xff0c;它们不仅到期时间一样&#xff0c;结算价格也一样&#xff0c;而且都是现金结算。这意味着&#xff0c;如果你用期权的方式“造”出一个期货来&#xff0c;跟市场上真实交易的期货&#xff0c;在到期那天&#xff0…
阅读更多...
Eclipse 首选项(Preferences)

Eclipse 首选项(Preferences)

设置首选项 该对话框可通过框架管理但是其他插件可以设置其他页面来管理首选项的配置。 我们可以通过 Window 菜单选择 Preferences 菜单项来开启该对话框。 首选项页面有多个分类组成。你可以在左侧菜单中展开各个节点来查看首选项的配置。 左上角的输入框可以快速查找首选…
阅读更多...
#子传父父传子props和emits #封装的table #vue3

#子传父父传子props和emits #封装的table #vue3

#子传父&父传子props和emits #封装的table #vue3 父组件&#xff1a;emits defineEmits props 子组件&#xff1a; 子组件 <template><el-table v-bind"$attrs" ref"innerTableRef" v-loading"loading" border :data"tabl…
阅读更多...
鸿蒙HarmonyOS开发：如何灵活运用动画效果提升用户体验

鸿蒙HarmonyOS开发：如何灵活运用动画效果提升用户体验

文章目录 一、动画概述1、动画的目的 二、显式动画 (animateTo)1、接口2、参数3、AnimateParam对象说明4、示例5、效果 三、属性动画 (animation)1、接口2、参数3、AnimateParam对象说明4、系统可动画属性4、示例5、效果 一、动画概述 动画的原理是在一个时间段内&#xff0c;…
阅读更多...
QT使用ui文件创建窗口

QT使用ui文件创建窗口

目录 带ui文件 添加状态栏 资源文件的使用 添加文件资源 使用文件资源 带ui文件 编辑 添加状态栏 MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow) {ui->setupUi(this);// 添加状态栏ui->statusbar->addWidget(new QLab…
阅读更多...
codeforces查看题解

codeforces查看题解

文章目录 1. 步骤一&#xff1a;右键单击箭头指向位置&#xff0c;根据提示打开链接2. 步骤二&#xff1a;左键单击箭头指向位置3. 结果&#xff1a;红线上方是参考代码&#xff0c;下方是测试样例4. 补充&#xff1a;① 右边这个方框可以筛选想要查看代码的状态(Accepted、Wro…
阅读更多...
AI在医学领域：残差扩散模型预测特发性肺纤维化 (IPF)

AI在医学领域：残差扩散模型预测特发性肺纤维化 (IPF)

关键词&#xff1a; IPF 进展预测、残差扩散模型、临床信息 特发性肺纤维化&#xff08;Idiopathic Pulmonary Fibrosis&#xff0c;IPF&#xff09;是一种严重且不可逆的肺部疾病&#xff0c;它会导致肺部组织出现瘢痕和增厚&#xff0c;从而引起呼吸困难。。及时对IPF进行治…
阅读更多...
Unity入门4——常用接口

Unity入门4——常用接口

C#中常用类和接口 DateTime&#xff1a;表示某个时刻 DateTime.Now&#xff1a;拿到系统当前时间DtaTime.TimeOfDay&#xff1a;获取此实例当天的时间 Quaternion&#xff1a;用来旋转&#xff0c;采用四元数&#xff0c;由w&#xff08;实部&#xff09;和x,y,z&#xff08;虚…
阅读更多...
ChinaJoy 2024: 维塔士携自研游戏亮相，探讨数据驱动游戏开发

ChinaJoy 2024: 维塔士携自研游戏亮相，探讨数据驱动游戏开发

2024年7月30日,上海——全球领先的视频游戏开发公司维塔士精彩亮相第二十一届中国国际数码互动娱乐展览会(ChinaJoy),并首次公开自研游戏《唐传奇:琵琶行》DEMO试玩。在展会首日举办的2024中国游戏开发者大会(CGDC)上,来自维塔士西安工作室的执行制作人熊鹏昱受邀发表题为《维塔…
阅读更多...
springboot的拦截器，监听器，过滤器，servlet的使用（三大组件）

springboot的拦截器，监听器，过滤器，servlet的使用（三大组件）

目录 1. 拦截器1.1 简介1.2 使用 2. 监听器2.1 简介2.2 使用 3. 过滤器3.1 简介3.2 使用 4. servlet4.1 简介4.2 使用 5. 例子6. 心得 1. 拦截器 1.1 简介 Spring Boot 拦截器&#xff08;Interceptor&#xff09;是Spring MVC中用于在请求处理流程中执行某些操作的组件。它们…
阅读更多...
Open3D 三维重建-Alpha Shapes (α-形状)

Open3D 三维重建-Alpha Shapes (α-形状)

目录 一、概述 1.1原理 1.2实现步骤 二、代码实现 2.1关键函数 2.1.1函数 2.1.2参数详解 2.2完整代码 三、实现效果 3.1原始点云 3.2处理后点云 Open3D点云算法汇总及实战案例汇总的目录地址&#xff1a; Open3D点云算法与点云深度学习案例汇总&#xff08;长期更新…
阅读更多...
08-PCB工程文件的创建

08-PCB工程文件的创建

1.创建工程文件 2.创建原理图库 3.创建PCB元件库 4.创建原理图 5.创建PCB 6.改名&#xff0c;保持和项目名一致 最后save。
阅读更多...
uniapp获取swiper中子组件的内容高度

uniapp获取swiper中子组件的内容高度

swiper有默认高度,如果不单独设置一个具体高度&#xff0c;swiper后面的内容将不会展示 这里展示的例子是: swiper中放有一个子组件,想要完整展示子组件的内容&#xff0c;swiper就需要获取到子组件的内容高度并设置 <!-- 注意: 这里的单位是 px,不是rpx --><swiper…
阅读更多...
【STM32】IO口取反 | 寄存器方式 | 异或运算符 | 原理

【STM32】IO口取反 | 寄存器方式 | 异或运算符 | 原理

目录 STM32 IO口取反 | 寄存器方式 | 异或运算符 | 原理1. 引言2. GPIO基础知识2.1 GPIO概述2.2 STM32的GPIO架构2.3 GPIO寄存器简介 3. GPIO引脚取反原理3.1 寄存器操作实现取反3.2 异或运算符的应用 4. 示例代码4.1 基础示例&#xff1a;LED闪烁4.2 应用实例&#xff1a;继电…
阅读更多...
大数据面试SQL（三）：每分钟在线直播人数

大数据面试SQL（三）：每分钟在线直播人数

文章目录 每分钟在线直播人数 一、题目 二、分析 三、SQL实战 四、样例数据参考 每分钟在线直播人数 一、题目 有如下数据记录直播平台主播上播及下播时间&#xff0c;根据该数据计算出平台每分钟的在线直播人数。 这里用主播名称做统计&#xff0c;前提是主播名称唯一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023