vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex

1.创建vue项目

使用Vue CLI创建前端工程：

1.方式一：vue create 项目名称

打开cmd执行命令：

vue create 项目名称
1

2.方式二：vue ui

使用图形化方式创建vue方式。首先打开cmd输入命令（快捷键win+R可打开cmd）：

vue ui
1

此时打开项目管理器即可创建项目。

接下来耐心等待项目创建成功即可。
vue项目重点文件/目录：

运行vue项目

使用vscode打开vue项目，在集成终端中运行：

npm run serve
1

什么是node.js

Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。

以下是 Node.js 的一些关键特性：

1. 事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。

2. 单线程：尽管 JavaScript 运行在一个单线程上，但 Node.js 通过事件循环和回调函数来处理并发，避免了多线程编程中的复杂性。

3. NPM（Node Package Manager）：Node.js 拥有一个庞大的第三方库生态系统，通过 npm 可以很容易地安装和管理这些库。

4. 跨平台：Node.js 可以在多个平台上运行，包括 Windows、Linux 和 macOS。

5. 适用于多种场景：Node.js 不仅适用于 Web 服务器端开发，还可以用于构建命令行工具、桌面应用程序、物联网设备等。

6. JavaScript 语言：使用 Node.js 开发，你可以使用同一种语言编写前端和后端代码，这有助于提高开发效率。

7. 模块系统：Node.js 有一个强大的模块系统，允许开发者重用代码和构建大型应用程序。

8. 性能：由于 Node.js 底层使用 C++ 编写，并且利用了 V8 引擎的优化，它在性能方面通常优于传统的服务器端语言。

node.js和vue项目的关系

Node.js 和 Vue.js 项目之间存在一种工具和生态系统的关系，而不是直接的技术依赖关系。下面是它们之间的联系：

1. 构建工具：Node.js 提供了 npm（Node Package Manager），这是 JavaScript 社区中使用最广泛的包管理器。Vue.js 项目通常会使用 npm 来安装依赖项，包括 Vue 核心库和其他第三方库。

2. 开发服务器：在开发 Vue.js 应用时，开发者经常使用 Node.js 来运行一个开发服务器。Vue CLI（命令行界面）工具就是基于 Node.js 的，它可以快速搭建 Vue 项目，并提供一个热重载的开发服务器。

3. 前端工程化：Node.js 为前端工程化提供了基础，Vue.js 项目中常见的构建步骤，如代码转译（Babel）、模块打包（Webpack 或 Rollup）、代码压缩、单元测试等，都依赖于 Node.js 运行时环境。

4. Vue CLI：Vue CLI 是 Vue.js 的官方命令行工具，它允许开发者通过图形化界面或命令行快速生成和管理 Vue 项目。Vue CLI 本质上是一个 Node.js 应用程序，它使用 Node.js 来执行构建和开发任务。

5. VueX：在 Vue.js 项目中，VueX 作为状态管理库，经常与 Vue.js 一起使用。VueX 同样可以使用 npm 来安装，并且它的开发和构建也是基于 Node.js。

6. 服务端渲染（SSR）：对于需要服务端渲染的 Vue.js 应用，Node.js 可以作为一个服务器端环境来执行 Vue.js 应用的渲染工作。

7. 生态系统：Node.js 拥有庞大的生态系统和社区，为 Vue.js 开发者提供了丰富的工具和库，帮助他们构建和优化应用程序。

总结来说，Node.js 为 Vue.js 提供了开发和构建工具，而 Vue.js 是一个用于构建用户界面的框架。两者结合使用，可以提高前端开发效率和应用性能。

2.vue基本使用方式

1.vue组件

Vue.js 使用单文件组件（Single File Components，简称 SFC）来组织组件的代码。一个单文件组件通常是一个 .vue 文件，它将模板（HTML）、脚本（JavaScript）和样式（CSS）组合在一起，使得每个组件都是自包含的。以下是 .vue 文件的基本结构：

<template>
  <!-- 组件的 HTML 模板 -->
</template>

<script>
export default {
  // 组件的逻辑
  name: 'MyComponent',
  data() {
    return {
      // 组件的数据
    };
  },
  methods: {
    // 组件的方法
  },
  // ... 其他选项
};
</script>

<style scoped>
/* 组件的 CSS 样式，scoped 属性表示这些样式只应用于当前组件 */
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

