使用vite+vue3创建项目
npm init vite@latest myVue //myVue为项目名称
按提示选择vue和ts,如下图
![](https://i-blog.csdnimg.cn/blog_migrate/b2d8bdc873691c9e85c1423f74a2928d.png)
按提示切换到项目目录、添加依赖并运行项目
cd myVue
npm i
run run dev
安装路由vue-router
npm i vue-router
在src下添加路由文件router,如下图所示
![](https://i-blog.csdnimg.cn/blog_migrate/acf2006724c7046d2808d36df5093956.png)
路由设置代码如下
import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [
{
path: "/",
name: "Login",
component: () => import("../views/login/index.vue"), //动态加载组件
},
{
path: "/home",
name: "Home",
component: () => import("../views/home/index.vue")
}
];
//设置白名单免登录页面
const whiteList = [
{ name: 'Login' }
]
const router = createRouter({
history: createWebHashHistory(),
routes,
});
//路由守卫
let isLogin:Boolean = true //模拟登录状态,一般判定是否存在token
router.beforeEach(async (to, from, next) => {
if (
// 检查用户是否已登录
!isLogin &&
// 判断是否免登录路由
whiteList.some(item => item.name== to.name)
) {
// 将用户重定向到登录页面
next({ name: 'Login' })
} else next()
})
export default router
main.ts中添加路由
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/routes' //引入路由
createApp(App).use(router).mount('#app') //设置使用路由
然后在app.vue中使用router-view添加路由展示
<script setup lang="ts">
</script>
<template>
<router-view></router-view>
</template>
<style scoped>
</style>
引入element-plus
npm install element-plus --save
使用按需引用中的自动导入需要安装额外的三个插件:unplugin-vue-components、unplugin-auto-import和unplugin-element-plus
npm i unplugin-vue-components unplugin-auto-import unplugin-element-plus
注:安装unplugin-element-plus前需要添加sass和sass-loader依赖
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ElementPlus from 'unplugin-element-plus/vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
ElementPlus({
useSource: true
}),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
})
]
})
注:注意版本问题,本人开始安装的element-plus版本为1.x引用样式报错,测试可行配置如下图:
![](https://i-blog.csdnimg.cn/blog_migrate/0662c37eaf8c72db312ae06650d4abcb.png)
package.js代码如下:
{
"name": "v3.0",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"element-plus": "^2.2.36",
"sass": "^1.59.2",
"vue": "^3.2.45",
"vue-router": "^4.1.6"
},
"devDependencies": {
"@types/node": "^18.15.0",
"@vitejs/plugin-vue": "^4.0.0",
"typescript": "^4.9.3",
"unplugin-auto-import": "^0.15.1",
"unplugin-element-plus": "^0.7.0",
"unplugin-vue-components": "^0.24.1",
"vite": "^4.1.0",
"vite-plugin-style-import": "^0.10.1",
"vue-tsc": "^1.0.24"
}
}
页面、组件内按需使用组件,页面代码如下:
<script setup lang="ts">
import router from '../../router/routes'
import { reactive } from 'vue'
//引入需要使用的组件
import {ElInput,ElForm,ElFormItem,ElButton,ElMessage } from 'element-plus'
const form=reactive({
name:'',
password:''
})
function goNext(){
console.log('123')
ElMessage({
type:"success",
message: '登录成功',
})
router.push({
path:"/home"
})
}
</script>
<template>
<div class="login">
<div class="login-box">
<ElForm :model="form" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password"></el-input>
</el-form-item>
</ElForm>
<el-button class="loginbox-btn" size="large" @click="goNext">登录</el-button>
</div>
</div>
</template>
<style lang="scss">
.login{
width: 100vw;
height: 100vh;
background-image: url('../../assets/login_back.jpg');
background-size: cover;
overflow: hidden;
border-image-repeat:no-repeat;
display: flex;
justify-content: center; //x轴居中
align-items:center; //y轴居中
&-box{
width: 300px;
height: 300px;
padding: 60px;
background-color: rgba($color: #fff, $alpha: 0.8);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.el-button{
width: 280px;
}
}
}
</style>
到此完成!!!