Vue3+TS+Vant3+Pinia(H5端)配置教程

简介: Vue3+TS+Vant3+Pinia(H5端)配置教程

Vue 3 + TypeScript + Vite + Pinia (H5端)

该模板将帮助您开始使用Vue 3、Vite3.0中的TypeScript以及Pinia、Vant3进行开发。该模板使用Vue3,请查看文档了解更多教程。

推荐的IDE设置

VS Code + Volar

键入支持。TS中的vue导入

因为TypeScript无法处理的类型信息。vue导入,默认情况下,它们填充为通用vue组件类型。在大多数情况下,如果您不真正关心模板之外的组件道具类型,那么这很好。然而,如果你想得到实际的道具类型。vue导入,您可以通过以下步骤启用Volar的接管模式:

1.运行扩展:从VS代码的命令调色板中显示内置扩展,查找TypeScript和JavaScript语言功能,然后右键单击并选择禁用(工作区)。默认情况下,如果禁用默认的TypeScript扩展,则接管模式将自动启用。

2.通过从命令调色板运行Developer:Reload window重新加载VS代码窗口。

安装

如果想一步一步安装可以参考以下文档,都有详细的解释

#轻量级pnpm

稍微解释一下

pnpm的原理在于不会傻瓜式的无脑存储相应的副本,而是进行差异文件的比对,只会增加变化了的文件,相当于这些多个项目相同的部分都共享了一个版本的依赖。

这样的话,硬盘空间可以得到大量的缩减,同时加快了安装速度。看个图

f979fbfd268744739cab1cd336b5a95a.png

说白了就是会比npm加载速度快很多

比如说安装一个依赖,就可以使用

npm install pnpm -g

你会发现比npm快的多的多。

pnpm install

一、安装vite

搭建vite

yarn create vite

安装依赖

npm i

启动项目

yarn dev

选择Vue3+TS的版本即可


二、安装pinia

npm add pinia@next

挂载Pinia

main.ts

import { createApp } from'vue'import'./style.css'importAppfrom'./App.vue'import {createPinia} from'pinia'constpinia = createPinia()
constapp = createApp(App)
// 挂载到 Vue 根实例
app.use(pinia)
createApp(App).mount('#app')

局部引入Pinia

import { defineStore } from 'pinia'

下面可以看个使用例子:

可以在对应的src下创建store/module/useCountStore.ts文件

具体内容如下:

useCountStore.ts

import { defineStore } from 'pinia'
//定义容器
//参数1:容器的id,必须唯一,将来pinia会把所有的容器挂载到根容器
//参数2:选项对象
//返回值是一个函数,调用得到容器实列
export const useMainStore=defineStore('main',{
    //state类似于组件的data,用来存储全局状态的
    //state必须是函数:这样是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
    //必须是箭头函数,这是为了TS更好的类型推导
   state:()=>{
   return{
      count:100,
      foo:'ber',
      arr:[1,2,3]
   }
   },
   //getters 类似于组件的computed,用来封装计算属性,有缓存功能
   //和vuex中的getters没有区别
   getters:{
      // 方式一:这里的state就是上面的state状态对象,使用参数可自动推到出返回值的类型
       count10(state){
       return state.count+20
       },
      //方式二:getters也可使用this
      //直接使用this,ts不会推导出返回值是什么类型,所以要手动标明返回值的类型
/*        count10():number{
          return this.count+20
       }, */
      // 方式三:传递参数,但不使用参数,直接用this,获取值也可,自动推出返回值类型(不推荐使用)
/*       count10(state){
         return this.count+20
      } */
   },
   //类似于组件的methods, 封装业务逻辑,修改state
   actions:{
      //注意不能使用箭头函数定义actions:因为箭头函数绑定外部this,会改变this指向
      //actions就是 通过this返回当前容器实例
      // 这里的actions里的事件接受参数
      // 这里的num:number为自定义参数,需要声明参数类型
      changeState(num:number){
         // this.count++;
         this.count+=num
         this.foo='hello!'
         this.arr.push(4)
         // 同理,actions里也可使用$patch
          this.$patch({})
          this.$patch(state=>{})
         //在此注意:patch和普通多次修改的区别在原理上的区别是
         // 1.涉及到数据响应式和视图更新,多次修改,修改几次视图就更新就更新几次
         // 2.patch 批量修改 视图只更新一次,更有利于性能优化
      }
   }
})
//使用容器中的state
//修改 state
//容器中的actions的使用

数据写好之后在组件中使用即可

<template>
  <h3>Pinia基本使用</h3>
  <p>{{mainStore.count}}</p>
  <p>{{mainStore.arr}}</p>
  {{mainStore.count10}}
  <hr />
  <p>解构mainStore后的渲染</p>
  <p>{{count}}</p>
  <p>{{foo}}</p>
  <hr />
  <p>
    <van-buttontype="success"@click="handleChangeState">修改数据</van-button>
  </p>
</template>
<scriptlang="ts"setup>
import { useMainStore } from"../../store/module/useCountStore";
import { storeToRefs } from"pinia";
constmainStore = useMainStore();
console.log(mainStore.count);
//可以直接解构mainStore,但是这样是有问题的,这样拿到的数据不是响应式的,是一次性的,之后countfoo的改变这里是不会变的
//Pinia其实就是把state数据都做了reactive处理了
//  const { count,foo}=mainStore//解决不是响应式的办法 官方的一个apistoreToRefs// storeToRefs的原理是把结构出来的数据做ref响应式代理
const { count, foo } = storeToRefs(mainStore);
consthandleChangeState = () => {
  // 数据的修改
  // 方式一:最简单的方式,直接调用修改
mainStore.count++;
  //方式二:如果要修改多个数据,建议使用$patch 批量更新
  // 方式三:更好的批量更新的函数:$patch是一个函数,这个也是批量更新
  // 这里的stateindex.ts里的statemainStore.$patch((state) => {
state.count++;
state.foo = "hello!";
state.arr.push(4);
  });
  //方式四:逻辑比较多的时候封装到actions中做处理