组成部分：

1. 模板（Template）：

   • 位于 <template> 标签内。
   • 使用 Vue 的指令和插值表达式来构建 HTML。

2. 脚本（Script）：

   • 位于 <script> 标签内。
   • 定义组件的逻辑，包括数据、方法、生命周期钩子等。
   • 使用 export default 导出组件。

3. 样式（Style）：

   • 位于 <style> 标签内。
   • 可以包含 CSS 或预处理器（如 Sass、Less）。
   • 使用 scoped 属性可以限制样式的作用域，只影响当前组件。

脚本部分的组件选项：

• name：组件的名称。
• data：返回一个对象，包含组件的响应式数据。
• props：组件的属性列表。
• methods：定义组件的方法。
• computed：计算属性，它们的值是基于组件数据的计算结果。
• watch：观察者，用于监听数据的变化。
• components：定义组件内部使用的子组件。
• directives：自定义指令。
• mixins：混入，用于共享组件逻辑。
• extends：继承另一个组件的选项。
• provide/inject：提供和注入依赖。
• el：指定组件的挂载点。
• template：如果组件定义了 <template> 标签，则此选项可以指定模板的 ID。

示例：

<template>
  <div class="my-component">
    <h1>{{ message }}</h1>
    <button @click="reverseMessage">Reverse Message</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');
    }
  }
};
</script>

