vue3开发记录

🍕vue3+vite使用.env做配置

vite环境下使用👉**.env 文件**

在 src 目录下创建一个 env.d.ts 文件，接着按下面这样增加 ImportMetaEnv 的定义

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // 更多环境变量...
}
interface ImportMeta {
  readonly env: ImportMetaEnv
}

在项目的根目录下创建以下两个文件
.env.development
.env.production
对这两个文件的讲解去vite官方文档瞄一眼你就懂了，无非就是根据当前的运行环境来读取不同的配置

必须知道的是 只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY 提供给客户端源码

使用

✨先配置.env.[model]文件。以.env.development为例，我的部分配置如下。

##开发环境
#接口地址
VITE_APP_BASE_URL='https://localhost:44346'
#指定请求超时的毫秒数(0 表示无超时时间)
VITE_APP_TIMEOUT = 3000
#解决“vite use `--host` to expose”的问题
#也可以直接指定IP地址 
VITE_APP_HOST = '0.0.0.0'
#启动端口
VITE_APP_PORT = '888'

✨调用。一般情况下直接使用 import.meta.env.[你在配置文件定义的参数]

 baseURL : import.meta.env.VITE_APP_BASE_URL,
 timeout: import.meta.env.VITE_APP_TIMEOUT,

✨在vite.config中调用
若是需要通过配置文件修改vite.config中的配置，要先获取当前环境，然后才能通过loadEnv进行配置的读取。
对于vite而言，只需要通过mode就可以快速得到环境变量

mode
类型： string
默认： ‘development’（开发模式），‘production’（生产模式）

export default ({ mode }) => {
  return defineConfig({
    plugins: [vue()],
    server: {
      host: loadEnv(mode, process.cwd()).VITE_APP_HOST,	//解决“vite use `--host` to expose”
      port: (loadEnv(mode, process.cwd()).VITE_APP_PORT) as unknown as number,
      open: true
    }
}

🍔使用watch监听变化

使用watch监听变化

监听一个参数

watch(() => searchParm.search, (res) =>{
    if(res.length==0){
        listParm.pageSize = 10;
    }
})

watch监听多个值

/**
 * @description: 搜索值的变化
 * @param:  需要监听变化的参数 [searchParm.search,DYPlanDate.customer] 
 * 第一个参数() => [searchParm.search,DYPlanDate.customer] 监听的数据
 * 第二个参数回调函数，
 * 其中参数分别代表更改后与更改前的值，
 * ([search,customer],[oldsearch,oldcustomer]) ，
 * 第一个参数依次代表更改后的值，第二个参数依次代表更改前的值
 */
watch(() => [searchParm.search,DYPlanDate.customer], ([search,customer],[oldsearch,oldcustomer]) =>{
    if(search.length==0 || customer.length==0){
        listParm.pageSize = 10;
    }
})

😃vue3+vite项目使用build打包后生成的文件放到IIS环境下运行，刷新后页面404

解决方案：在网站的根目录下创建一个 web.config 文件，内容如下：
（打包，发布后部署的网站目录）

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

👉同时注意在vite.config.ts中配置base: “./”,

return defineConfig({
    base: "./",
    })

其它服务器查看下面链接的说明👇
不同的历史模式
构建生产版本

vue3父组件调用子组件

1.创建主页面

<template>
<el-button type="primary" size="default" @click="addPermissBtn">新增</el-button>
<!--使用语法糖可以直接调用 无需申明-->
 <addPermission ref="addPermissionRef" @getApiPermissionList="getApiPermissionList"></addPermission>
</template>
 <script lang="ts" setup>
 //使用语法糖可以直接调用 无需申明
 import addPermission from './addPermission.vue';
 
//需要对子页面初始化 这一步千万不能忽略
const addPermissionRef = ref();
//打开子页面的方法
const addPermissBtn=()=>{
    addPermissionRef.value?.show(EditType.ADD);
}
</script>

2.创建子页面

<template>

<el-drawer
    v-model="DataSet.isShow"
    title="I am the title"
  >
    <span>Hi, there!</span>
  </el-drawer>
</template>

 <script lang="ts" setup>
 import {reactive} from 'vue'
 const DataSet = reactive({
 isShow:false
 })
 const show = (type: string) => {
DataSet.isShow=true;
}
//需要将子页面暴露出去 父组件才能使用
defineExpose({
    show
})
</script>

vue3子组件调用父组件的方法

1.假设父组件存在如下的方法

const getApiPermissionList = async () => {}

2.此时子组件需要调用上面父组件里面的方法

有好几种方法都可以实现这个功能，这里我只记录我用到的 使用emit实现
！在子组件申明 emit

const emit = defineEmits(['getApiPermissionList']);

!! 在子组件调用 emit 申明

const confrim = () => {
   emit('getApiPermissionList');
}

!!!在父组件调用子组件展示的时候将这个emlt属性加上

<addPermission ref="addPermissionRef" @getApiPermissionList="getApiPermissionList"></addPermission>