Vue+Vite+Element Plus基础操作

llovew.2024-08-09 6:08

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项目目录结构

  • 修改项目运行地址
TypeScript 复制代码 
// 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文件
TypeScript 复制代码 
# 生产环境命令等价
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文件三个组成部分
TypeScript 复制代码 
// 接受父组件传递的变量
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

  • 生产环境安装
TypeScript 复制代码 
npm install element-plus --save
  • 注册到项目中全局引入
TypeScript 复制代码 
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使用实例
TypeScript 复制代码 
// 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实现路由

  • 安装
TypeScript 复制代码 
npm install vue-router@4 --save
  • 新建路由匹配文件
  • 定义index.ts必要配置
TypeScript 复制代码 
// 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
  • 全局注册
TypeScript 复制代码 
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')
  • 动态匹配路由
TypeScript 复制代码 
// 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. 案例实现

  • 导航栏实现
TypeScript 复制代码 
// 新建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>
  • 实现点击导航路由切换（每个页面都有导航）
TypeScript 复制代码 
// 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中定义
TypeScript 复制代码 
// 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>
TypeScript 复制代码 
// 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>
相关推荐
恋猫de小郭1 小时前
Flutter Zero 是什么？它的出现有什么意义？为什么你需要了解下？
android·前端·flutter
崔庆才丨静觅7 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60618 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了8 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅8 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅9 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅9 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment9 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅9 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊9 小时前
jwt介绍
前端
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示