vue常用ui库（vue项目实战经验，相关库的安装，继续完善）

前言

最近在系统学习vue3的项目实战 
  
  
  
  
  
  ，这里是对学习过程中的总结
  
  
  
  
  
  
 ，包括一些库
 


 


 


 


 


 


，框架的网站             。

项目介绍

本项目基于Vue3 + ElementPlus + Vite实战开发商城后台管理系统 
 
 
 
 
 
 ，其中包括Vite的使用
   
   
   
   
   
   
 ，Vue3全新的

node.js的搭建

1.node官网下载

https://nodejs.org/zh-cn/

2.npm 淘宝镜像安装

npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm -v //查看版本号

vite项目搭建

1.vite官网和介绍

http://www.vitejs.net/

Vite 需要 Node.js 版本 >= 12.0.0 
  
 
  
 
  
 
  
 
  
 
  
 
。
 

 

 

 

 

 

，通过 npm init vite@latest //查看版本号

2.创建vue3项目

#npm 7+, 需要额外的双横线： npm init vite@latest my-vue-app -- --template vue #npm 6.x npm init vite@latest my-vue-app --template vue

再按要求勾选相关需要 

 

 

 

 

 

 ， npm run dev 运行












。

Element Plus UI库引入

1. Element Plus网站

https://element-plus.gitee.io/zh-CN/

Element Plus 是用于vue3的element库             ，vue2是element-ui 注意一下

2.库安装

npm install element-plus --save

3.引入UI库文件

main.js文件

import { createApp } from vue import ./style.css // 引入element依赖文件 import ElementPlus from element-plus import element-plus/dist/index.css import App from ./App.vue const app = createApp(App) app.use(ElementPlus) app.mount(#app)

windicss 框架

1.网站

https://windicss.org/

2.安装

npm i -D vite-plugin-windicss windicss

3.Vite 配置中添加插件

 
 

 
 

 
 

 
 

 
 

 
 

，和Vite 入口文件中导入

vite.config.js 文件

import vue from @vitejs/plugin-vue import { defineConfig } from vite import WindiCSS from vite-plugin-windicss // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), WindiCSS() ], })

main.js 文件

import { createApp } from vue import ./style.css // 引入element依赖文件 import ElementPlus from element-plus import element-plus/dist/index.css import App from ./App.vue const app = createApp(App) app.use(ElementPlus) // 引入windi.css import virtual:windi.css app.mount(#app)

vue-router 路由

1.网站

https://router.vuejs.org/zh/

2.安装

npm install vue-router@4

全局配置

router/index.js 文件

//1. 导入vue-router相关函数 import { createRouter, createWebHashHistory } from "vue-router" // 2.路由规则 const routes = [ { path:"路由地址", name:"路由名称", component:组件名称 } ] // 3.路由对象实例化 const router = createRouter({ history: createWebHashHistory(), routes }) // 暴露导出 export default router

main.js 文件

import { createApp } from vue import ./style.css // 引入element依赖文件 import ElementPlus from element-plus import element-plus/dist/index.css // 导入router配置文件 import router from "./router" import App from ./App.vue const app = createApp(App) // 挂载文件 app.use(ElementPlus) app.use(router) // 引入windi.css import virtual:windi.css app.mount(#app)

路径别名设置

vite.config.js 文件

import vue from @vitejs/plugin-vue import { defineConfig } from vite import WindiCSS from vite-plugin-windicss // 1.导入node的path路径模块 import path from "path" // https://vitejs.dev/config/ export default defineConfig({ resolve: { alias: { // 配置别名 "~": path.resolve(__dirname, "src") } }, plugins: [vue(), WindiCSS()] })

添加404页面

建好一个404页面组件











，再路由index.js里

//1. 导入vue-router相关函数 import { createRouter, createWebHashHistory } from "vue-router" // 导入页面组件 import Home from "~/views/Home.vue" import NotFound from "~/views/Page404.vue" // 2.路由规则 const routes = [ { path: "/", redirect: "/home" }, { path: "/home", component: Home }, // 404页面设置 { path: /:pathMatch(.*)*, name: NotFound, component: NotFound }, ] // 3.路由对象实例化 const router = createRouter({ history: createWebHashHistory(), routes }) // 暴露导出 export default router

