vite+vue3搭建项目流程

1. 安装Node

2. 使用npm创建目录

npm create vite@latest 项目名称 -- --template vue

3. 配置@路径 (path模块是node.js内置的功能，但是node.js本身并不支持ts，所以需要手动安装)

npm install @types/node --save-dev

　　打开vite.config.js（Ts版本的就是vite.config.ts）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:{
      "@" : resolve("src")
    }
  }
})

4. 安装vue-router

npm install vue-router@4

5. 在src下新建router目录，在此下新建index.js

import {createRouter, createWebHashHistory} from "vue-router";

import Home from '@/page/Home.vue'  // 常规引入
const routes = [
    // 重定向。默认首页是加载home组件
    {
      path: '',
      redirect: '/home'
    },
    {
        path: '/home',
        component: Home,
        children:[
            //  以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套，而不必使用嵌套的 URL
　　　　　　　{
　　　　　　　　path: 'home1',
　　　　　　　　component: () => import('@/page/home1')
　　　　　　　}
        ]
    },

　　{
       path: '/layout',
       component: () => import('@/page/Layout.vue')    // 动态引入
    },
    {
       path: '/layout2',
       component: () => import('@/page/Layout2.vue')
    }

] const router = createRouter({ routes, history: createWebHashHistory() }) export default router

6. 在main.js里引入一下

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

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

7. 页面使用

 　　新建layout和layout2页面(路由里已添加过)， 在App页面使用

  　　App.vue

　　router-view用来展示路由文件中匹配到的组件页面

<template>
    <router-view></router-view>
    <button @click="layout">去layout</button>
    <button @click="layout2">去layout2</button>
</template>

<script setup>
import router from "./router";
const layout = () => {
    router.push('/layout')
}
const layout2 = () => {
    router.push('/layout2')
}
</script>

页面初始页

 

 

 点击后

 

 

 

 

 

 8. 安装element-plus

 npm install element-plus --save

9. 再去main.js里注册下

import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'

createApp(App).use(router).use(ElementPlus).mount('#app')