Skip to main content

Vue3与Vite项目记录

· 5 min read
LIU

业务模块​

...

项目依赖​

注：node > v12.0.0

{
    "axios": "^0.24.0",
    "vant": "^3.2.8",
    "vue": "^3.2.16",
    "vue-router": "^4.0.12",
    "vuex": "^4.0.2",
    "sass": "^1.43.4",
    "typescript": "^4.4.3",
    "vite": "^2.6.4",
}

目录结构​

├── README.md
├── dist                #打包后文件
├── index.html          #入口文件
├── package.json        #依赖模块
├── postcss.config.js       #postcss
├── public
├── src
│   ├── App.vue
│   ├── assets          #静态文件
│   ├── common      #css/js
│   ├── components      #组件
│   ├── env.d.ts            #ts类型声明
│   ├── main.ts         #初始化
│   ├── router          #路由
│   ├── store           #Vuex
│   ├── typings         #typings
│   ├── utils           #工具类
│   ├── hooks           #hooks
│   └── views           #页面
├── tsconfig.json       #ts配置
└── vite.config.ts      #vite配置

使用规范​

环境变量​

.env        开发环境:       npm run dev
.env.uat    测试环境:       npm run build:uat
.env.prod   生产环境:       npm run build:prod

ts中获取环境变量：import.meta.env.VITE_API_HOST

在vue文件中直接写 import.meta.env.xxx 会报红线，使用ts导出再使用

// utils/config.ts
// 导出环境变量
export const VITE_IMG_HOST: string = import.meta.env.VITE_IMG_HOST as string

// .vue
import {VITE_IMG_HOST} from "../utils/config"

引入图片​

return {
     logo: '/src/assets/logo.png',
};

定时器/延时器​

typescript中需要加 window 使用

let timer: number = 0;
timer = window.setInterval(() => {
            if (second.value < 1) {
              //清除
                clearInterval(timer)
                } 
                })

vuex​

  1. 声明变量

src/store/actionTypes.ts:

// token
export const S_TOKEN: string = 'S_TOKEN'
  1. 引入变量

src/store/state.ts:

import { S_TOKEN } from "./actionTypes";

export default {
    [S_TOKEN]: localStorage.getItem(S_TOKEN) || '',
}
  1. 声明actions

src/store/actions.ts

import { S_TOKEN } from './actionTypes';

export default {
    [S_TOKEN]({ commit }: ICtx, value: string): void {
        commit(S_TOKEN, value);
    }
}
  1. 声明mutations

src/store.mutations.ts

import { S_TOKEN } from './actionTypes';
export default {
    [S_TOKEN](state: any, value: string): void {
        state[S_TOKEN] = value
        localStorage.setItem(S_TOKEN, value)
    }
}
  1. 使用
//引入
import { useStore } from "vuex"
import { S_TOKEN } from "../store/actionTypes";

//js
const store = useStore()

//修改值
store.dispatch(S_TOKEN,'值')

//获取值
computed(()=>store.state[S_TOKEN])

//视图绑定
export default defineComponent({
  setup() {
    const store = useStore()
    return {
      token:computed(()=>store.state[S_TOKEN]),
    };
  },
});

变量定义​

import { ref, reactive, toRefs} from "vue";

//使用ref
const num = ref(0)
num.value = 1

//使用reactive
const obj = reactive(
  {
    a:1,
    b:2,
    c:3
  }
 )
const refObj = toRefs(obj)
return {
     refObj
}

watch监听​

// 监听ref
const count = ref(0)
watch(count , (count,prevCount)=>{
    /*...*/ 
})

// 监听reactive
const state = reactive({count:0})
watch(
  () => state.count,
  (count,prevCount) => {
    /*...*/
  }
)

computed​

const res = computed(()=>{
    return /*...*/
)

keep-alive​

vue-router 4.x 写法

app.vue

<router-view v-slot="{ Component }">
    <keep-alive>
      <component
        :is="Component"
        v-if="$route.meta.keepAlive"
        :key="$route.path"
      />
    </keep-alive>
    <component :is="Component" v-if="!$route.meta.keepAlive" />
 </router-view>

router/index.ts

{
  name: 'A',
  path: '/A',
  component: () => import('../view/A.vue'),
  meta: {
    keepAlive: true
  },
}

生命周期​

//使用setup() 替代
beforecreate -> use setup()
created -> use setup()

//前面加on
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onbeforeUpdate
updated -> onUpdated
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured

//更改名称
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted

//新加入，主要用于开发阶段调试使用
onRenderTracked
onRenderTriggered

获取子组件/修改子组件值​

<usageAndDosage ref="usageAndDosage" />
 
//需要声明ref变量，对应才能获取到组件内的值
const usageAndDosage = ref(null);
 const showUsage = () => {
    usageAndDosage.value.show = true;
 };
 return {
      usageAndDosage
 }


循环里定义ref​

<div
        class="plumb-node plumb-node-center"
        v-for="(item, index) in plumbMap.centerList"
        :ref="el => setCenterNode(el, index)"
        :key="index"
>
//定义
const centerNode = ref([]);
const setCenterNode = (e, index) => {
  centerNode.value[index] = e;
};

//获取
console.log(centerNode.value[index])

reduce​

需要加初始值0

medicinesSelected.reduce((item, next) => item + next.quantity, 0)

rollup-plugin-copy​

此插件用于打包拷贝文件

vite.config.ts

import copy from "rollup-plugin-copy";

plugins: [
    vue(),
    copy({
      targets: [{ src: "src/MP_verify_k7DKUtEsdMrxG4WW.txt", dest: "dist" }],
      hook: "writeBundle",  //要加这个
    }),
  ],

支付​

公众号后台 -> 公众号设置 -> 功能设置 -> 网页授权域名

问题记录​

vant 弹出层，一定要用v-model:show="xx"，点击蒙层才会关闭

药品加入购物车，直接1加入，第二个就有问题：vant步进器最小数默认为1导致，需要设置为0

获取药品列表时，遍历vuex内的购物车列表，覆盖

listInfo -> 监听加减，更新vuex

添加时push到vuex

购物车列表缓存，药品列表不缓存