Vue3+TS+Vant3+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
稍微解释一下
pnpm的原理在于不会傻瓜式的无脑存储相应的副本,而是进行差异文件的比对,只会增加变化了的文件,相当于这些多个项目相同的部分都共享了一个版本的依赖。

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

说白了就是会比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'
import App from './App.vue'
import {createPinia} from 'pinia'
const pinia = createPinia()
const app = 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-button type="success" @click="handleChangeState">修改数据</van-button>
  </p>
</template>
<script lang="ts" setup>
import { useMainStore } from "../../store/module/useCountStore";
import { storeToRefs } from "pinia";
const mainStore = useMainStore();
console.log(mainStore.count);
//可以直接解构mainStore,但是这样是有问题的,这样拿到的数据不是响应式的,是一次性的,之后count和foo的改变这里是不会变的
//Pinia其实就是把state数据都做了reactive处理了
//  const { count,foo}=mainStore

//解决不是响应式的办法 官方的一个api storeToRefs
// storeToRefs的原理是把结构出来的数据做ref响应式代理
const { count, foo } = storeToRefs(mainStore);

const handleChangeState = () => {
  // 数据的修改
  // 方式一:最简单的方式,直接调用修改
  mainStore.count++;

  //方式二:如果要修改多个数据,建议使用$patch 批量更新

  // 方式三:更好的批量更新的函数:$patch是一个函数,这个也是批量更新
  // 这里的state index.ts里的state
  mainStore.$patch((state) => {
    state.count++;
    state.foo = "hello!";
    state.arr.push(4);
  });

  //方式四:逻辑比较多的时候封装到actions中做处理
  mainStore.changeState(10);
};
</script>

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

三、安装vant3

// 两种都可以
npm i vant
npm i vant@next -s

安装插件

# 通过 npm 安装
npm i unplugin-vue-components -D

# 通过 yarn 安装
yarn add unplugin-vue-components -D

# 通过 pnpm 安装
pnpm add unplugin-vue-components -D

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

基于vite项目配置插件

在vite.config.ts中配置

import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

引入组件

在mian.ts中引入vant组件

import { createApp } from 'vue';
import { Button } from 'vant';

const app = createApp();
app.use(Button);

四、安装router4

npm install vue-router

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

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

 // history: createWebHistory(),
  routes
})
export default router;

main.ts配置项

import App from './App.vue'
import router from './router/index'
app.use(router).mount('#app')

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

五、安装axios

npm install axios
pnpm install axios

这个封装可供参考


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

import axios from 'axios'

// 创建axios
const service = axios.create({
  // baseURL: '/api',
  baseURL: 'http://xxx.xxx.xx.xxx/',
  timeout:80000
});

// 添加请求拦截器
service.interceptors.request.use(
  (config:any) => {
    let token:string =''//此处换成自己获取回来的token,通常存在在cookie或者store里面
    if (token) {
      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
      config.headers['X-Token'] = token

      config.headers.Authorization =  + token
     }
    return config
  },
  error => {
    // Do something with request error
    console.log("出错啦", error) // for debug
    Promise.reject(error)
  }
)

service.interceptors.response.use(
  (response:any) => {
   return response.data
 },    /*  */
 error => {
   console.log('err' + error) // for debug
   if(error.response.status == 403){
     // ElMessage.error('错了')
     console.log('错了');

   }else{
     // ElMessage.error('服务器请求错误,请稍后再试')
     console.log('服务器请求错误,请稍后再试');
   }
   return Promise.reject(error)
 }
)
export default service;

service.ts

import {request} from '../request';

// 调用测试
export function getTest(params:any) {
    return request({
      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。

npm install postcss-pxtorem

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

amfe-flexible插件

设置基准值

npm i -S amfe-flexible

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

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
import postcssImport from "postcss-pxtorem"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),

  ],
  server:{
    host: '0.0.0.0'
  },
  // 适配
  css: {
    postcss: {
      plugins: [
        postcssImport({
          // 这里的rootValue就是你的设计稿大小
          rootValue: 37.5,
          propList: ['*'],
        })
      ]
    }
  }
})

效果图:

