vue学习笔记（组合式api+elementUI介绍）-EW帮帮网

实战第一课：vue工程化

1.vue项目的创建和启动

编辑2. vue项目的开发流程

什么是vue项目？

1.请问vite和create-vue的区别是啥？

2. script的setup语法糖有啥用？

这种结构使得组件的逻辑、样式和模板部分清晰分离，便于维护和扩展。

总结

3....在JavaScript中是拓展运算符

实战第一课：vue工程化

注意：在准备node.js环境时，注意node.js安装目录不能有在有空格或中文的文件下，并且数据源我们直接用官方就好，不要用淘宝、京东那些，npm安装路径也要放在不能有空格和中文的目录下。

1.vue项目的创建和启动

执行npm init vue@latest命令在当前目录下创建vue项目，创建完成后执行cd 项目名，然后npm install下载好vue相关依赖。

用vscode打开创建的vue项目可以看到项目结构：

npm run dev命令启动vue项目：

2. vue项目的开发流程

index和入口文件往往不用修改是默认生成的，主要修改App.vue文件。

什么是vue项目？

vue组件的写法：

以前的vue2那种：

vue3：

3.vue的api风格

1.选项式api

2.组合式api更灵活

1.响应式数据和方法，import进来ref或者钩子函数，定义的数据一般为响应式数据const msg = ref(...);在使用这个响应式数据时需要添加value，msg.value。

4.基础案例的实现：

1、由于我们vue和axios都npm到了本地，可以直接用全局。

2、使用ref构建响应式数据，注意添加value。

3、axios发送请求时传送参数使用params。

案例代码优化：

把需要复用的代码封装到js文件中，提高复用效率。

具体实现：

1.首先是异步函数和同步请求，向服务器发送请求需要添加await同步等待服务器响应的结果，async/await语法，await必须写在async函数中。

2.再就是需要return请求的结果，调用 articleGetAllService 的地方会收到 result.data，即服务器返回的文章数据。如果没有 return，调用者将无法获取到请求的结果，函数的返回值会是 undefined。

3.定义一个公共前缀变量，它的名字是baseURL,是axios的配置项表示请求的基础路径。

1.vue组件在使用js暴露的函数时，也要注意是不是异步的函数，如果是则要用await同步等待，否则页面不会渲染数据。

2.注意...是拓展运算符，{}是对象运算符，...可以展开一个对象或数组的内容，用于构建新的对象。

进一步优化：

注意请求拦截器，它可以在这里添加token，不使用springsecurity实现。

具体实现：

通过instance.interceptors.response.use()创建响应拦截器

由于我们export出来的是instance，是axios实例，所以我们写的Request就是instance的别名。

5.element组件

6.常用组件：表格、表单、按钮、分页

1、表格el-table（以下element都是不需要会背的，但是要对里面的参数进行理解）

:data="tableData"绑定tableData的数据，label代表当前列名；

2、分页

Class可以指定分页进行flex布局，current-page当前页，page-size每页数量，page-sizes表示layout表示组件内元素的先后，Size-change和current-change绑定两个方法。

3、表单el-form和卡片组件el-card

el-form是一个表单，它可以有一个框框输入数据、选框选择数据、日志的形式选择日期三种方式来输入数据，具体选择哪个看选择。

el-card是一个卡片，他会把边框高亮起来，让卡片内的区域看起来凸出来。

一些疑惑：

1.请问vite和create-vue的区别是啥？

性质不同

Vite：是一个新一代的前端构建工具，由 Vue.js 作者尤雨溪开发。它利用浏览器对 ES 模块的原生支持，提供快速的开发体验。
create-vue：是一个基于 Vite 的 Vue 项目创建工具。它本质上是通过 Vite 来初始化和配置 Vue 项目。

功能侧重点不同

Vite：
- 快速开发服务器启动：Vite 利用 ES 模块的特性，避免了传统打包工具的打包过程，开发服务器启动时间大大缩短。
- 即时热更新：Vite 的热更新速度几乎是实时的，因为它仅重新加载发生变化的模块。
- 插件系统灵活：Vite 支持丰富的插件生态系统，允许开发者根据需要扩展构建过程。
create-vue：
- 简化项目创建：通过简单的命令，快速搭建基于 Vite 的 Vue 项目，减少了手动配置的复杂性。
- Vue 项目特定配置：它提供了 Vue 项目所需的特定配置和模板，方便开发者快速开始 Vue 项目开发。

使用场景不同

