Vue3+TS 博客前端项目解析与启动指南

于 2024-08-16 07:45:41 发布
阅读量886 收藏 10
点赞数 9
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gitblog_00396/article/details/141236908
版权

Vue3+TS 博客前端项目解析与启动指南

vue3-ts-blog-frontend基于 vue3 + ts + ant-design-vue 的个人博客项目地址:https://gitcode.com/gh_mirrors/vu/vue3-ts-blog-frontend

1. 项目的目录结构及介绍

src

这是项目的源码目录，包含了大部分的项目文件。

assets

存放项目所需的静态资源，如图片、字体等。

components

组件目录，封装可复用的 UI 组件。

plugins

插件目录，如第三方 UI 框架的封装和配置。

router

路由配置目录，负责定义页面路由规则。

store

状态管理目录，使用 Vuex 或 Pinia 来集中管理组件间共享的状态。

utils

工具函数集合，例如网络请求、日期处理等功能的封装。

views

页面视图目录，通常每个文件夹对应一个页面。

App.vue

项目的主要入口文件，相当于整个应用的根组件。

main.ts

应用启动文件，执行初始化操作，如启动应用、配置全局插件等。

2. 项目的启动文件介绍

main.ts

  • 描述: main.ts是项目的主启动文件，负责初始化 Vue 实例，并挂载到 HTML 的根元素。
  • 功能要点:
    • 导入核心依赖：导入 Vue、Vuex、Vuetify 等必要的框架或库。
    • 创建应用实例：通过 createApp() 方法创建 Vue 应用实例。
    • 注册全局组件和插件：包括自定义组件和第三方插件。
    • 挂载应用实例：将 Vue 实例挂载到 DOM 的某个元素上，使应用可见。

3. 项目的配置文件介绍

vite.config.js

  • 描述: Vite 配置文件，用于定义 Vite 编译和开发服务器的行为。
  • 关键设置:
    • base: 设置部署基础路径。
    • plugins: 添加或配置 Vite 插件，例如 vue, typescript 插件。
    • build: 控制编译选项，如目标环境、是否开启最小化等。

tsconfig.json

  • 描述: TypeScript 的配置文件，定义代码转换行为和语法检查规则。
  • 重要字段:
    • compilerOptions: 编译器选项，例如 target, module, jsx 等。
    • include: 列出要编译的文件或目录。
    • exclude: 列出不需要编译的文件或目录。

env.d.ts

  • 描述: TypeScript 的环境类型声明文件，添加全局变量类型声明。
  • 作用: 让 TypeScript 能识别某些全局变量，避免报错提示。

以上配置共同构成项目的基本结构，确保应用可以正常编译和运行。通过上述文件的合理配置，我们能够高效地构建和维护 Vue3+TS 的博客前端项目。

vue3-ts-blog-frontend基于 vue3 + ts + ant-design-vue 的个人博客项目地址:https://gitcode.com/gh_mirrors/vu/vue3-ts-blog-frontend