到此这篇关于Vue3+Vant3+Pinia(H5端)配置教程详解的文章就介绍到这了,更多相关Vue3+Vant3+Pinia(H5端)配置教程内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue3中vuex与pinia的踩坑笔记记录

    目录 介绍 安装使用 简单对比写法差异与共同点 Vuex 和 Pinia 的优缺点 何时使用Pinia,何时使用Vuex 总结 介绍 Pinia 是 Vue.js 的轻量级状态管理库,最近很受欢迎.它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库. Pinia的成功可以归功于其管理存储数据的独特功能(可扩展性.存储模块组织.状态变化分组.多存储创建等). 另一方面,Vuex也是为Vue框架建立的一个流行的状态管理库,它也是Vue核心团队推荐的状态管理库.Vuex高度关注应

  • vue3+pinia的快速入门使用教程

    目录 1. pinia介绍 2. 安装 3. 使用 1. src文件夹下新建store/index.js 2. main.ts引入 3.store下新建js文件,比如userInfo.js 4. 页面使用 补充:存储状态并持久化存储 总结 1. pinia介绍 官网关于pinia的介绍 Pinia 是一个状态管理库,由 Vue 核心团队维护,对 Vue 2 和 Vue 3 都可用. 现有用户可能对 Vuex 更熟悉,它是 Vue 之前的官方状态管理库.由于 Pinia 在生态系统中能够承担相同的

  • Vue3中Pinia的基本使用笔记

    目录 什么是Pinia呢? Pinia和Vuex的区别 与Vuex相比,Pinia很多的优势: 如何使用Pinia store的核心部分:state,getter,action 认识和定义State 操作State 认识和定义Getters 认识和定义Actions Actions执行异步操作: 总结 什么是Pinia呢? Pina开始于大概2019,是一个状态管理的库,用于跨组件.页面进行状态共享(这和Vuex.Redux一样),用起来像组合式API(Composition API) Pini

  • vue3-pinia-ts项目中的使用示例详解

     store.ts import { defineStore } from "pinia"; import { GlobalState, ThemeConfigProp } from "./interface"; import { createPinia } from "pinia"; import piniaPersistConfig from "@/config/piniaPersist"; import piniaPlu

  • 详解Vue3-pinia状态管理

    目录 pinia是什么? 官网 安装命令 使用 pinia是什么? 这个是 vue3 新的状态管理工具,简单来说相当于之前 vuex,它去掉了 Mutations 但是也是支持 vue2 的,尤大推荐.因为其logo像是一个菠萝,所以我们还称呼它为大菠萝. 这个是 vue3 新的状态管理工具,简单来说相当于之前 vuex,它去掉了 Mutations 但是也是支持 vue2 的,尤大推荐.因为其logo像是一个菠萝,所以我们还称呼它为大菠萝. 官网 https://pinia.vuejs.org

  • vue3+Pinia+TypeScript 实现封装轮播图组件

    目录 为什么封装? 静态结构 后面再进行更改 请求数据都存放在pinia里面 类型检测 页面级组件 全局组件 为什么封装? 迎合es6模块化开发思想 注册为全局组件,可以更好地复用,需要用到的地方,直接使用标签即可 静态结构 后面再进行更改 <script lang="ts" setup name="XtxCarousel"> defineProps() </script> <template> <div class=&qu

  • vue3搭配pinia的踩坑实战记录

    目录 前言 An Object could not be cloned? VUE 3的toRaw PINIA与VUE 3可以混合搭配? 同样的操作在VUE 3下的结果 最后的解决方式 总结 前言 最近接手了一个新项目,用的是VUE3+pinia的组合.由于之前没有用过这2个库,只能现学现做.幸运的是这两者的上手难度都不大,项目可以正常开发.但这其中也遇到了一些坑,今天就来讲其中我印象最深的一个. An Object could not be cloned? 不知道有多少开发者遇到过这个报错——A

  • Vue3状态管理之Pinia的入门使用教程

    目录 Vue3 新的发展方向(来源于尤大知乎) 一.Pinia 简介与基础 1.1 Pinia 简介 1.2 Pinia 基础 二.Pinia 在Vue3-Vite中的使用 2.1 基础使用流程 2.2 state 中数据的解构访问 2.3 state 中数据的修改方式(actions和组件中) 2.4 getters 的使用 三.Pinia 数据持久化 总结 Vue3 新的发展方向(来源于尤大知乎) Vue 3 将在 2022 年 2 月 7 日 成为新的默认版本 基于 Vite 的极速构建工

  • Vue3中使用pinia的示例代码

    目录 1.安装:npm install pinia 2.创建store文件并配置内部的index.js文件 3.main.js文件中配置 4.组件使用 4-1. store.$reset() 4-2 store.$patch 5.订阅修改 6.Getter 7.Actions 1.安装:npm install pinia 2.创建store文件并配置内部的index.js文件 import { defineStore } from 'pinia' //引入pinia //这里官网是单独导出 是可

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

    该模板将帮助您开始使用Vue 3.Vite3.0中的TypeScript以及Pinia.Vant3进行开发.该模板使用Vue3,请查看文档了解更多教程. 推荐的IDE设置 VS Code + Volar 键入支持.TS中的vue导入 因为TypeScript无法处理的类型信息.vue导入,默认情况下,它们填充为通用vue组件类型.在大多数情况下,如果您不真正关心模板之外的组件道具类型,那么这很好.然而,如果你想得到实际的道具类型.vue导入,您可以通过以下步骤启用Volar的接管模式: 1.运行

  • MySql 5.7.17免安装配置教程详解

    1.下载mysql-5.7.17-winx64.zip安装包(链接:https://dev.mysql.com/downloads/mysql/) 2.解压安装包. D:\DevelopTool\mysql-5.7.17-winx64   #解压目录 3.在解压目录下创建一个名为data的文件夹,用来存放数据 D:\DevelopTool\mysql-5.7.17-winx64\data 4.配置启动文件 把 D:\DevelopTool\mysql-5.7.17-winx64\my-defau

  • Win10下免安装版MySQL5.7的安装和配置教程详解

    1.MySQL5.7解压 2.新建配置文件my.ini放在D:\Free\mysql-5.7.26-winx64目录下 [mysql] # 设置mysql客户端默认字符集 default-character-set=utf8 [mysqld] #设置3306端口 port = 3306 # 设置mysql的安装目录 basedir=D:\Free\mysql-5.7.26-winx64 # 设置mysql数据库的数据的存放目录 datadir=D:\Free\mysql-5.7.26-winx6

  • webpack介绍使用配置教程详解

    目录 一.webpack介绍 1.由来 2.介绍 3.作用 4.拓展说明 5.webpack整体认知 二.webpack安装 1.安装node 2.安装cnpm 3.安装nrm的两种方法 4.安装webpack 三.webpack配置 0.搭建项目结构 1.初始化一个项目(会创建一个package.json文件) 2.在当前的项目中安装Webpack作为依赖包 3.当前项目结构 4.实现CSS打包 5.实现SCSS打包 6.实现Less打包 7.实现打包url资源(图片.gif.图标等)功能 8

  • SpringBoot多环境配置教程详解

    目录 一.为什么要配置多环境 二.如何进行多环境配置呢 1.针对 yaml 配置文件 2.针对 properties 配置文件 三.命令行启动参数 第一步:打包项目 第二步:输入命令行 补充内容 一.为什么要配置多环境 当我们工作开发真实的项目时,可能会遇到不同的环境,如:开发环境.生产环境.测试环境等,不同的环境所需要的配置内容也会不尽相同,如果我们每次切换环境时再去配置对应的环境配置,肯定会降低我们的开发效率,所以,掌握多环境配置还是非常有必要的. 二.如何进行多环境配置呢 我们还是以配置端

  • vue基础ESLint Prettier配置教程详解

    目录 引言 前言 安装 VsCode 插件 配置 VsCode "Workspace.json" 配置 vue 的 "package.json" 配置 vue 的 ".eslintrc.js" 配置 vue 的 ".prettierrc" 配置 "eslint --fix" 一键修复 配置 ESlint 提交时检测 测试配置效果 问题排查 尾声 引言 VsCode + Vue + ESLint + Pret

  • Linux 下FTP的安装与配置教程详解

    0.安装ftp的前置条件是关掉SElinux # vi /etc/selinux/config 修改 SELINUX=" disabled " ,重启服务器.若相同,则跳过此步骤. 1. 可先查看是否安装过vsftp # rpm -qa | grep vsftpd 则代表已经安装.可直接跳过步骤2 2 .安装 vsftp # yum install vsftp* Is this ok [y/N]: y 代表安装完成. 3. 对vsftp 进行配置 # /etc/vsftpd/vsftp

  • CentOS7+apache+php7+mysql5.7配置教程详解

    yum upgrade yum install net-tools 安装apache 关闭SELinux 编辑器打开 etc/selinux/config 文件,找到 SELINUX=enforcing 字段,将其改成 SELINUX=disabled ,并重启设备. yum -y install httpd mod_ssl 配置防火墙 firewall-cmd --permanent --add-port=80/tcp firewall-cmd --permanent --add-port=4

  • Mybatis 创建方法、全局配置教程详解

    总体介绍:MyBatis实际上是Ibatis3.0版本以后的持久化层框架[也就是和数据库打交道的框架]! 和数据库打交道的技术有: 原生的JDBC技术--->Spring的JdbcTemplate技术 这些工具都是提供简单的SQL语句的执行,但是和我们这里学的MyBatis框架还有些不同, 框架是一整套的东西,例如事务控制,查询缓存,字段映射等等. 我们用原生JDBC操作数据库的时候都会经过: 编写sql---->预编译---->设置参数----->执行sql------->

  • MySQL5.6.31 winx64.zip 安装配置教程详解

    #1. 下载 # #2.解压到本地 修改必要配置my*.ini #3.mysql install admin模式启动cmd cd mysql目录/bin 执行安装: mysqld -install 启动mysql服务: net start mysql 关闭mysql服务: net stop mysql #4.mysql 编码配置 <解压版MySQL-5.6.31-winx64 编码配置> 在根目录下面有已经写好的"my-"开头的ini文件,如:my-default.ini.

随机推荐