<style scoped>
.my-component h1 {
  color: red;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这个示例中，我们定义了一个名为 MyComponent 的组件，它有一个数据属性 message 和一个方法 reverseMessage，用于反转消息。组件的样式被限定在作用域内，只影响当前组件。
总结：

2.文本插值

文本插值是一种将数据绑定到模板的方法，允许你将组件的数据动态地渲染到 HTML 中。文本插值通常使用双花括号 {{ }} 来实现。以下是文本插值的一些关键点：

1. 基本用法：

   • 你可以在模板的任何地方使用 {{ }} 来插入数据。
   • 例如：<p>{{ message }}</p> 将显示变量 message 的值。

2. 表达式：

   • 插值表达式不仅可以包含简单的数据属性，还可以执行简单的 JavaScript 表达式。
   • 例如：<p>{{ message + '!' }}</p> 将显示 message 后面跟着一个感叹号。

3. 更新：

   • 当绑定的数据变化时，插值表达式会自动更新 DOM，以反映最新的值。

4. 避免 HTML 转义：

   • 默认情况下，Vue 会对插值表达式进行 HTML 转义，以防止 XSS 攻击。
   • 如果你希望渲染 HTML，应该使用 v-html 指令，而不是插值表达式。

5. 过滤器：

   • Vue 允许你使用过滤器来格式化插值表达式的输出。
   • 例如：<p>{{ message | capitalize }}</p>，其中 capitalize 是一个过滤器，用于将 message 转换为大写。

6. JavaScript 表达式的限制：

   • 插值表达式支持的 JavaScript 表达式有限制，不能包含语句如 var、if、for 等。

7. 使用场景：

   • 文本插值适用于简单的文本显示，当需要渲染复杂的 HTML 结构时，应该使用 v-html 或组件。

8. 与 v-text 和 v-html 的区别：

   • v-text：替换元素的文本内容，类似于使用 textContent。
   • v-html：替换元素的 HTML 内容，类似于使用 innerHTML。

9. 避免使用在 v-for 列表渲染中：

   • 在使用 v-for 指令进行列表渲染时，不应该使用文本插值，因为它们不能正确地更新每个列表项。

10. 性能考虑：

    • 对于简单的文本显示，文本插值是高效的。但是，如果表达式复杂或包含多个依赖项，可能会导致不必要的 DOM 更新。

以下是一个简单的 Vue 组件示例，演示了如何使用文本插值来显示动态数据：

<template>
  <div class="greeting">
    <h1>{{ greeting }}, {{ name }}!</h1>
    <p>Your count is: {{ count }}</p>
    <button @click="increment">Click me!</button>
  </div>
</template>

<script>
export default {
  name: 'Greeting',
  data() {
    return {
      greeting: 'Hello',
      name: 'World',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count += 1;
    }
  }
};
</script>

<style scoped>
.greeting h1 {
  color: #333;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在这个例子中：

• 我们定义了一个名为 Greeting 的 Vue 组件。
• 在 <template> 部分，我们使用了文本插值来显示 greeting、name 和 count 的数据。
• <h1> 标签中的 {{ greeting }} 和 {{ name }} 将显示 greeting 和 name 数据属性的值，并且它们会随着数据的变化而更新。
• <p> 标签中的 {{ count }} 显示了一个名为 count 的数据属性的值，这个值会随着按钮点击而增加。
• <button> 标签定义了一个点击事件，当按钮被点击时，increment 方法会被调用，从而增加 count 的值。

3.属性绑定

属性绑定允许你将组件的数据动态地绑定到 DOM 元素的属性上。属性绑定使用 v-bind 指令，简写形式为 :。

以下是属性绑定的一些关键用法：

1. 基本用法：

   • 使用 v-bind 或 : 将数据绑定到属性。
   • 例如：<img :src="imageUrl"> 将 imageUrl 数据属性的值绑定到 <img> 元素的 src 属性。

2. 动态属性名：

   • 使用方括号 [] 表示动态属性名。
   • 例如：<button :[key]="value">，如果 key 是 'type'，则生成 <button :type="value">。

3. 类和样式绑定：

   • Vue 提供了 class 和 style 的绑定语法，可以动态地绑定类名和内联样式。
   • 例如：<div :class="{ active: isActive, 'text-danger': hasError }">。

4. 布尔属性：

   • 对于布尔类型的属性，如果数据属性值为 true，则属性被添加到元素上；如果为 false，则不添加。
   • 例如：<input type="checkbox" :disabled="isDisabled">。

5. 对象语法：

   • 将对象传递给 v-bind，对象的每个键值对都会被转换为 DOM 属性。
   • 例如：<div v-bind="{ id: someId, title: someTitle }">。

6. 数组语法：

   • 将数组传递给 v-bind，数组中的每个元素都会绑定到相应的属性。
   • 例如：<img v-bind:[someProp]="someArray">。

7. 修饰符：

   • Vue 提供了修饰符，如 .sync，用于创建更复杂的数据绑定。
   • 例如：<input :value.sync="name">。

8. 使用场景：

   • 属性绑定适用于需要动态设置元素属性的情况，如 href、src、style 等。

9. 避免使用在 v-for 列表渲染中：

   • 在使用 v-for 指令进行列表渲染时，应该使用 v-bind:key 来提供每个节点的唯一键值。

10. 性能考虑：

    • 对于简单的属性绑定，性能是高效的。但是，如果绑定的对象或数组很大，或者包含复杂的数据结构，可能会影响性能。

以下是一个使用属性绑定的示例：

<template>
  <div class="bind-example">
    <img :src="imageUrl" :alt="imageDescription" />
    <button :class="{ active: isActive, 'text-danger': hasError }" @click="toggleActive">
      Click me!
    </button>
    <input type="text" :placeholder="placeholderText" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.png',
      imageDescription: 'A description of the image',
      isActive: true,
      hasError: false,
      placeholderText: 'Enter text here...'
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
      this.hasError = false; // Reset error state
    }
  }
};
</script>

