使用Vite搭建Vue3+ElementUI-Plus项目过程

本文主要记录使用Vite搭建一个Vue3+ElementUI-Plus,以及集成Vue Router的过程。本次搭建过程的Nodejs版本为 V16.14.2

创建项目

初始化项目

使用vite创建一个vite+vue的项目

npm init vite@latest my-vue-app -- --template vue

注意:npm7+后面需要多添加的双横杠
my-vue-app是项目的名称,可以根据自己的需要修改,后面--template vue表示创建一个vue模板项目。

添加依赖并运行

然后进入到刚刚创建的项目目录中安装依赖,并运行:

cd my-vue-app
npm install
npm run dev

经过上面几步一个简单的Vite+Vue项目就搭建并运行完成了。

添加路由

为了后续的使用方便,添加路由的依赖并进行配置

添加依赖

这里我们使用最新的Vue Router 版本

npm install vue-router@4

添加路由配置文件

添加完路由依赖以后需要在src目录下创建一个router文件夹,以及在router文件夹内创建一个它的配置文件——index.js,下面是index.js文件内容:

// 路由文件
import { createRouter, createWebHistory } from "vue-router";

import Home from '../views/Home.vue'

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})


router.beforeEach((to,from)=>{
    // if(to.meta.requireAuth) {
    //     let token = localStorage.getItem('auth-system-token');
    //     let isLogin = localStorage.getItem('auth-system-login');
    //     if(!token||!isLogin){
    //         return {
    //             path: '/login'
    //         }
    //     }
    // }
})

export default router;

需要注意的是在最新的Vue Router中创建路由和使用历史模式的方法都发生了改变,其余使用方式大致相同。

在main.js中添加路由

import { createApp } from 'vue'
import App from './App.vue'
import Router from './router/index.js'

createApp(App).use(Router).mount('#app')

添加Home页面进行测试

在上面的index.js文件中配置了Home这个页面,下面我们创建一下,在src目录下创建文件夹views,然后在其添加Home.vue,内容如下:

<template>
    <div class="home">
        <h1>Home Pageh1>
    div>
template>
<script>
export default {
    data(){
        return{}
    }
}
script>

然后在App.vue中使用router-view进行路由,让其显示

//App.vue
<script setup>
// This starter template is using Vue 3 
                    
                    

你可能感兴趣的:(随笔,elementui,vue.js,前端,vite)