Vue3.0 + Vite2.0 + Ts4.0搭建一款简约版本的移动端博客

最新推荐文章于 2024-08-17 12:39:26 发布
最新推荐文章于 2024-08-17 12:39:26 发布
阅读量574 收藏 2
点赞数 1
文章标签： vue.js typescript nodejs mongodb javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sujb8540/article/details/120276066
版权
本文档介绍了如何使用Vue3.0、Vite2.0和Typescript搭建一个移动端博客。项目采用最新的语法特性，如<script setup>，并利用tsx编写公共组件。此外，还涉及了rem适配、CSS前缀添加、Vuex、Vue-Router的使用，以及后端接口服务的配置，依赖于Node.js和MongoDB。
摘要由CSDN通过智能技术生成

vue3-vite2-blog-h5

一款简约版本的移动端博客。前端项目主要是采用Vue3最新语法糖<script setup>和Vant3.0来搭建的；采用Tsx来渲染公共组件；采用Vite2.0来构建、打包。后端项目主要采用Node框架Koa2以及MongoDB数据库来设计的。

  1. PC 端博客线上预览地址：http://www.rasblog.com
  2. PC 端博客仓库地址：GitHub - Sujb-sus/vue-node-mongodb-blog: vue + node + mongodb + webpack5 + koa2 从开发到上线搭建一款简约的个人博客系统（前后端分离）
  3. H5 端博客仓库地址：GitHub - Sujb-sus/vue3-vite2-ts-blog-h5: 一款简约版本的移动端博客；主要是采用Vue3最新语法糖<script setup>和Vant3.0来搭建的；采用Tsx来渲染公共组件；采用Vite2.0来构建、打包。

项目预览

 

项目结构

技术运用

一、rem 适配

  1. 安装插件yarn add amfe-flexible postcss-pxtorem -S
  • amfe-flexible是配置可伸缩布局方案，主要是将 1 rem 设为 viewWidth / 10
  • postcss-pxtorem是 postcss 的插件，用于将像素（px）单元生成 rem 单位
  1. 在 main.ts 导入amfe-flexible
import "amfe-flexible";
  1. 在postcss.config.js配置postcss-pxtorem