仲玫千Samson
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
搭建vue3+ts+vite项目
xhjtcflm的博客
07-10 936
JavaScript modules (import/export) 选择采用js模块引入或暴露开发。npx eslint --init 初始化。vue.js 选择采用vue.js框架开发。5.cd 项目、pnpm install 、pnpm run dev。（1）下载eslint：pnpm i eslint -D。（2）生成配置文件：eslint.cjs。一、创建项目及项目初始化。
Vue3+TS+Vite 入门指南
热门推荐
Moonoly的博客
05-03 1万+
最近尝试上手 Vue3+TS+Vite，对比起 Vue2 有些不适应，但还是真香~ Vue3 带来的变化主要有以下几个方面：
Vue3+Ts+Vite 项目搭建&项目说明
kiku
07-26 2979
如题。
【Vue3+Ts项目】硅谷甄选 — 搭建后台管理系统模板
m0_67992720的博客
12-01 2247
/ 登录接口需要携带参数ts类型// 登录接口返回的数据类型// 定义服务器返回用户信息相关的数据类型data: userPS关于import type引入的理解-CSDN博客。
vue3+TypeScript前端开发教程
qq_63310300的博客
01-05 2082
setup是Vue3中一个新的配置项，值是一个函数，它是“表演的舞台”，组件中所用到的：数据、方法、计算属性、监视…等等，均配置在setup中。
vue3+vite+TS配置EsLint
qq_62809806的博客
09-15 1070
vue3+vite+TS的EsLint配置
【Vue3】手把手教你创建前端项目 Vue3 + Ts + vite + pinia
weixin_44590591的博客
11-03 3136
手把手教你创建前端项目 Vue3 + Ts + vite + pinia
实战指南：Vue 2基座 + Vue 3 + Vite + TypeScript微前端架构实现动态菜单与登录共享
前端开发工程师
05-28 1348
在当今的前端开发中，微前端架构已经成为了一种流行的架构模式。本文将介绍如何结合Vue 2基座、Vue 3子应用、Vite构建工具和TypeScript语言，利用qiankun微前端框架实现动态菜单和登录共享功能的实战指南。
vue3 +vite+ts实战项目添加 eslint + prettier + lint-staged 踩坑指南
mrhaoxiaojun的博客
05-12 8300
初始化项目 // 创建一个空的 vue3-ts 项目, yarn create vite my-vue-app --template vue-ts // 安装依赖 cd my-vue-app && yarn // 默认是没有创建git仓库的，这里我们初始化一下 git init 这个模板是没有使用配置eslint和prettier的，接下来我们依次安装这些依赖。 集成eslint 首先我们安装eslint yarn add eslint -D 接下来初始化eslint: npx esl
VB计算机机房管理系统设计(源代码+系统).zip
08-18
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
毕业设计论文写作模板.zip
08-18
毕业设计 题目： 基于xxxxxx框架的设计与实现 姓 名: 学 号: 层 次: 本科 专 业: 软件工程 班 级: xx级软件工程01班 指导教师: 2022年5月 xxxx学院教务处 制 独创性声明 一、本设计是本人独立完成； 二、本设计没有任何抄袭行为； 三、若有不实，一经查出，请答辩委员会取消本人答辩资格。 承诺人（签名）： 年 月 日
基于springboot的高校心理教育辅导系统 源码+数据库（毕业设计）
08-18
基于Vue.js和SpringBoot的高校心理教育辅导系统是一个综合性的在线平台，旨在为高校学生、教师和管理员提供心理教育和辅导服务。该系统分为管理后台和用户网页端，支持多种角色使用，包括管理员、学生和教师。 辅导预约：学生可以通过该模块预约心理辅导服务，管理员可以查看和管理预约信息。 测评结果：系统提供心理测评工具，学生可以在线完成测评，系统自动生成测评结果供学生和教师查看。 试题和试卷：教师可以创建和管理试题库，设计试卷并组织在线考试，学生可以在线参加考试并查看成绩。 考试：系统支持在线考试功能，包括考试安排、考试监控、成绩统计等。 留言板：提供一个交流平台，学生、教师和管理员可以发布留言、交流心得和反馈意见。 录屏：https://www.bilibili.com/video/BV1Ct4y1d7L4 教程：https://space.bilibili.com/417412814/channel/collectiondetail?sid=2242844
POLYGON Dungeons - Low Poly 3D Art by Synty v1.9.2.unitypackage
最新发布
08-18
POLYGON Dungeons - Low Poly 3D Art by Synty v1.9.2
字节跳动：抖擞传统，短视频与传统文化研究报告
08-18
字节跳动：抖擞传统，短视频与传统文化研究报告
django admin 的一个主题 ，基于element-ui+vue开发，重写和优化90%以上的页面
08-18
django admin 的一个主题 ，基于element-ui+vue开发，重写和优化90%以上的页面。让django admin更符合国人的使用习惯。并且实现了不用修改任何代码为django admin换肤。100%兼容原生admin
基于springboot的足球俱乐部管理后台 源码+数据库（毕业设计）
08-18
基于Vue.js和SpringBoot的足球俱乐部管理后台是一个功能全面的系统，它分为管理后台和用户网页端，旨在为管理员和学员提供便捷的操作体验。管理员可以通过管理后台进行学员管理、教师管理、课程安排、课程签到等操作，同时还可以查看和处理商品信息以及足球商品订单。学员则可以通过用户网页端查看课程安排、进行课程签到、浏览商品信息并下单购买。整个系统采用前后端分离的架构，前端使用Vue.js进行开发，后端使用SpringBoot框架，确保了系统的高性能和可扩展性。 录屏：https://www.bilibili.com/video/BV1vw41177rR 教程：https://space.bilibili.com/417412814/channel/collectiondetail?sid=2242844
VB客运中心汽车售票管理系统设计(论文+源代码).zip
08-18
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
分享一款特别好看特别美的仿微博前端页面
08-18
分享一款特别好看特别美的仿微博前端页面
vue3+ts+vite+elementplus+Router+axios搭建前端项目框架
01-26
以下是使用Vue3 + TypeScript + Vite + Element Plus + Router + Axios搭建前端项目框架的步骤： 1. 首先，确保你已经安装了Node.js和npm。你可以在命令行中运行以下命令来检查它们的版本： ```shell node -v npm -v ``` 2. 创建一个新的项目文件夹，并在该文件夹中打开命令行。 3. 在命令行中运行以下命令来初始化一个新的Vite项目： ```shell npm init vite ``` 在初始化过程中，你需要选择Vue作为模板，选择TypeScript作为语言，并填写项目名称。 4. 进入项目文件夹，并安装所需的依赖： ```shell cd your-project-name npm install ``` 5. 安装Vue Router、Vuex和Axios： ```shell npm install vue-router@next vuex@next axios ``` 6. 在项目文件夹中创建一个新的文件夹，用于存放页面组件和路由配置文件。 7. 在src文件夹中创建一个新的文件夹，用于存放页面组件。 8. 在src文件夹中创建一个新的文件夹，用于存放路由配置文件。 9. 在src/router文件夹中创建一个新的文件，命名为index.ts，并在其中编写路由配置： ```typescript import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/Home.vue'; const routes = [ { path: '/', name: 'Home', component: Home, }, // 添加其他页面的路由配置 ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 10. 在src/main.ts文件中导入并使用Vue Router： ```typescript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` 11. 在src/views文件夹中创建一个新的文件，命名为Home.vue，并在其中编写一个简单的页面组件： ```vue <template> <div> <h1>Welcome to Home Page</h1> </div> </template> <script> export default { name: 'Home', }; </script> ``` 12.src/App.vue文件中添加一个路由出口，用于显示组件： ```vue <template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'App', }; </script> ``` 13. 在src/main.ts文件中导入并使用Element Plus： ```typescript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; createApp(App).use(router).use(ElementPlus).mount('#app'); ``` 14. 运行以下命令来启动开发服务器： ```shell npm run dev ``` 15. 打开浏览器，并访问http://localhost:3000，你将看到一个简单的页面，其中包含"Welcome to Home Page"的文本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

仲玫千Samson

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值