基于vue3+ts5+vue-router4+pinia2的PC端项目搭建教程

最新推荐文章于 2024-05-19 20:00:47 发布
最新推荐文章于 2024-05-19 20:00:47 发布
阅读量106 收藏
点赞数 2
分类专栏： vue3 ts Pinia 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/longxiaobao123/article/details/138646911
版权
vue3 同时被 3 个专栏收录
95 篇文章 2 订阅
订阅专栏
ts
39 篇文章 0 订阅
订阅专栏
Pinia
2 篇文章 0 订阅
订阅专栏

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

JackieChan_
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue3+Vite+TS+Pinia+ElementPlus+Router+Axios创建项目
qq_24484317的博客
02-14 1690
Vue3+Vite+Pinia+ElementPlus+Router+Axios创建项目
基于vue3+vue router+pinia+vant的H5旅游租房项目源码.zip
10-27
基于vue3+vue router+pinia+vant的H5旅游租房项目源码.zip
vite+vue3+ts+vue-router+pinia+axios+element-plus
zy_080400的博客
10-28 1389
vite + vue3 + ts + axios + vue-router + esline + prettier +axios + antd(ant-design-vue)
vue3+pinia+ts+vite+element-plus项目搭建--20220727
m0_49827178的博客
07-27 1358
仅供学习记录:vue3+pinia+vite+element-plus
最全最详细的使用vue3+vite+pinia+vue-router+ts+less+element-plus搭建前端项目教程
Liu_csdn_csdn的博客
08-22 2680
最全最详细的使用vue3+vite+pinia+vue-router+ts+less+element-plus搭建前端项目教程
vue3项目，vite+vue3+ts+pinia(3)-路由router
ybilss的博客
11-01 463
使用setup， router路由
详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)
热门推荐
qq_44423029的博客
08-17 4万+
超详细步骤vite创建vue3项目，技术栈vue3+ts+vite+element-plus+pinia，跟着做就搭出来了（保姆级）
从零开始搭建Vue3+Vite+TS+Router+Pinia脚手架
BDawn的专栏
11-04 893
从零开始搭建Vue3+Vite+TS+Router+Pinia脚手架
面试万字总结（Vue3+TS+Pinia+Vite+Vue-router4）持续更新
weixin_52901235的博客
02-03 1930
app.directive('lazy'，{ // app.directive('指令名‘，配置对象).......})泛型是可以在保证类型安全前提下，让函数等与多种类型一起工作，从而实现复用，常用于：函数、接口、class 中需求：创建一个 id 函数，传入什么数据就返回该数据本身(也就是说，参数和返回值类型相同)比如，id(10) 调用以上函数就会直接返回 10 本身。但是，该函数只接收数值类型，无法用于其他类型为了能让函数能够接受任意类型，可以将参数类型修改为 any。
一步步打造最新前端框架组合 —— vite+vue3+pinia+vue-router@4+setup+ts
jmszl1991的博客
02-08 4226
vue3+vite+ts+setup+pinia+scss最新前端框架组合
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版
04-03
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版，配合VSCode插件v3s snippets，助力业务快速开发.zip
vue3+vite5+vue-router+piniaPC与移动端，各种实用的插件库及对应示例.zip
04-03
vue3+vite5+vue-router+pinia，动态路由、权限管理、vw适配，路由切换PC与移动端，学习商用均可，配置简单，各种实用的插件库及对应示例.zip
基于深度学习算法的垃圾检测系统（YOLOv5 + Flask + Vue）
01-31
Vue3：采用 Vue3 + script setup 最新的 Vue3 组合式 API Element Plus：Element UI 的 Vue3 版本 Pinia: 类型安全、可预测的状态管理库 Vite：新型前端构建工具 Vue Router：路由 TypeScript：JavaScript 语言的超...
YOLOv5 + Flask + Vue实现基于深度学习算法的垃圾检测系统源码+数据库
02-21
YOLOv5 + Flask + Vue实现基于深度学习算法的垃圾检测系统源码+数据库 技术特性 深度学习 YOLOv5：高效、准确的目标检测算法，实时识别检测图像和视频中的各种对象 PyTorch：机器学习框架，以动态计算图为基础，具有...
vue中computed计算属性
最新发布
luna_H的博客
05-19 246
4.原理使用了Object.defineproperty(目标对象,名称,{get(),set(value)})5.watch默认监听一层，需要监听多级如对象中的值，需要添加深度监听deep:true。4.写法：第一种Vue实例中，第二种实例化vm.$watch("监听的属性",{})写法：监听的属性名(新值,旧值){}2.被Vue实例管理的函数最好都使用普通函数，不被Vue实例管理的函数最好都使用箭头函数，1.computed能做到的watch都可以，watch能做到的computed不一定能。
Vue3选项式和组合式生命周期说明
weixin_44072254的博客
05-16 512
setup -beforeCreate和created的统称，只在composition里面取消这两个，可以在这里进行数据请求。onUpdated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。updated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。beforeUpdate-更新前，可以在此更改数据。
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1166
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
vue中的事件
weixin_43390711的博客
05-16 166
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
vue3 + vite + js + vue-router4 + pinia + elementPlus + echarts5 搭建后台管理系统
05-01
好的，下面是搭建后台管理系统的简单步骤： 1. 创建项目 使用 Vue CLI 创建项目，选择 vue3 preset，安装完成后进入项目目录。 ``` vue create my-project cd my-project ``` 2. 安装依赖包 安装 vite、vue-router 和 element-plus。 ``` npm install vite vue-router@4 element-plus --save ``` 安装 pinia 和 echarts。 ``` npm install pinia echarts@5 --save ``` 3. 配置 vite 在根目录下创建 `vite.config.js` 文件，配置 alias 和 server。 ```js import path from 'path' import { defineConfig } from 'vite' export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, 'src'), }, }, server: { port: 3000, open: true, }, }) ``` 4. 配置路由 在 `src` 目录下创建 `router` 文件夹，并创建 `index.js` 文件，配置路由。 ```js 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 ``` 在 `src` 目录下的 `main.js` 中引入路由。 ```js import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') ``` 5. 配置状态管理 在 `src` 目录下创建 `store` 文件夹，并创建 `index.js` 文件，配置状态管理。 ```js import { createPinia } from 'pinia' const store = createPinia() export default store ``` 在 `src` 目录下的 `main.js` 中引入状态管理。 ```js import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' const app = createApp(App) app.use(router) app.use(store) app.mount('#app') ``` 6. 配置 UI 框架 在 `src` 目录下的 `main.js` 中引入 element-plus。 ```js import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' const app = createApp(App) app.use(router) app.use(store) app.use(ElementPlus) app.mount('#app') ``` 7. 配置 echarts 在 `src` 目录下的 `main.js` 中引入 echarts。 ```js import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import * as echarts from 'echarts' const app = createApp(App) app.use(router) app.use(store) app.use(ElementPlus) app.config.globalProperties.$echarts = echarts app.mount('#app') ``` 8. 创建页面 在 `src` 目录下创建 `views` 文件夹，并创建页面组件。 9. 创建布局 在 `src` 目录下创建 `layouts` 文件夹，并创建布局组件。 10. 配置路由和布局 在 `router/index.js` 中配置路由和布局。 ```js import { createRouter, createWebHistory } from 'vue-router' import Layout from '@/layouts/Layout.vue' import Home from '@/views/Home.vue' const routes = [ { path: '/', component: Layout, children: [ { path: '', name: 'Home', component: Home, }, ], }, ] const router = createRouter({ history: createWebHistory(), routes, }) export default router ``` 11. 运行项目 在项目根目录下运行 `npm run dev`，打开浏览器访问 `http://localhost:3000` 查看效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

JackieChan_

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

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

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

打赏作者

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

抵扣说明：

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

余额充值