目录
前言
本人职场小白,公司让学习Vite和Vue3并搭建项目Demo,借这个机会自己尝试写写博客,主要目的是搭项目,所以原理性的知识没有过多阐述,写博客时也根据步骤复现了,对于新手直接跟着操作就可以把项目搭起来,少走了很多弯路,希望对大家有帮助。
文中参考链接都有附上,参考时可以看看,如果有任何错误或意见也欢迎大家指点。
项目码云Gitea地址
Vite-Demo: 使用vite2.0及vue3.0并集成Element Plus,开发后台管理系统demo。https://gitee.com/YG-CST/vite-demo
其他文章
Vite2+Vue3学习笔记(一):Vue3.0项目搭建及配置过程_YGいくこさん的博客-CSDN博客
二、引入Vue-Router
1.安装Vue-Router
普通版:npm i vue-router
最新版:npm i vue-router@next
推荐安装最新版。
-
package.json
{
"name": "test-demo-1",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"element-plus": "^1.2.0-beta.3",
"sass": "^1.43.5",
"scss": "^0.2.4",
"vue": "^3.2.16",
"vue-router": "^4.0.12"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
"vite": "^2.6.4"
}
}
2.准备视图页面
-
src/App.vue
<template>
<div class="container">
<router-view></router-view>
</div>
</template>
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
// import HelloWorld from "./components/HelloWorld.vue";
</script>
<style>
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background-color: #f0f2f5;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
.container {
margin: 0 auto;
text-align: center;
}
</style>
-
src/components/Login.vue
<template>
<div style="padding: 50px 0 0">
<img src="../assets/logo.png" alt="" />
<h1 style="font-size: 50px; font-weight: bolder">Vite-Demo</h1>
</div>
<el-form
ref="loginForm"
:model="loginForm"
:rules="rules"
label-width="80px"
class="login"
@keyup.enter.native="submitForm('loginForm')"
>
<el-form-item label="帐号" prop="email">
<el-input v-model="loginForm.email"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="loginForm.password" show-password></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
<el-button @click="resetForm('loginForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
loginForm: {
email: "",
password: "",
},
rules: {
email: [
{
required: true,
message: "Please input email address",
trigger: "blur",
},
{
type: "email",
message: "Please input correct email address",
trigger: ["blur", "change"],
},
],
password: [
{
required: true,
message: "Please input password",
trigger: "blur",
},
{
min: 12,
max: 30,
message: "Length should be 12 to 30",
trigger: "blur",
},
],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$message.success("Login successfully! Welcome!");
this.$router.push("/"); // HelloWorld.vue在路由配置文件中定义的路径
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};
</script>
<style scoped>
.login {
width: 500px;
background-color: #ffffff;
border-radius: 10px;
margin: 50px auto;
padding: 50px;
box-shadow: 10px 10px 40px 0px rgba(0, 0, 0, 0.1);
}
h1 {
color: var(--el-color-primary);
}
</style>
运行项目
3.Vue-Router配置文件
-
src/router/index.js
import { createRouter, createWebHistory } from "vue-router";
const routerHistory = createWebHistory();
const router = createRouter({
history: routerHistory,
routes: [{
path: '/login',
component: () =>
import ("../components/Login.vue")
}, {
path: "/",
component: () =>
import ("../components/HelloWorld.vue")
}
]
});
export default router;
4.项目入口文件引入Vue-Router
-
src/main.js
// 引入Vue-Router
import Router from './router';
app.use(Router);
Login.vue输入账号密码后登录,自动跳转至HelloWord.vue。
5.完善路由配置
用户访问空路径时跳转首页:localhost:5000,
访问未定义路径时跳转404页面:localhost:5000/e。
const router = createRouter({
history: routerHistory,
routes: [{
path: "/login",
name: "login",
component: () =>
import ("../components/Login.vue")
}, {
path: "/", // 父级路径
name: "main",
component: () =>
import ("../components/Main.vue"),
children: [{
path: "/", // 空路径路由的路径与父级路径保持一致,否则会显示Main.vue,没有渲染router-view
redirect: "/appList"
}, // 定义空路径,用户访问localhost:5000时跳转至首页
{
path: "/appList",
name: "appList",
component: () =>
import ("../views/AppList.vue")
}
]
}, {
path: "/:pathMatch(.*)*",
name: "notFound",
component: () =>
import ("../components/NotFound.vue")
}]
});