vue项目实战经验，相关库的安装，继续完善-Toy模板网

这篇具有很好参考价值的文章主要介绍了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

<!-- 视图层 -->
<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 密码显示图标—–小眼睛文章来源地址https://www.toymoban.com/news/detail-475845.html

<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.表单前后端数据交互

到了这里，关于vue项目实战经验，相关库的安装，继续完善的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

vue项目实战经验，相关库的安装，继续完善

前言

项目介绍

node.js的搭建

1.node官网下载

2.npm 淘宝镜像安装

vite项目搭建

1.vite官网和介绍

2.创建vue3项目

Element Plus UI库引入

1. Element Plus网站

2.库安装

3.引入UI库文件

windicss 框架

1.网站

2.安装

3.Vite 配置中添加插件，和Vite 入口文件中导入

vue-router 路由

1.网站

2.安装

全局配置

路径别名设置

添加404页面

登录页面布局

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

2.表单验证

2.表单前后端数据交互

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

vue项目实战经验，相关库的安装，继续完善

前言

项目介绍

node.js的搭建

1.node官网下载

2.npm 淘宝镜像安装

vite项目搭建

1.vite官网和介绍

2.创建vue3项目

Element Plus UI库引入

1. Element Plus网站

2.库安装

3.引入UI库文件

windicss 框架

1.网站

2.安装

3.Vite 配置中添加插件 ，和Vite 入口文件中导入

vue-router 路由

1.网站

2.安装

全局配置

路径别名设置

添加404页面

登录页面布局

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

2.表单验证

2.表单前后端数据交互

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

3.Vite 配置中添加插件，和Vite 入口文件中导入