vue3框架学习

vscode

1. 要运行项目的时候在内置终端先输入cd+项目名，再输入npm run serve

2. input按钮等框的尺寸怎么设置，直接size报错(在样式中设置padding)

3. pwd可以返回当前文件目录

4. npm list vue可以查看安装的vue的版本

5. npm i （vuex）可以安装插件

6. 创建项目是vue create （项目名）

hbuilderx

1. Hbuilderx中的默认vue3 vite项目的路由配置一直没有配起，打开页面一直显示cannot get/

vue3

1、组件开发其他相关属性：

• v-model出现问题：原因是没有写this，而且变量不能加引号。

• render函数意为渲染：等同于之前学非单文件组件中的创建vm样例中的template和components的功能

•  $refs属性：id替代者，也可以绑定在组件上

• props配置项：用于父子组件间传输数据

• Mixin(混入)：将组件的公共逻辑或者配置提取出来

• emits 自定义事件：声明自定义事件使用 emits 属性，触发使用 $emit 方法，监听使用 v-on 或 @ ​​​​​​​，处理，双向绑定：emits 也可用于实现双向绑定。你可以在组件上使用 v-model 来绑定数据，并使用 emits 定义一个名为 update:modelValue 的自定义事件，用于更新绑定的值（结合props实现父子组件数据更新绑定）。

