从零开始搭建基于vite的vue项目

从零开始搭建基于vite的vue项目

开始 | Vite 官方中文文档 (vitejs.dev)

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

  

  运行上述三条命令，打开网址链接

  

yarn create vite my-vue-app --template vue

(其中my-vue-app既是项目名称也是文件夹名称)

引入element-ui

安装 | Element Plus (gitee.io)

npm install element-plus --save

按需导入：
快速开始 | Element Plus (gitee.io)

npm install -D unplugin-vue-components unplugin-auto-import

 

引入router

安装 | Vue Router (vuejs.org)

npm install vue-router@4 

import { createRouter, createWebHashHistory } from "vue-router"
export default createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      redirect: "/login"
    },
    // 登录
    {
      path: "/login",
      component: () => import('../views/Login/index.vue')
    },
  ]
})

// main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import VueRouter from './router'
VueRouter.beforeEach((to, from) => {
    document.title = 'webTest'
})

const app = createApp(App)
app.use(VueRouter)
app.mount('#app')