一、使用vite构建项目
1.运行创建项目命令
# 使用 npm
npm create vite@latest
# 使用 yarn
yarn create vite
# 使用 pnpm
pnpm create vite
2.填写项目名字与选择项目框架、语言限制类型
1.填写项目名称
2.选择框架vue
3.选择TypeScript
4.创建成功
二、安装路由
1.vscode打开项目,安装router,less,less-loader,@types/node
vue3需要安装4.0以上版本
vue2最好安装4.0以下版本
#安装路由
npm i vue-router -S
#安装scss
npm i sass sass-loader -D
#为node内置包添加TS类型声明
npm i @types/node -D
#安装pinia
npm install pinia
2.配置router文件(src目录下新建一个router文件夹,在router文件夹里新建一个index.ts文件,代码如下:)
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// 1. 配置路由
const routes: Array<RouteRecordRaw> = [
{
path: "/", // 默认路由 home页面
component: () => import("../views/home/index.vue"),
},
];
// 2.返回一个 router 实列,为函数,配置 history 模式
const router = createRouter({
history: createWebHistory(),
routes,
});
// 3.导出路由 去 main.ts 注册 router.ts
export default router
3.在main.ts中引用router下的index.ts
// import { createApp } from 'vue' // 安装unplugin-auto-import 可注释
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia' // 引入pinia
import router from "./router/index" // 引入router
const app = createApp(App)
app.use(createPinia())
.use(router)
.mount('#app')
4.app.vue中添加路由组件router-view
<template>
<router-view></router-view>
</template>