vue3组合式API、状态库Pinia、打包工具Vite

组合式API（Vue3）

核心API的使用

import { ref } from 'vue';
import { reactive } from 'vue';
import { ref, computed } from 'vue';

export default {
  setup() {
  	// 1. ref：用于定义基本类型的响应式数据。
    const count = ref(0);
    // 2. reactive：用于定义复杂类型的响应式数据。
    const state = reactive({ count: 0, name: 'Vue' });
	// 3. computed：用于定义计算属性。
	const doubleCount = computed(() => count.value * 2);
	// 4. watch：用于监听响应式数据的变化。
	watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });
    return { count,state,doubleCount  };
    
  }
}

5. 生命周期钩子：

import { onMounted } from 'vue';

export default {
  setup() {
  	//onMounted：组件挂载后调用。
    onMounted(() => {
      console.log('Component mounted');
    });
    //onUpdated：组件更新后调用。
    onUpdated(() => {
      console.log('Component updated');
    });
    //onUnmounted：组件卸载后调用。
    onUnmounted(() => {
      console.log('Component unmounted');
    });
  }
}

Vite高级配置（代码分割、Tree Shaking）‌

代码分割 方法1：

  build: {
    // 配置打包文件路径和命名
    rollupOptions: {
      output: {
        // 超大静态资源拆分
        manualChunks(id) {
          // console.log(id,'id')
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        },
        chunkFileNames: "assets/js/[name]-[hash].js",
        entryFileNames: "assets/js/[name]-[hash].js",
        // assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
      },
    },
  }

方法2

build: {
  rollupOptions: {
    output: {
       // key自定义 value[] 插件同步package.json名称 或 src/相对路径下的指定文件 （自己可以看manualChunks ts类型）
      manualChunks: {
        // vue vue-router合并打包
        vue: ['vue', 'vue-router'],
        echarts: ['echarts'],
        lodash: ['lodash'],
        // 两个文件合并成一个helloWorld文件
        helloWorld: ['src/components/HelloWorld.vue','src/components/HelloWorld1.vue'],
      }
    }
  }
}

方法3

build: {
  rollupOptions: {
    output: {
      manualChunks(id: any): string {
        if (id.includes("style.css")) {
          // 需要单独分割那些资源 就写判断逻辑就行
          return 'src/style.css';
		}
        if (id.includes("HelloWorld.vue")) {
          // 单独分割hello world.vue文件
          return 'src/components/HelloWorld.vue';
		}
        // // 最小化拆分包
        if (id.includes("node_modules")) {
          return id
           .toString()
           .split("node_modules/")[1]
           .split("/")[0]
            .toString();
		}
      }
    }
  }
}

在Vue3项目中使用Vite进行构建时，Tree-shaking技术能够有效地减少生产环境下的代码体积。例如，当我们使用Vue的单文件组件时，如果组件中引入了一些未使用的方法，通过Tree-shaking，这些未使用的方法将被删除，最终生成的代码将更加精简。

摇树优化（Tree Shaking）是Webpack中一种用于优化JavaScript代码的技术。它的目标是通过静态分析，从代码中剔除未被使用的模块，从而减少最终打包文件的大小。

Tree Shaking 只支持 ESM (ES6 Module)的引入方式，不支持 Common JS 的引入方式。
摇树优化要求代码使用ES6模块化的语法。确保你的代码基于ES6模块化进行编写，而不是使用CommonJS或AMD等其他模块化方案。

ESM：export + import
Common JS：module.exports + require

// 导入所有内容（不会触发 tree-shaking）
import lodash from 'lodash'
// 导入命名导出 (会触发 tree-shaking)
import { debounce } from 'lodash'

相关配置

// webpack.config.js
module.exports = {
  optimization: {
    usedExports: true, // 开启 tree shaking
    concatenateModules: false, // 关闭模块合并
    minimize: false // 关闭代码压缩
  }
}

webpack中的Tree-Shaking

Webpack 5对Tree Shaking进行了改进，可以更有效地删除未使用的代码，从而使打包后的文件更小，加载更快
在 Webpack 中，启动 Tree Shaking 功能必须同时满足三个条件：

++ 使用 ESM 规范编写模块代码
++ 配置 optimization.usedExports 为 true，启动标记功能
++ 启动代码优化功能，可以通过如下方式实现：
– 配置 mode = production：在Webpack的配置中，将mode设置为production模式。这会自动启用一系列的优化功能，包括摇树优化
– 配置 optimization.minimize = true
– 提供 optimization.minimizer 数组

// webpack.config.js
module.exports = {
  entry: "./src/index",
  mode: "production",
  devtool: false,
  optimization: {
    usedExports: true // 启用tree-shaking
  }
}

vite中的Tree-Shaking

5. export default 会导致 Tree Shaking 失败**

import {add} from './add';
import {sub} from './sub';
export default {add, sub}

状态管理（Pinia）‌

介绍

