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/exportdefaultdefineConfig({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.cssimport'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
})// 暴露导出exportdefault 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.cssimport'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/exportdefaultdefineConfig({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
})// 暴露导出exportdefault 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
})// 暴露导出exportdefault 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 refconst form =reactive({username:"",password:"",});constonSubmit=()=>{
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);constonSubmit=()=>{
formRef.value.validate((valid)=>{if(!valid){returnfalse;}
console.log("验证通过");});};

2.表单前后端数据交互