当前位置:   article > 正文

vue3+vite+pinia+vue-router搭建环境_vite + vue3 + vue-router + pinia 搭建项目

vite + vue3 + vue-router + pinia 搭建项目

前提:前面已经创建一个项目,涉及到vue3、vite、pinia、vue-router、openlayers创建的命令行及对应版本。接下来,是整个项目的详细配置。

详细配置,包括以下内容:

一、vue

(一)、vue3,并且使用组合式API

vue3推荐写法: 组合式API,类比于react的函数组件。

(二)、根目录下的main.js

App.vue是整个项目的入口,main.js是整个逻辑,在main.js全局配置进行注册和挂载 相关插件。

(三)、Vue3 setup 中provide 和 inject 的妙用

注意:组合式API和选项式API的 setup的写法不同,但编译到浏览器运行时,组合式API会编译成选项式API的 setup写法一样,最终效果相同。

二、vite

(一)、vite的配置,可以百度,可以官网

三、pinia

(一)、pinia的引入及挂载

说明:piniaPluginPersistedstate是用于pinia数据持久化存储的

(二)、一个store.js

import { defineStore } from 'pinia';
export const useUserStore = defineStore('自定义名称', {参数二})
参数二的两种写法:
1.组合式API
2.选项式API

组合式API:

选项式API:

(三)、页面组件实例化一个store

三大组成部分:state、getter、action

state数据 == data //在pinia中state被定义为 返回初始状态的一个函数
getter == computed //计算属性,不可以传参,但是可以传递函数
action == method //处理业务逻辑,是异步的
  1. state

  1. getter

注意:使用setup时的用法

  1. action

注意:异步要消耗性能

store.$onAction(callback,参数2为true不自动卸载)

四、vue-router

(一)、动态路由的配置

(二)、后端返回的接口进行清洗

备注:后端返回的动态路由,数据清洗方法可以自行百度。因地制宜。

(三)、在setup中访问路由

五、其它:关于适配

(一)、文字大小适配

文字大小自适应font-size: calc(100vw * 24 / 1920);

(二)、屏幕大小自适应

备注:到这儿屏幕大小自适应插件就配置完毕。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/141214?site
推荐阅读
相关标签
  

闽ICP备14008679号