<style scoped>
.active {
  color: green;
}
.text-danger {
  color: red;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

在这个示例中：

• <img> 元素的 src 和 alt 属性通过 v-bind 绑定到相应的数据属性。
• <button> 元素使用对象语法动态绑定类名。
• <input> 元素的 placeholder 属性通过 v-bind 绑定到 placeholderText 数据属性。
• 点击按钮时，toggleActive 方法会被调用，切换 isActive 的值，并重置错误状态。

4.事件绑定

事件绑定允许你监听 DOM 元素的事件，并在事件发生时执行组件中定义的方法。事件绑定使用 v-on 指令，简写形式为 @。

以下是事件绑定的一些关键用法：

1. 基本用法：

   • 使用 v-on 或 @ 监听事件。
   • 例如：<button v-on:click="sayHello">Click me</button> 或 <button @click="sayHello">Click me</button>。

2. 事件修饰符：

   • Vue 提供了一系列事件修饰符，如 .stop、.prevent、.capture 等，用于控制事件的行为。
   • 例如：<button @click.stop="sayHello">Click me</button> 阻止事件冒泡。

3. 按键修饰符：

   • 监听键盘事件时，可以使用按键修饰符指定哪个键触发事件。
   • 例如：<input @keyup.enter="onEnter"> 仅在按下 Enter 键时触发 onEnter 方法。

4. 鼠标按钮修饰符：

   • 监听鼠标事件时，可以使用鼠标按钮修饰符指定哪个鼠标按钮触发事件。
   • 例如：<div @click.right="doSomething">Click me with the right button</div>。

5. 方法参数：

   • 事件处理方法可以接收事件对象作为参数。
   • 例如：<button @click="sayHello($event)">Click me</button>。

6. 内联表达式：

   • 可以在事件绑定中使用 JavaScript 表达式。
   • 例如：<button @click="counter += 1">Increment</button>。

7. 使用场景：

   • 事件绑定适用于需要响应用户操作的情况，如点击、输入、滚动等。

8. 避免直接在 HTML 中使用 JavaScript：

   • Vue 推荐使用事件绑定代替直接在 HTML 中使用 onclick 等属性。

9. 使用 v-on 还是 @：

   • v-on 是更完整的写法，允许在复杂表达式中使用。
   • @ 是简写形式，适用于简单的方法绑定。

10. 组件事件：

    • 组件可以监听子组件触发的事件，使用 v-on 或 @ 监听 $emit。

以下是一个使用事件绑定的示例：

<template>
  <div class="event-binding-example">
    <button @click="sayHello">Say Hello</button>
    <input type="text" @input="handleInput" />
    <button @click.stop="sayGoodbye">Say Goodbye</button>
    <button @click.capture="saySecret">Say Secret (capture)</button>
    <button @click.prevent="sayPrevented">Prevent Default</button>
    <button @click.exact="sayExact">Exact Click</button>
    <input type="text" @keyup.enter="onEnter" />
  </div>
</template>

<script>
export default {
  methods: {
    sayHello() {
      console.log('Hello!');
    },
    sayGoodbye() {
      console.log('Goodbye!');
    },
    saySecret(event) {
      console.log('Secret message:', event.target.value);
    },
    sayPrevented(event) {
      console.log('This action is prevented by default.');
    },
    sayExact() {
      console.log('This will only trigger when exactly clicked, not right-click.');
    },
    onEnter() {
      console.log('Enter key was pressed.');
    },
    handleInput(event) {
      console.log('Input changed:', event.target.value);
    }
  }
};
</script>

<style scoped>
/* 样式省略 */
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

在这个示例中：

• <button> 元素绑定了 sayHello 和 sayGoodbye 方法，分别在点击时执行。
• 使用 .stop 修饰符阻止 sayGoodbye 按钮的点击事件冒泡。
• 使用 .capture 修饰符在捕获阶段监听 saySecret 事件。
• 使用 .prevent 修饰符阻止 sayPrevented 按钮的默认行为。
• 使用 .exact 修饰符确保 sayExact 方法只在没有其他修饰键（如 Ctrl、Shift）时触发。
• <input> 元素监听 keyup.enter 事件，仅在按下 Enter 键时触发 onEnter 方法。
• handleInput 方法监听 input 事件，每次输入框内容变化时都会执行。

5.双向绑定

双向绑定允许你将表单输入和应用状态进行自动同步。这意味着当输入框的值变化时，绑定的数据也会相应地更新，反之亦然。Vue 提供了 v-model 指令来实现双向绑定。

以下是 v-model 的一些关键用法：

1. 基本用法：

   • 使用 v-model 将输入框的值与数据属性进行双向绑定。
   • 例如：<input v-model="username" type="text">。

2. 不同类型的输入：

   • v-model 可以用于不同类型的 <input> 元素，如 text、password、email 等。
   • 也可以用于 <textarea> 和带有 contenteditable 属性的元素。

3. 修饰符：

   • Vue 提供了一些修饰符，如 .lazy、.number 和 .trim，用于控制 v-model 的行为。
   • 例如：<input v-model.lazy="msg" debounce="300"> 会在 300ms 延迟后更新数据。

4. 组件的 v-model：

   • 组件也可以自定义 v-model 行为，通过 model 选项指定 prop 和 event。

5. 使用场景：

   • 双向绑定适用于表单输入，可以减少样板代码，提高开发效率。

6. 避免滥用：

   • 虽然 v-model 非常方便，但不应过度使用，特别是在性能敏感或复杂逻辑的场景中。

7. 自定义事件：

   • 当使用组件时，可以通过自定义事件实现 v-model 的行为。

8. 修饰符示例：

   • .lazy：取代 input 事件，使用 change 事件进行更新。
   • .number：输入字符串转为有效的数字。
   • .trim：自动过滤输入首尾的空格。

以下是一个使用 v-model 的示例：

<template>
  <div class="two-way-binding-example">
    <input v-model="username" placeholder="Enter your username">
    <p>Username: {{ username }}</p>

    <input v-model.number="age" type="number" placeholder="Enter your age">
    <p>Age: {{ age }}</p>

    <textarea v-model="message" placeholder="Type a message"></textarea>
    <p>Message: {{ message }}</p>

    <input v-model.trim="searchText" placeholder="Type to search">
    <p>Search Text: {{ searchText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      age: null,
      message: '',
      searchText: ''
    };
  }
};
</script>

