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>
相关推荐
飞的肖几秒前
前端使用 Element Plus架构vue3.0实现图片拖拉拽，后等比压缩，上传到Spring Boot后端
前端·spring boot·架构
青灯文案18 分钟前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_7482548813 分钟前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.24 分钟前
WPSJS：让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营29 分钟前
Vue零基础教程|从前端框架到GIS开发系列课程（七）响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood1 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端1 小时前
0基础学前端-----CSS DAY9
前端·css
joan_851 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
还是大剑师兰特1 小时前
什么是尾调用，使用尾调用有什么好处？
javascript·大剑师·尾调用
m0_748236112 小时前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10红米手机使用google play