module
最低0.47元/天 解锁文章
「已注销」
关注
Vite2.0创建项目（Vue3.0 + ts + element-ui）
qq_40026668的博客
03-06 910
安装环境 源码地址 npm i pnpm -g 创建项目 npm init @vitejs/app --template vue-ts 配置依赖 复制下面代码替换package.json //package.json { "name": "vite-project", "version": "0.0.0", "scripts": { "dev": "vite", "build": "vite build", "serve": "vite preview" },
vite2.0+vue3.0+ts
yang_web的博客
07-16 349
vite2.0+vue3.0+ts 1、template中可以有多个根元素，以前只能包在一个父容器中 <template> <p>{{count}}</p> <el-button type="primary" @click="clickTo">子组件</el-button> <el-button type="primary" @click="go">跳转</el-button> {{state.sum}} <van-b
搭建基于 Vite + Vue3 + TS 项目模板
最新发布
qq_45897239的博客
08-17 962
一、项目概述 二、创建项目 三、配置路径别名 四、配置路由 五、引入状态管理工具 Pinia 六、引入 UI 框架 Element-plus 七、添加全局接口配置文件 八、集成 Axios 九、集成 VueUse 十、集成 Less
目前主流框架——vite+vue+ts
qq_57320832的博客
05-07 1753
这种架构的优势很明显，就是体量小，结构清晰等，但也有一些缺点，例如有些轮子无法使用，组件化、模块化开发非常不便影响开发效率等。与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 3.0 版本全面支持 TypeScript 语法，对生命周期钩子进行了优化和剔除，加上工具 setup 的语法糖，以及 vue 单页面多个根元素的扩展，使得代码更加精简和有条理。Vite + Vue + TypeScript 是一种前端框架组合，它们各自具有独特的特点和优势，结合起来能够提供强大的前端开发能力。
Vue+Vite+TS
weixin_44374471的博客
11-14 4368
【代码】Vue+Vite+TS。
Vite+Vue3+TS打包一个npm组件，并支持IDE的代码提示功能
写好每一行代码
11-01 1596
Vite+Vue3+TS打包npm组件并上传到npm官网，同时希望组件在使用时，组件的各参数可以被ts识别，且在ide中有正确提示；
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板
10-15
总之，"基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板"是一个结合了前沿技术的项目，它集成了前端开发的最佳实践，为开发者提供了一个高效、稳定且美观的开发起点。通过深入理解和运用这些技术...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+...
vue+vite+ts.rar
08-11
Vite + TS + Vue3.0项目搭建包
vite+vue3+ts使用i18n
weixin_59916662的博客
11-15 7072
vite+vue3+ts使用i18n
vite+vue3+ts 手把手教你创建一个vue3项目
热门推荐
weixin_59916662的博客
10-17 6万+
基本全程cv安装router，less / scss，pinia，axios，element / Ant Design Vue，Echarts ，mockjs，以及如何配置@别名，自定义组件，vue-devtools插件。
vite+vue3+ts【创建项目】基础配置
weixin_48390516的博客
04-09 6423
vite+vue3+ts
vite+vue3+Ts搭建基础项目框架
qingshui_zhuo的博客
06-13 2551
随着前端技术的更新，程序员们的技术栈也要不断跟上，本来想躺平，不料却被推着走。上个月开发团队新来一个项目需求，要求开发技术栈vue2更换成vue3，毫无准备的小编一脸懵，嗯？怎么说 换就换了？没提前通知也没给时间学习，直接上手就是干？就离谱0.0！没办法，后面就只能跟着会vue3的同事一起开发，参照同事写的模块开发，结果发现除了有些写法不太一样其他的也都差不多，意识到这个之后就不慌了，然后就是边学习边开发。
vite + TS + Vue3.0项目搭建
这是个问题
05-14 265
环境 Node.js 版本 12及以上 npm 版本 6及以上 搭建项目 npm init @vitejs/app vite-vue3-starter --template vue-ts 一句话直接把项目名称及所用模板指定好 跑起来项目 npm install npm run dev 4. 修改vite.config.ts文件（Vite配置） import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue'..
用vue3.0 +vite +pinia +ts搭建一个vue的架子
05-24
好的，下面是搭建 Vue 3.0 + Vite + Pinia + TypeScript 的步骤： 1. 安装 Node.js，推荐使用 LTS 版本。 2. 安装 Vite： ``` npm init vite-app my-project ``` 这里我们使用 Vite 初始化一个新项目，名称为 my-project。 3. 安装依赖： ``` cd my-project npm install ``` 4. 安装 Vue 3.0： ``` npm install vue@next ``` 5. 安装 Pinia： ``` npm install pinia ``` 6. 安装 TypeScript： ``` npm install --save-dev typescript ``` 7. 配置 TypeScript： 在项目根目录下创建 `tsconfig.json` 文件，内容如下： ```json { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "sourceMap": true, "moduleResolution": "node", "esModuleInterop": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx"], "exclude": ["node_modules"] } ``` 8. 安装 Pinia Devtools（可选）： ``` npm install @pinia/devtools --save-dev ``` 9. 在 `main.ts` 中进行配置： ```typescript import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' const app = createApp(App) // 创建 Pinia 实例 const pinia = createPinia() // 将 Pinia 实例挂载到 app 上 app.use(pinia) app.mount('#app') ``` 10. 编写组件： 在 `src` 目录下创建一个 `components` 目录，然后创建一个 `HelloWorld.vue` 组件： ```vue <template> <div> <h1>Hello, {{ name }}</h1> <button @click="increase">Increase</button> <p>{{ count }}</p> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' import { useStore } from 'pinia' export default defineComponent({ name: 'HelloWorld', setup() { const store = useStore() const name = store.getters.getName const count = store.state.count const increase = () => { store.commit('increase') } return { name, count, increase } }, }) </script> ``` 11. 在 `App.vue` 中使用组件： ```vue <template> <HelloWorld /> </template> <script lang="ts"> import { defineComponent } from 'vue' import HelloWorld from './components/HelloWorld.vue' export default defineComponent({ name: 'App', components: { HelloWorld, }, }) </script> ``` 12. 运行项目： ``` npm run dev ``` 至此，我们已经成功搭建了 Vue 3.0 + Vite + Pinia + TypeScript 的项目。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值