Vue3 写项目 技术选型全家桶 移动端购物车+引用动画库+多选删除+筛选

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

cnpm install animate.css --save    yarn add animate.css  // 安装

import ‘animate.css’  // 在哪用在哪引入

xxx

手写动画

手写动画源码：

<button @click=“show=true”>显示

<button @click=“show=false”>隐藏

学习过渡动画

项目开始

• 点击筛选出现红框，再次点击红框消失，这时候点击确定会显示全部数据

全选：

• 用到Vuex，进行数据持久化，

/*

位置：子组件components/myFooter.vue

*/

<input type=“checkbox” v-model=“$store.state.vmCkAll"@click="ckAll($event)”>全选

总价{{$store.getters.priceAll}}

去支付{{$store.getters.num}}

全选、反选删除

• 注释标在代码里这里就不写了 

/*

位置：store/index.js

*/

import { createStore, } from ‘vuex’

import axios from ‘axios’

import persist from ‘vuex-persistedstate’

export default createStore({

state: {

// 原数据

data: [],

vmCkAll: false,

edit: true,

//备份数据，用于过滤

data1: [],

text: ‘’,

},

getters: {

// num(state) {

// // num形参就是后面的数字，e形参就是data每一项 ，

// return state.data.reduce((num, e) => num += e.checked && e.num, 0)

// },

// priceAll(state) {

// return state.data.reduce((num, e) => num += e.checked && e.num * e.price, 0)

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】