<style scoped>
/* 样式省略 */
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

在这个示例中：

• <input> 元素用于绑定 username，age 和 searchText。
• age 输入框使用了 .number 修饰符，确保输入值被转换为数字。
• message 使用 <textarea> 进行绑定，允许多行文本输入。
• searchText 输入框使用了 .trim 修饰符，自动去除输入值的首尾空格。

双向绑定简化了表单输入和应用状态之间的同步，使得开发交互式表单更加容易。

6.条件渲染

Vue 提供了几种指令来实现条件渲染，包括 v-if、v-else-if、v-else 和 v-show。

v-if

v-if 是一个条件性地渲染元素的指令。当条件为真时，元素会被渲染到 DOM 中；当条件为假时，元素不会被渲染。

<template>
  <div>
    <p v-if="isVisible">This paragraph will be shown only if isVisible is true.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

v-else-if 和 v-else

v-else-if 和 v-else 与 v-if 配合使用，提供类似于 JavaScript 中的 if-else-if-else 结构。

<template>
  <div>
    <p v-if="type === 'A'">A</p>
    <p v-else-if="type === 'B'">B</p>
    <p v-else>Not A or B</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 'C'
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

v-show

与 v-if 不同，v-show 总是渲染元素到 DOM，然后根据条件切换元素的 CSS 属性 display 来显示或隐藏元素。

<template>
  <div>
    <p v-show="isDisplayed">This paragraph will always be rendered to the DOM but may be hidden.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDisplayed: true
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

条件渲染的注意事项

• v-if 是真正的条件渲染，因为它确保在条件不满足时，元素不会被渲染到 DOM 中，这使得它适用于条件不经常改变的场景。
• v-if 会触发元素的销毁和重建过程，如果条件变化频繁，可能会影响性能。
• v-show 适合用于频繁切换显示状态的场景，因为它避免了 DOM 元素的创建和销毁。
• 使用 v-if 和 v-for 时要小心，因为 v-for 具有比 v-if 更高的优先级。如果你同时使用它们，v-for 将首先执行，这可能不是你想要的行为。

示例

以下是使用 v-if 和 v-else-if 进行条件渲染的示例：

<template>
  <div>
    <p v-if="grade >= 90">A</p>
    <p v-else-if="grade >= 80">B</p>
    <p v-else-if="grade >= 70">C</p>
    <p v-else>F</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      grade: 85
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这个示例中，根据 grade 的值，将显示对应的成绩等级。如果 grade 大于或等于 90，显示 “A”；如果大于或等于 80，显示 “B”，以此类推。

7.axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。它在前端开发中非常流行，因为它提供了一个简单易用且功能强大的 API 来处理 HTTP 请求。

以下是 Axios 的一些主要特性：

1. 从浏览器发出 XMLHttpRequests 请求：Axios 封装了浏览器的 XMLHttpRequest API，使得发送请求更加简单。

2. 从 Node.js 发出 http 请求：在 Node.js 环境中，Axios 可以使用 http 模块来发出请求。

3. 支持 Promise API：Axios 支持 Promises，这意味着你可以使用 .then() 和 .catch() 方法来处理请求的成功和失败情况。

4. 拦截请求和响应：Axios 允许你拦截请求和响应，以便在请求发出之前或响应返回之前进行处理。

5. 转换请求和响应数据：你可以在请求发送前后或响应返回前后转换数据，例如，将 JSON 数据转换为 JavaScript 对象。

