搭建vue3+ts项目+基础配置

淩亂°似流年 2024-04-20 22:13 27阅读 0赞

## 创建vue3项目 ##

// 创建项目命令

// 创建项目命令
    pnpm create vite

![选择项目名;Vue;TS或者JS][Vue_TS_JS]

###### 创建成功 ######

// 进入项目

// cd 文件夹名
    cd manage

###### 安装sass ######

// 安装sass

// 安装sass
    pnpm i sass -D

**注意** ：安装是sass，不要写错

###### 安装路由 ######

// 安装router
    pnpm i vue-router -D

**注意** ：装好后在package.json文件中查看vue-router版本

###### 配置路径 识别@符号 ######

// 在vite.config.ts文件中配置
    // 从node path中引入resolve
    import { resolve } from "path";
    // 在defineConfig中配置
    resolve:{
        alias:{
          "@":resolve(__dirname,"src")
        }
      }

![识别@符号][d4a58fad1d4e4429b02a58df69803802.png]

###### 在tsconfig.json中处理@符号 ######

// 在tsconfig.json文件中配置
    // 注意配置到compilerOptions里面
    "paths": {"@/*": ["./src/*"]

###### 配置路由 ######

// 先创建router文件夹，创建index.ts
    // 先引入约束，路由工厂，路由模式
    import { createRouter,createWebHashHistory,RouteRecordRaw } from "vue-router";
    // 配置路由
    let routes:Array<RouteRecordRaw> = [
        
    ]
    // 创建路由实例和哈希模式
    const router = createRouter({
        routes,
        history:createWebHashHistory()
    })
    // 暴露出去
    export default router

##### main.ts #####

// 在main.ts中全局注册
    import router from "@/router";
    app.use(router)

![main中注册router][main_router]

#### 启动项目 ####

其他的页面自己根据需求创建并且对应路由就好了

// 启动项目命令
    pnpm run dev
    // !!!注意要在package.json文件中查看自己项目的启动命令

[Vue_TS_JS]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/79cc9646ae9b4c5092c06e5bb7122d4b.png
[d4a58fad1d4e4429b02a58df69803802.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/180f702087fc4de79b688b9fcaa04a01.png
[main_router]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/67bef5141979425fade5677321d812e8.png