vue3-使用vite构建vue3+ts项目

原创已于 2023-05-12 14:35:25 修改 · 747 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-05-11 16:26:26 首次发布

vue3+vite+TypeScript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用Vite初始化Vue项目，选择TypeScript，并安装vue-router、less、less-loader和@types/node。接着，详细讲述了配置路由的步骤，包括创建router文件夹，编写index.ts文件，并在main.ts中注册路由器。最后，提到了在App.vue中添加router-view组件，并引入Pinia状态管理库。

一、使用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>