6. 取消请求：Axios 提供了取消请求的功能，这对于处理长时间运行的请求或依赖于其他条件的请求非常有用。

7. 自动转换 JSON 数据：当请求返回 JSON 格式的数据时，Axios 会自动将其转换为 JavaScript 对象。

8. 设置全局或默认配置：你可以设置全局配置，这些配置将应用于所有请求，也可以为特定请求设置默认配置。

9. 支持 TypeScript：Axios 提供了 TypeScript 支持，使得在 TypeScript 项目中使用更加方便。

安装 Axios

通过 npm 或 yarn 来安装 Axios：

npm install axios
# 或者
yarn add axios
1
2
3

使用 Axios 发送请求

以下是使用 Axios 发送 GET 和 POST 请求的基本示例：

// 引入 Axios
import axios from 'axios';

// 发送 GET 请求
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data); // 处理数据
  })
  .catch(error => {
    console.error('Error during fetch:', error);
  });

// 发送 POST 请求
axios.post('https://api.example.com/data', {
    firstName: 'John',
    lastName: 'Doe'
  })
  .then(response => {
    console.log(response.data); // 处理数据
  })
  .catch(error => {
    console.error('Error during fetch:', error);
  });
//axios统一使用方式：
    setNameByAxios(context){
      axios({
        url:'/api/admin/employee/login',
        method:'post',
        data:{
          username:'admin',
          password:'123456'
        }
      }).then(res => {
        //此处对请求结果进行处理及其他
      })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

取消请求

Axios 允许你取消请求，这对于处理用户可能取消的操作非常有用：

// 创建一个取消令牌
const source = axios.CancelToken.source();

axios.get('https://api.example.com/data', {
  cancelToken: source.token
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message);
    } else {
      console.error('Error during fetch:', error);
    }
  });

// 取消请求
source.cancel('Operation canceled by the user.');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Axios 是一个强大且灵活的 HTTP 客户端，适用于任何需要与服务器通信的 JavaScript 应用程序。

跨域问题

在vue.config.js中配置：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port:7777,
    proxy:{
      '/api':{
        target:'http://localhost:8080',
        pathRewrite:{
          '^/api':''
        }
      }
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

总结：

3.路由vue-Router

Vue Router用于构建单页面应用程序（SPA）。它允许你通过不同的 URL 来映射和渲染不同的组件，从而实现页面的导航和交互，而无需重新加载整个页面。
所谓的路由，就是根据浏览器路径不同，用不同的视图组件替换这个页面内容

路由配置与嵌套路由

路由配置是 Vue Router 的核心概念之一，它定义了应用程序的路由结构和相应的组件。以下是路由配置的一些关键点：

1. 路径（Path）：每个路由都有一个路径，它对应于 URL 的一部分。路径可以是静态的，也可以包含动态片段。

2. 组件（Component）：每个路由应该映射到一个组件，当路由被匹配时，相应的组件将被渲染。

3. 视图（View）：在 Vue 中，路由通常对应于一个视图，即应用程序界面的一部分。

4. 嵌套路由（Nested Routes）：子路由允许你将路由组织成树状结构，以反映应用程序的组件层次结构。

5. 路由对象（Route Object）：路由配置通常是一个数组，其中每个元素是一个对象，定义了单个路由的配置。

6. 路由参数（Route Params）：动态路由可以通过路径参数传递数据到组件。

7. 查询参数（Query）：除了路径参数，路由还可以包含查询参数，用于传递额外的信息。

8. 重定向（Redirect）：可以在路由配置中定义重定向，将特定的路径重定向到另一个路径。

9. 命名视图（Named Views）：命名视图允许你给路由命名，然后使用这个名字进行导航。

10. 路由守卫（Route Guards）：可以在路由配置中定义路由守卫，以控制访问权限或执行导航前后的操作。

11. 滚动行为（Scroll Behavior）：可以配置路由的滚动行为，以控制页面导航后的滚动位置。

12. 模式（Mode）：可以设置 Vue Router 的模式，如 hash 或 history。

嵌套路由是 Vue Router 的一个特性，它允许你在组件中定义多个路由，这些路由可以继承父组件的路由路径，形成路由的嵌套结构。这在构建具有多层级页面结构的应用程序时非常有用，例如具有多个子页面的仪表板或具有子分类的商品目录。

以下是一个基本的路由配置和嵌套路由示例：

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/404',
    component: () => import('../views/404View.vue')
  },
  {
    path: '/c',
    component: () => import('../views/container/ContainerView copy.vue'),
    redirect:'/c/p1',
    //嵌套路由
    children:[
      {
        path:'/c/p1',
        component: () => import('../views/container/P1View.vue')
      },
      {
        path:'/c/p2',
        component: () => import('../views/container/P2View.vue')
      },
      {
        path:'/c/p3',
        component: () => import('../views/container/P3View.vue')
      }
    ]
  },
  {
    path:'*',
    redirect: '/404'
    //重定向
    // 当请求资源不存在时进行重定向
  }
]