Vite：适用于各种前端项目，包括单页应用（SPA）、静态网站和库开发。它不仅局限于 Vue 项目，还可以用于其他框架（如 React、Svelte 等）的项目构建。
create-vue：主要针对 Vue 项目的快速创建和开发。如果开发者需要快速搭建一个 Vue 项目，并且希望利用 Vite 的性能优势，那么 create-vue 是一个很好的选择。

项目结构和配置不同

Vite：项目结构相对灵活，可以根据需要进行自定义配置。其配置文件为 vite.config.js，用于配置开发服务器、构建选项等。
create-vue：生成的项目结构是基于 Vite 的标准结构，但会包含一些 Vue 项目特有的文件和目录。例如，src 目录下会有 App.vue 等 Vue 组件文件。

2. script的setup语法糖有啥用？

在 Vue 3 中，<script setup> 是一种语法糖，它简化了组合式 API 的使用方式，让代码更加简洁和易于阅读。以下是 <script setup> 的主要用途和优势：

1. 简化代码结构

传统 <script> 的写法：在传统 <script> 中，需要显式地使用 setup() 函数，并返回需要在模板中使用的变量和方法。例如：

vue

复制

<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
};
</script>

<script setup> 的写法：使用 <script setup>，可以直接在 <script> 标签中声明变量和方法，而不需要显式返回它们。例如：

vue

复制

<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}
</script>

这种写法更加简洁，减少了样板代码。

2. 自动暴露变量和方法

在 <script setup> 中，所有在 <script> 标签中声明的变量和方法都会自动暴露给模板，无需显式返回。这使得代码更加直观，减少了心智负担。例如：
vue
复制
```
<template>
  <div>{{ message }}</div>
  <button @click="changeMessage">Change Message</button>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Vue!');
function changeMessage() {
  message.value = 'Message Changed!';
}
</script>
```
在模板中可以直接使用 message 和 changeMessage，而不需要在 setup() 中返回它们。

3. 支持类型推断

<script setup> 支持 TypeScript，并且能够自动推断变量和方法的类型。这使得在开发过程中能够获得更好的类型提示和代码补全支持。例如：
vue
复制
```
<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const count = ref<number>(0);

function increment(): void {
  count.value++;
}
</script>
```
在这种情况下，count 的类型被明确声明为 ref<number>，increment 方法的返回类型被声明为 void，这有助于提高代码的可维护性和可读性。

4. 提高开发效率

<script setup> 的语法糖减少了代码量，使得开发者可以更专注于业务逻辑的实现，而不是样板代码的编写。例如，使用 <script setup> 可以快速搭建组件，而不需要手动管理 setup() 函数的返回值。

它还支持解构 props 和 emits，进一步简化了代码。例如：

vue

复制

<template>
  <div>{{ title }}</div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  title: String
});
</script>

这种结构使得组件的逻辑、样式和模板部分清晰分离，便于维护和扩展。

总结

<script setup> 是 Vue 3 中的一个重要特性，它通过减少样板代码、自动暴露变量和方法、支持类型推断等方式，极大地简化了组合式 API 的使用，提高了开发效率和代码可读性。

3....在JavaScript中是拓展运算符

扩展运算符 ... 用于展开一个对象或数组的内容。对于对象来说，它会将对象的所有键值对展开到新的对象中。例如：

const obj1 = { a: 1, b: 2 };

const obj2 = { ...obj1, c: 3 }; // obj2 = { a: 1, b: 2, c: 3 }

{...serchCondition.value}的作用

{...serchCondition.value} 是一个新的对象，它包含了 serchCondition.value 中的所有键值对。假设 serchCondition.value 的值是：

{

category: 'tech',

state: 'published'

}

那么 {...serchCondition.value} 会生成一个新的对象：

{

category: 'tech',

state: 'published'

}

vue学习笔记（组合式api+elementUI介绍）

实战第一课：vue工程化

1.vue项目的创建和启动

2. vue项目的开发流程

什么是vue项目？

vue组件的写法：

以前的vue2那种：

vue3：

3.vue的api风格

1.选项式api

2.组合式api更灵活

4.基础案例的实现：

案例代码优化：

进一步优化：

5.element组件

6.常用组件：表格、表单、按钮、分页

一些疑惑：

1.请问vite和create-vue的区别是啥？

性质不同

功能侧重点不同

使用场景不同

项目结构和配置不同

2. script的setup语法糖有啥用？

1. 简化代码结构

2. 自动暴露变量和方法

3. 支持类型推断

4. 提高开发效率

这种结构使得组件的逻辑、样式和模板部分清晰分离，便于维护和扩展。

总结

3....在JavaScript中是拓展运算符

网站公告

今日签到

热门文章

最新发布