Vue+Vite+Element Plus基础操作

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文件三个组成部分