vite 搭建vue3 TS项目初始框架

news2024/11/18 13:39:54

仓库地址：

一.搭建项目

1.安装 Vite：

2.创建 Vue 3 项目：

3.进入项目目录：

4.安装依赖：

5.运行项目：

6.流程实操

二.修改项目结构，显示自定义的页面

1.整理静态样式文件

1.1.在 src/assets 文件下新建两个文件夹分别存放后续相关图片和样式，images,style

1.2.将style.css移入新建的style文件中，修改main.ts 的引入

2.修改vite.config.ts 文件，使用@ 代替/src

3.创建 view 文件夹，存放后续相关页面文件

3.1.创建自定义的首页

3.2.修改显示路径，将 home 在 App.vue页面引入（目前还没有添加router路由模块）

3.3.修改tsconfig.json 文件

三.后续相关模块添加

1.element plus 组件库以及图标添加

2.router 路由模块添加

3.添加layout 布局

4.一些富文本框添加使用

仓库地址：

gitee:vue3-TS-model: 用于从零搭建模板使用 (gitee.com)

github:Cong0925/vue3-ts-model: 从零搭建vue3 TS项目模板 (github.com)

一.搭建项目

1.安装 Vite：

使用 npm 或 yarn 全局安装 Vite。

# 使用 npm
npm install -g create-vite

2.创建 Vue 3 项目：

准备一个空文件夹，执行以下命令

运行以下命令创建一个新的 Vue 3 项目。

create-vite your-project-name --template vue-ts

请将 your-project-name 替换为你的项目名称。--template vue-ts 表示使用 Vue 3 和 TypeScript 模板。

3.进入项目目录：

cd your-project-name

4.安装依赖：

npm install

5.运行项目：

npm run dev

这将启动开发服务器，你可以在浏览器中访问 http://localhost:端口号 查看你的应用。

6.流程实操

二.修改项目结构，显示自定义的页面

1.整理静态样式文件

1.1.在 src/assets 文件下新建两个文件夹分别存放后续相关图片和样式，images,style

1.2.将style.css移入新建的style文件中，修改main.ts 的引入

2.修改vite.config.ts 文件，使用@ 代替/src

3.创建 view 文件夹，存放后续相关页面文件

3.1.创建自定义的首页

后续大概结构如下，home作为首页，如果还有其他功能页面如新闻页，通知页等，都可以类似，文件夹是功能的名字，下面第一个文件是index.vue作为入口，然后，相关的其他可以拆散的功能都放到components文件夹下。

3.2.修改显示路径，将 home 在 App.vue页面引入（目前还没有添加router路由模块）

修改如下，

<template>
  <Home></Home>
</template>

<script setup lang="ts">
    import Home from '@/views/home/index.vue'
</script>

<style >

</style>

如果此时出现如下红线，但是，运行项目可以正常显示

3.3.修改`tsconfig.json` 文件

应该要修改tsconfig.json 文件，添加我们前面修改的映射，可以添加如下

 "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }

也可以直接使用如下

{
  "compilerOptions": {
    // TypeScript 类型声明文件，包含 Node.js 类型
    "types": ["node"],
    // 目标 ECMAScript 版本
    "target": "ES2020",
    // 启用类字段定义
    "useDefineForClassFields": true,
    // 模块类型
    "module": "ESNext",
    // 编译时可用的库
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    // 跳过声明文件的类型检查
    "skipLibCheck": true,

    /* Bundler mode（打包器模式） */
    // 模块解析策略（在 bundler 模式下使用）
    "moduleResolution": "bundler",
    // 允许导入 TypeScript 文件时省略后缀
    "allowImportingTsExtensions": true,
    // 允许导入 JSON 文件作为模块
    "resolveJsonModule": true,
    // 将每个文件视为独立的模块
    "isolatedModules": true,
    // 不生成输出文件
    "noEmit": true,
    // 保留 JSX 代码
    "jsx": "preserve",

    /* Linting（代码检查） */
    // 开启所有严格类型检查选项
    "strict": true,
    // 报告未使用的局部变量
    "noUnusedLocals": true,
    // 报告未使用的函数参数
    "noUnusedParameters": true,
    // 报告在 switch 语句中的 case 语句贯穿
    "noFallthroughCasesInSwitch": true,

    // 基准 URL，用于解析非相对模块名称
    "baseUrl": ".",
    // 路径映射，用于将导入路径映射到基准 URL 下的特定路径
    "paths": {
      "@/*": [
        "src/*"
      ],
      "element-plus/*": ["node_modules/element-plus/*"]
    }
  },
  // 需要进行编译的文件路径模式
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
  ],
  // 引用其他 TypeScript 配置文件的路径
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

此时，项目的大概框架就已经完成，可以根据自己的需求进行页面的初步尝试。