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>
相关推荐
周亚鑫10 分钟前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
落魄小二19 分钟前
el-table 表格索引不展示问题
javascript·vue.js·elementui
y52364819 分钟前
Javascript监控元素样式变化
开发语言·javascript·ecmascript
Justinc.26 分钟前
CSS3新增边框属性（五）
前端·css·css3
fruge33 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia42 分钟前
vue中如何关闭eslint检测？
前端·javascript·vue.js
~甲壳虫43 分钟前
说说webpack中常见的Plugin？解决了什么问题？
前端·webpack·node.js
嚣张农民1 小时前
JavaScript中Promise分别有哪些函数？
前端·javascript·面试
十一吖i1 小时前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年1 小时前
vue2与vue3的全局通信插件，如何实现自定义的插件
前端·javascript·vue.js
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play