Vue+Vite+Element Plus基础操作

llovew.

于 2024-08-07 09:28:26 发布

阅读量1k

点赞数 14

分类专栏： Vue Django 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_61517307/article/details/140954972

版权

Django 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Vue

3 篇文章 0 订阅

订阅专栏

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

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

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

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

1.安装node.js

2.构建前端项目

按照提示要求进入目录cd StudentMgrFE
安装项目所需的包npm install
然后运行查看效果 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>