mainStore.changeState(10);
};
</script>

写完后就可以使用了,具体使用教程可以参考官方文档Pinia官网

三、安装vant3

// 两种都可以
npmivantnpmivant@next -s

安装插件

# 通过 npm 安装
npmiunplugin-vue-components-D# 通过 yarn 安装
yarnaddunplugin-vue-components-D# 通过 pnpm 安装
pnpmaddunplugin-vue-components-D

这个插件可以自动按需引入组件

基于vite项目配置插件

在vite.config.ts中配置

importvuefrom'@vitejs/plugin-vue';
importComponentsfrom'unplugin-vue-components/vite';
import { VantResolver } from'unplugin-vue-components/resolvers';
exportdefault {
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
    }),
  ],
};

引入组件

在mian.ts中引入vant组件

import { createApp } from'vue';
import { Button } from'vant';
constapp = createApp();
app.use(Button);

四、安装router4

npminstallvue-router

ac7ee8cd6dee4bf78240dd7a6051939a.jpg

router/index.ts配置内容如下:

import { createRouter, createWebHistory,createWebHashHistory, RouteRecordRaw } from'vue-router'importHomefrom'../view/Home.vue';
constroutes: Array<RouteRecordRaw> = [
  {
path: '/',
name: 'index',
component: Home,
  },
]
constrouter = createRouter({
history: createWebHashHistory(),
 // history: createWebHistory(),
routes})
exportdefaultrouter;

main.ts配置项

importAppfrom'./App.vue'importrouterfrom'./router/index'app.use(router).mount('#app')

App.vue

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TOITHQne-1658887594763)(./src/assets/image/MDImg/router.png)]

五、安装axios

npminstallaxiospnpminstallaxios

这个封装可供参考

6b2b290d9d324d39ba327be9b199e5db.jpg

5542653986cb46058d5834933ab37ee0.png

此处经过修改,以下方代码为准

importaxiosfrom'axios'// 创建axiosconstservice = axios.create({
  // baseURL: '/api',
baseURL: 'http://xxx.xxx.xx.xxx/',
timeout:80000});
// 添加请求拦截器
service.interceptors.request.use(
  (config:any) => {
lettoken:string =''//此处换成自己获取回来的token,通常存在在cookie或者store里面
if (token) {
      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
config.headers['X-Token'] = tokenconfig.headers.Authorization =  + token     }
returnconfig  },
error => {
    // Dosomethingwithrequesterrorconsole.log("出错啦", error) // fordebugPromise.reject(error)
  }
)
service.interceptors.response.use(
  (response:any) => {
returnresponse.data },    /*  */error => {
console.log('err' + error) // fordebugif(error.response.status == 403){
     // ElMessage.error('错了')
console.log('错了');
   }else{
     // ElMessage.error('服务器请求错误,请稍后再试')
console.log('服务器请求错误,请稍后再试');
   }
returnPromise.reject(error)
 }
)
exportdefaultservice;

service.ts

551bcabaaea8427e851d267498da6596.png

import {request} from'../request';
// 调用测试
exportfunctiongetTest(params:any) {
returnrequest({
url: '/xxxx',//此处为自己请求地址
method: 'get',
data:params    })
  }

之后在页面中调用

// 接口引入地址
import { getTest} from"../utils/api/service";
/* 调用接口 */getTest('放入params参数').then(response => {
console.log("结果", response);
          })
.catch(error => {
console.log('获取失败!')
          });

六、适配方案

postcss-pxtorem插件

用来将px转换成rem适配(意思就是你只需要填写对应的px值,就可以在页面上自动适配,不需要自己手动转rem。

npminstallpostcss-pxtorem

网上有很多人说这个需要新建什么postcss.config.ts文件。在vite中是自带了这种写法,所以只需要直接在vite.config.ts中填写相关配置就可以了。

amfe-flexible插件

设置基准值

npmi-Samfe-flexible

这两个插件是必备的,下面给出配置项

import { defineConfig } from'vite'importvuefrom'@vitejs/plugin-vue'importComponentsfrom'unplugin-vue-components/vite';
import { VantResolver } from'unplugin-vue-components/resolvers';
importpostcssImportfrom"postcss-pxtorem"// https://vitejs.dev/config/
exportdefaultdefineConfig({
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
    }),
  ],
server:{
host: '0.0.0.0'  },
  // 适配
css: {
postcss: {
plugins: [
postcssImport({
          // 这里的rootValue就是你的设计稿大小
rootValue: 37.5,
propList: ['*'],
        })
      ]
    }
  }
})

效果图:

08c0704b0e4a497f8cf89f82412eeb75.png

稍后我将会把安装包放在仓库里方便大家获取,如有问题可以联系我,随时为大家解答~~

项目架构网址如下:Vue3+Ts+Vite+H5适配搭建

相关文章
|
30天前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
163 1
|
2月前
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
146 3
|
3月前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
64 1
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
151 1
|
8天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
12天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
66 12
|
8天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
29天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
61 8
|
30天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
77 1

热门文章

最新文章