const router = new VueRouter({
  routes
})

export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

3.状态管理vuex

Vuex 它采用集中式存储管理所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 适用于复杂的应用程序，尤其是那些需要多个组件共享状态的情况。

以下是 Vuex 的一些核心概念：

1. State：这是 Vuex 存储所有状态的地方，是一个单一的对象。

2. Getters：类似于组件的计算属性，允许你从 store 中获取数据。

3. Mutations：是同步函数，用于更改 store 中的状态。它们是唯一可以修改状态的方法。

4. Actions：可以包含任意异步操作，用于提交 mutations。

5. Modules：当应用变得复杂时，store 可以被分割成模块，每个模块拥有自己的 state、mutations、actions、getters，甚至是嵌套子模块。

Vuex 的基本工作流程：

1. 定义 Store：创建一个新的 Vuex store 实例，并定义 state、getters、mutations、actions。

2. 提交 Mutations：通过在组件中提交 mutations 来改变状态。

3. 执行 Actions：通过在组件中分发 actions 来执行异步操作，并在操作完成后提交 mutations。

4. 读取 State：通过 getters 来获取 state，可以在组件中使用。

5. 映射到组件：使用 mapState、mapGetters、mapActions 和 mapMutations 辅助函数将 store 中的状态和组件的选项映射起来。

安装 Vuex

通常，Vuex 会与 Vue 一起安装，如果你使用的是 Vue CLI 创建的项目，Vuex 可能已经被包含在内。如果没有，可以通过 npm 或 yarn 安装：

npm install vuex@next --save  # 对于 Vue 3 使用 @next 标签
# 或者
yarn add vuex@next
1
2
3

创建 Store

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)

//集中管理多个组件共享的数据
export default new Vuex.Store({
  //集中定义共享数据
  state: {
    name:'未登录游客'
  },
  getters: {
  },
  //修改共享数据只能通过mutation实现，必须是同步操作
  //通过当前属性中定义的函数修改共享数据
  mutations: {
    setName(state,newName){
      state.name = newName
    }
  },
  //通过actions可以调用到mutation，在actions中可以进行异步操作
  actions: {
    setNameByAxios(context){
      axios({
        url:'/api/admin/employee/login',
        method:'post',
        data:{
          username:'admin',
          password:'123456'
        }
      }).then(res => {
        if(res.data.code == 1){
          //异步请求后，需要修改共享数据
          //在actios中调用mutation中定义的setName函数
          context.commit('setName',res.data.data.name)
        }
      })
    }
  },
  modules: {
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

使用 Store

在 Vue 应用中，你可以在 main.js 或 main.ts 中将 store 实例化并挂载到 Vue 实例上（此处我的是main.js）*：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,  //使用vuex功能
  render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11

在组件中使用 Store

<template>
  <div id="app">
    欢迎你，{{ $store.state.name }}

    <input type="button" value="通过mutation修改共享数据" @click="handleUpdate"/>
    <input type="button" value="调用actions中定义的函数" @click="handleCallAction"/>

    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>

  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods:{
    handleUpdate(){
      //mutations中定义的函数不能直接调用，必须通过这种方式来调用
      //setName为mutations中定义的函数名称，lisi为传递的参数
      this.$store.commit('setName','lisi')
    },
    handleCallAction(){
      //调用actions中定义的函数，setNameByAxios为函数名称
      this.$store.dispatch('setNameByAxios')
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

使用 Vuex 可以更好地管理应用程序的状态，尤其是在多个组件需要共享状态或状态变化需要触发多个组件更新时。它提供了一种清晰和可预测的方式来组织状态逻辑。