登录页面布局

1.创建Login.vue组件并配置路由

配置路由

//1. 导入vue-router相关函数 import { createRouter, createWebHashHistory } from "vue-router" // 导入页面组件 import Home from "~/views/Home.vue" import Login from "~/views/Login.vue" import NotFound from "~/views/Page404.vue" // 2.路由规则 const routes = [ { path: "/", redirect: "/home" }, { path: "/home", name: Home, component: Home }, { path: "/login", name: Login, component: Login }, { path: /:pathMatch(.*)*, name: NotFound, component: NotFound }, ] // 3.路由对象实例化 const router = createRouter({ history: createWebHashHistory(), routes }) // 暴露导出 export default router

Login.vue组件布局源代码

<!-- 视图层 --> <template> <el-row class="min-h-screen bg-indigo-500"> <el-col :span="16" class="flex items-center justify-center"> <div> <div class="font-bold text-5xl text-light-50 mb-4">欢迎光临 </div> <div class="text-gray-200 text-sm">《vue3商城后台管理系统》 </div> <el-icon><Lock /></el-icon> </div> </el-col> <el-col :span="8" class="bg-light-50 flex items-center justify-center flex-col" > <h2 class="font-bold text-3xl text-gray-800">欢迎回来</h2> <div class="flex items-center justify-center my-5 text-gray-300 space-x-2" > <span class="h-[1px] w-16 bg-gray-200"></span> <span>账号密码登录</span> <span class="h-[1px] w-16 bg-gray-200"></span> </div> <el-form :model="form" class="w-[250px]"> <el-form-item> <el-input v-model="form.username" placeholder="请输入用户 名"> <template #prefix> <el-icon><UserFilled /></el-icon> </template> </el-input> </el-form-item> <el-form-item> <el-input v-model="form.password" placeholder="请输入密 码"> <template #prefix> <el-icon><Lock /></el-icon> </template> </el-input> </el-form-item> <el-form-item> <el-button round color="#626aef" class="w-[250px]" type="primary" @click="onSubmit" >登 录</el-button > ></el-form-item> </el-form> </el-col> </el-row> </template> <!-- 逻辑层 --> <script setup> import { reactive } from "vue"; // 导入icon图标 // import { Lock, UserFilled } from "@element-plus/icons-vue"; // do not use same name with ref const form = reactive({ username: "", password: "", }); const onSubmit = () => { console.log("submit!"); }; </script> <!-- 样式层 --> <style lang="" scoped> </style>

2.表单验证

:rules=“rules 
  
  
  
  
  
  ” 绑定规则

ref=“formRef
  
  
  
  
  
  
 ” 获取el-form表单组件实例对象

prop=“username
 


 


 


 


 


 


” 关联指定对象

show-password 密码显示图标—–小眼睛 <el-form :rules="rules" ref="formRef" :model="form" class="w-[250px]"> <el-form-item prop="username"> <el-input v-model="form.username" placeholder="请输入用户 名"> <template #prefix> <el-icon><UserFilled /></el-icon> </template> </el-input> </el-form-item> <el-form-item prop="password"> <el-input type="password" v-model="form.password" placeholder="请输入密码" show-password > <template #prefix> <el-icon><Lock /></el-icon> </template> </el-input> </el-form-item> <el-form-item> <el-button round color="#626aef" class="w-[250px]" type="primary" @click="onSubmit" >登 录</el-button > </el-form-item> </el-form> import { reactive, ref } from "vue"; const form = reactive({ username: "", password: "", }); // 验证规则 const rules = { username: [ { required: true, message: "用户名不能为空", trigger: "blur", }, ], password: [ { required: true, message: "密码不能为空", trigger: "blur", }, ], }; // 获取form元素节点对象 const formRef = ref(null); const onSubmit = () => { formRef.value.validate((valid) => { if (!valid) { return false; } console.log("验证通过"); }); };

2.表单前后端数据交互