• 全局事件总线是一种在 Vue.js 应用中进行组件之间通信的机制。以下是关于全局事件总线的实现步骤：创建全局事件总线export const eventBus = new Vue();触发自定义事件eventBus.$emit('custom-event', eventData);监听自定义事件eventBus.$on('custom-event', (data) => { // 处理接收到的事件和数据 });

2、axios

• 数据

3、vuex

• vue3配置vuex和vue-router与vue2配置有所不同，更加准确，不能全部引用vuex和vue-router插件。

• 搭建vuex环境：创建store文件夹中的index.js，然后引入import {createStore} from 'vuex'​​​​​​​，在main.js(vm入口)中引入import store from './store/index.js'​​​​​​​

• Vuex引用需要代码实现：vue3特定的是import { createStore } from 'vuex';

• mapState，mapGetters,mapActions,mapMutations怎么使用：

• 

• 命名空间（Namespace）： 在定义 Vuex 模块时，确保使用 namespaced: true 开启命名空间。在根级的 Vuex Store 文件中导入这两个模块，根级 Vuex Store 包含了 module1 和 module2 两个命名空间模块，并且它们分别来自不同的文件。每个文件应包含模块的state、mutations、actions 和 getters。

3、vue-router路由

• 搭建vue-router环境：创建router文件夹中的index.js，再引入import {createRouter, createWebHistory} from 'vue-router'​​​​​​​，然后引入路由组件（一般放在文件夹pages），在main.js(vm入口)中引入import router from './router/index.js'，最后在App.vue中呈现router-link、router-view、active-class

• import CardOne from '../components/CardOne.vue'为什么要两个点？？？因为要回到根路径

• 嵌套用children

• 路由传参数：

• ​​​​​​​

• 传参数的时候to前面一定要加：冒号才能解析

• 先登陆后转到主页效果：最后解决是用的redirect: "/login",重定向，路由守卫的方法没有解决
• Query传参数（使用的时候需要定义created生命周期钩子，否则传递不出来）和params传参数（直接在路径当中定义，但是如果是嵌套路由的话直接在路径中定义是存在问题的）实现

• 路由守卫：

• to：路由的终点 

• meta（路由元信息/路由自定义信息）：可以存放一些特殊的自定义数据，标识等等，但是必须放在mata里，属性名必须是meta。

• from：路由的起点

• next：放行

• 全局前置守卫 (beforeEach)： 在路由导航之前触发，用于执行导航前的操作，例如身份验证检查、导航控制等。如果不调用next()来继续导航，导航将被中断。

• 全局解析守卫 (beforeResolve)： 在全局前置守卫之后触发，但在路由组件被解析之前执行。通常用于确保异步路由组件加载完成之后再继续导航。

• 全局后置守卫 (afterEach)： 在导航完成后触发，用于执行与导航无关的操作，例如日志记录等。不会影响导航本身。

• 路由独享守卫： 可以在路由配置中为特定路由定义守卫，这些守卫将仅适用于该路由。这包括 beforeEnter 守卫，用于特定路由的导航控制。其实就是将全局前置路由守卫的代码挪到路由注册的地方而已：

• 组件内守卫： 在路由组件内部定义的守卫，包括beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。这些守卫用于执行与路由组件相关的操作，例如在组件进入路由前、在当前路由更新时或在组件离开当前路由前执行操作。

4、mock模拟数字接口

• module.exports 来定义该模块的公共接口

• 安装vue-mock-api：在Vue 3项目的根目录下，使用命令 npm install vue-mock-api --save-dev 安装vue-mock-api。

• 创建模拟接口配置：在项目根目录下创建一个文件夹（例如mock），然后在该文件夹中创建一个名为api.js的文件。在api.js中定义你要模拟的数字接口，例如 module.exports = {'/api/numbers': [1, 2, 3, 4, 5]};。

• 配置vue.config.js：在Vue 3项目的根目录下找到或创建vue.config.js文件。在该文件中，引入vue-mock-api插件并配置它，指定模拟接口配置文件的路径，例如：

• const VueMockApiPlugin = require('vue-mock-api/plugin');
  
  module.exports = {
    // ...其他配置...
  
    configureWebpack: {
      plugins: [
        VueMockApiPlugin({
          mock: 'mock/api.js', // 指向你的模拟接口配置文件的路径
        }),
      ],
    },
  };

• 使用模拟接口数据：在Vue组件中，使用axios或其他HTTP库来请求模拟的数字接口数据。例如：

• import axios from 'axios';
  
  axios.get('/api/numbers')
    .then(response => {
      console.log(response.data); // 模拟接口返回的数字数据
    })
    .catch(error => {
      console.error(error);
    });
  

• 启动项目：在终端中运行你的Vue 3项目，模拟接口将在后台运行并拦截匹配的请求，返回模拟数据。

5、swiper制作轮播效果

• 在项目中安装Swiper库，运行命令：npm install swiper --save。

• 在Vue组件中导入Swiper的样式文件，通常是 @import 'swiper/swiper-bundle.css';。???????

• 创建一个Vue组件，包含Swiper的HTML结构和初始化代码。定义轮播容器、轮播项以及配置选项。

• 在组件的mounted钩子中，初始化Swiper并配置选项，例如自动播放、循环、分页器和导航按钮等。

• 根据需要，在组件的样式部分自定义轮播容器和轮播项的样式。

• 启动Vue项目，确保Swiper轮播效果正常显示。

6、Less预编译器来处理样式，Less是一种CSS预编译器，它允许您使用变量、嵌套规则、函数等来编写更具可维护性和可复用性的样式。

7、UUID（Universally Unique Identifier）库来生成唯一的标识符，以便用于标识或区分对象、组件或其他实体。

8、vue-lazyload插件来实现图片的懒加载。这个插件可以让您延迟加载页面中的图片，以提高性能并减少初始页面加载时间。

9、在项目目录中运行 npm install，这会安装所有在 package.json 文件中列出的依赖项。通常，这是在首次设置项目或在其他开发者共享项目时运行的命令。过添加 --save 或 -S 标志，可以将包安装为项目的依赖项并将其添加到 package.json 的 dependencies 部分。例如：npm install package-name --save。

10、样式可以在线检查修改，然后再在源代码中修改。

11、在Vue3导入Element UI库：目前使用Element Plus。这里要严格区分局部安装和全局配置：安装 Vue 的插件（例如 Vue Router）通常不需要全局安装，而是通过在项目中安装和配置来使用它们。这是因为 Vue 3 推崇了更加模块化和组件化的开发方式，可以根据需要将插件集成到特定的组件或模块中。这是为什么我一直全局安装Element UI库，一直报错的原因。具体步骤：

• 将 Element Plus 添加到你的项目依赖中npm install element-plus --save

• 按需导入import { ElButton } from 'element-plus';

12、与 Vue 3 相关的一些常见库包括 Vue Router（前端路由）、Vuex（状态管理）、Vuetify（UI 组件）、Element Plus（UI 组件）、Vue-i18n（国际化）、VeeValidate（表单验证）、Composition API（组件开发）、Vetur（VS Code 插件）、Pinia（状态管理）、Vueuse（Composition API 钩子）、WindiCSS（CSS 工具库）等。这些库可用于构建、扩展和优化 Vue 3 项目，提供了丰富的功能和工具。

13、独立的 JavaScript 库：

1. UI 组件库:

   • 用于构建用户界面的库，包括按钮、表单、模态框等组件。
   • 例子：Bootstrap、Material-UI、Ant Design、Element Plus。

2. 数据可视化库:

   • 用于创建图表、图形和数据可视化效果的库。
   • 例子：D3.js、Chart.js、Highcharts、Three.js。

3. HTTP 请求库:

   • 用于进行 HTTP 请求和处理响应的库。
   • 例子：Axios、Fetch API、jQuery.ajax、Superagent。

4. 状态管理库:

   • 用于管理前端应用程序状态的库，通常与框架集成。
   • 例子：Redux、Vuex、MobX、Recoil。

5. 路由库:

   • 用于前端路由管理的库，支持页面导航和路由。
   • 例子：React Router、Vue Router、React Navigation。

6. 表单验证库:

   • 用于验证和处理表单输入的库。
   • 例子：Yup、Formik、VeeValidate。

7. 工具库:

   • 提供各种实用工具函数和功能的库。
   • 例子：Lodash、Moment.js、Underscore.js、Ramda。

8. 测试库:

   • 用于编写和运行前端和后端测试的库。
   • 例子：Jest、Mocha、Jasmine、Cypress。

9. 动画库:

   • 用于创建动画效果的库。
   • 例子：GreenSock Animation Platform (GSAP)、Anime.js、Velocity.js。

10. 国际化和本地化库:

    • 用于处理多语言和本地化的库。
    • 例子：react-intl、vue-i18n、i18next、Format.js。

11. 状态机库:

    • 用于管理应用程序状态和状态转换的库。
    • 例子：XState、machina.js。

12. 图像处理库:

    • 用于处理和操作图像的库。
    • 例子：CamanJS、PixiJS、Cropper.js。

13. 音频和视频库:

    • 用于处理音频和视频的库。
    • 例子：Howler.js、video.js、mediaelement.js。

14. 地图库:

    • 用于创建交互式地图的库。
    • 例子：Leaflet、Mapbox GL JS、Google Maps JavaScript API。

15. 游戏开发库:

    • 用于创建游戏的库。
    • 例子：Phaser、Babylon.js、PlayCanvas。

16. 富文本编辑器库:

    • 用于创建富文本编辑器的库。
    • 例子：Quill、Draft.js、TinyMCE。

13、git命令：逻辑是git add .   git commit -m "8月数据更新"  git push origin master:peng_feng但是还是报错，最后是需要通过再拉取一遍pull分支，使保持同步。现在可以直接用sourcetree软件进行管理，具体的步骤查看链接：Git管理神器SourceTree使用详解 - 知乎

-----------------------------------------------------------------------------------------------

项目学习

1、表格与插件联动起来用vue3语法遇到的问题：

• setup的妙用：<script setup></script>，可以不用写return{}
• 定义ref类型的时候，再改变变量的值的时候需要加上.value
• 定义常量const，还有定义变量的let，都需要重新学习这方面的知识；vue3中函数定义的规则；
• 初始化的时候用onMounted
• 为什么要异步加载数据setTimeout(() => {}
• pageSize、currentPage

2、怎么调用工具包里面定义的函数：在vue文件里面引入，然后通过定义的事件去调用函数const exportData = () => {Tools.exportToExcel(orderList);};

3、css布局怎么调整：全部元素往左靠flex，两个元素放在一行inline-block，多个div放在一行flex，调整行距marhin-top

4、elment-plus里面的组件：el-tab-pane(tabs标签页选项卡功能)、this.$message弹出信息、this.$route.params.type路由携参、JSON.stringify(this.orderList)内置函数将其转化为JSON字符串