首先我们下载安装router,less / scss,pinia,axios, element / Ant Design Vue,Echarts 以及如何配置@别名,自定义组件
npm
npm create vite@latest
yarn
yarn create vite
然后安装依赖
成功后
在src下创建一个 routes 文件夹,再创建一个 index.ts 文件
import { createRouter, createWebHistory } from "vue-router"; let routes= [ { path: '/', name: 'home', //使用import可以路由懒加载,如果不使用,太多组件一起加载会造成白屏 component: () => import('../view/homeView.vue') }, //{ //配置404页面 //path: '/:catchAll(.*)', //name: '404', //component: () => import(''), //} ] // 路由 const router = createRouter({ history: createWebHistory(), routes }) // 导出 export default router
路由等 main.js
引入
import { createApp } from 'vue' import App from './App.vue' //routes import router from "./routes/index"; const app= createApp(App) //routes app.use(router) app.mount('#app')
一开始 app.vue是默认呈现页面所有,如果在其他路由写东西不会呈现出来,除非app.vue引入标签 创建引入路由