vite+vue3+typeScript+elementPlus(elementUI)搭建项目_使用vue3 + elementplus 快速搭建项目

使用vite+vue3创建项目

npm init vite@latest myVue //myVue为项目名称

按提示选择vue和ts，如下图

按提示切换到项目目录、添加依赖并运行项目

cd myVue
npm i
run run dev

安装路由vue-router

npm i vue-router 

在src下添加路由文件router，如下图所示

路由设置代码如下

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引用样式报错，测试可行配置如下图：

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>

到此完成！！！