基于element-plus与Vue Router快速构建基本nodejs项目

拉取 element-plus-vite-starter 源码

基础使用

git clone https://github.com/element-plus/element-plus-vite-starter
cd element-plus-vite-starter
npm i
npm run dev

打包构建

npm run build

拉取包 vueRouter

安装包

npm install vue-router@4

新建一个视图

新建 src/views 文件夹，在文件夹中新建 index.vue

<template>
    1111
</template>

创建路由

新建 src/routes.ts 路由文件

import { createWebHistory, createRouter } from 'vue-router'

import index from './views/index.vue'

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

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

export default router

引入路由

修改 src/main.ts 文件

import { createApp } from "vue";
import App from "./App.vue";
import router from "./routes";

// import "~/styles/element/index.scss";

import ElementPlus from "element-plus";
// import all element css, uncommented next line
import "element-plus/dist/index.css";

// or use cdn, uncomment cdn link in `index.html`

import "~/styles/index.scss";
import "uno.css";

// If you want to use ElMessage, import it.
import "element-plus/theme-chalk/src/message.scss";

const app = createApp(App);
app.use(router);
app.use(ElementPlus);
app.mount("#app");

使用路由组件

修改 src/App.vue

<template>
  <main>
    <RouterView />
  </main>
</template>