一、什么是Pinia?
Pinia 是一个专门为 Vue 3 设计的状态管理库。
它的目标是提供一种简单、直观的方法来管理 Vue 应用的状态，同时充分利用 Vue 3 的响应式系统和组合式 API。
Pinia 主要特点包括：
基于 Vue 3：Pinia 是专门为 Vue 3 设计的状态管理库，充分利用了 Vue 3 的响应式系统和组合式 API。
使用 Composition API：Pinia 鼓励使用 Vue 3 的 Composition API 来定义和操作状态，这使得状态管理逻辑更加清晰和灵活。
零依赖：Pinia 是一个轻量级的状态管理库，没有任何依赖，这意味着你可以根据自己的需要选择是否引入额外的库。
插件化：Pinia 提供了丰富的插件生态，可以轻松地扩展其功能，比如可以与 DevTools 插件结合，方便调试状态变化。
类型安全：Pinia 充分利用 TypeScript 的支持，提供了类型安全的状态管理方案，让你在开发过程中更加放心。
服务端渲染支持：Pinia 提供了对服务端渲染的支持，使得在服务端渲染的 Vue 应用中也能够方便地使用状态管理。
总结：
1.提供了更加简单的API（去掉了mutation）
2.提供符合组合式风格的API（和Vue3.0的语法统一）
3.去掉了modules的概念，每一个store都是一个独立的模块
4.配合ts更加友好，可靠的类型判断

安装

npm install pinia

使用 （main.js）

import './assets/main.css'
import { createApp } from 'vue'
import {createPinia} from 'pinia' //导入Pinia
import App from './App.vue'
import router from './router'
 
const app = createApp(App) //创建Pinia实例
const pinia = createPinia()

app.use(router).use(pinia)//Pinia插件安装配置

app.mount('#app') //挂载

创建store以及counter.js

import { defineStore } from "pinia";
import { ref } from "vue";

//定义store
// defineStore(id,options) id:唯一标识符 options:配置对象
export const useCounterStore = defineStore('counter',()=>{
    //声明数据 state
    const count = ref(0)
    const message = ref('hello')

    //声明操作数据的方法 action 
    const addCount = ()=>count.value++
    const subCount = ()=>count.value--

    //声明基于数据派生的计算属性 getters
    const double = computed(()=>count.value*2)

	//---异步调用 声明数据---
    const channelList = ref([])
    //声明修改数据的方法
    const getList = async ()=>{
       const res= await axiox.get('...')
       channelList.value = res.data
    }
    //---异步调用 声明数据---
    return {
        count,
        message,
        addCount,
        subCount,
        double,
        getList 
    }
//组件中使用
<script setup>
import {useCounterStore} from '@/store/counter' //导入对应的store
const counterStore = useCounterStore() //保存着我们要使用的数据和方法
</script>

<template>
<div>
  调用声明数据
  <h3>APP {{ counterStore.count }} {{ counterStore.double }}</h3>
  <h3>APP {{ counterStore.message }}</h3>
  调用方法
  <button @click="counterStore.addCount">+</button></h3>
  <!--调用异步方法-->
  <button @click="channelStore.getList">get List</button>
</div>
</template>

<style scoped>
</style>

‌跨端开发‌ ‌小程序：Uni-app多端适配方案‌

条件编译 Uni-app 提供了条件编译的功能，允许你根据不同的平台编写不同的代码。例如，你可以为微信小程序和H5编写不同的样式或逻辑。

// #ifdef MP-WEIXIN
// 微信小程序特有的代码
console.log('这是微信小程序特有的代码');
// #endif
 
// #ifdef H5
// H5特有的代码
console.log('这是H5特有的代码');
// #endif

使用 uni-app 提供的组件和 API

Uni-app 提供了一套统一的 API 和组件库，这些组件和 API 在不同的平台上通常有相应的实现。
例如，<view>、<navigator>等组件在不同的平台上表现一致。

3. 平台特性检测
   你可以使用 uni.getSystemInfo() 或 uni.getSystemInfoSync() 方法获取设备信息，然后根据这些信息来调整你的应用行为。

uni.getSystemInfo({
    success: function (res) {
        console.log(res.platform); // 获取平台信息
        if (res.platform === 'android') {
            // Android特有的代码
        } else if (res.platform === 'ios') {
            // iOS特有的代码
        }
    }
});

使用媒体查询和响应式布局

虽然 Uni-app 主要面向的是移动端，但你可以使用 CSS 的媒体查询来适配不同屏幕尺寸的设备。例如：

/* 小屏手机 */
@media screen and (max-width: 480px) {
    .container {
        padding: 10px;
    }
}
 
/* 大屏手机或平板 */
@media screen and (min-width: 481px) {
    .container {
        padding: 20px;
    }
}

使用 flexbox 或 Grid 布局

使用 CSS 的 Flexbox 或 Grid 布局可以更容易地实现响应式设计，这些布局方式在不同平台上表现一致。

自定义组件和插件

对于特定平台的需求，你可以开发自定义组件或使用第三方插件。Uni-app 支持 npm 包，你可以查找或开发适用于多个平台的组件。

使用 App.vue 和 pages 目录下的页面文件进行差异化设计

在 App.vue 中，你可以编写一些全局的样式或逻辑，而在各个页面的 Vue 文件中，针对不同平台编写特定的样式或逻辑。