Web学习笔记-Vue3（环境配置、概念、整体布局设计）

Web学习笔记-Vue3（环境配置、概念、整体布局设计）
笔记内容转载自 AcWing 的 Web 应用课讲义，课程链接：AcWing Web 应用课。
CONTENTS
Vue 官网：Vue.js。

Vue.js 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用Vue。

Vue 与 React 的区别主要在于：
- React 的思路是 HTML in JavaScript，也可以说是 All in JavaScript，通过 JavaScript 来生成 HTML，所以设计了 JSX 语法，还有通过 JS 来操作 CSS。
- Vue 是把 HTML、CSS、JS 组合到一起，用各自的处理方式，Vue 有单文件组件，可以把 HTML、CSS、JS 写到一个文件中，HTML 提供了模板引擎来处理。
- React 整体是函数式的思想，在 React 中是单向数据流，推崇结合 immutable 来实现数据不可变。
- Vue 的思想是响应式的，也就是基于数据可变的，通过对每一个属性建立 Watcher 来监听，当属性变化的时候，响应式地更新对应的虚拟 DOM。
总的来说，React 的性能优化需要手动去做，而 Vue 的性能优化是自动的，但是 Vue 的响应式机制也有问题，就是当 state 特别多的时候，Watcher 会很多，会导致卡顿。所以大型应用（状态特别多的）一般用 React，更加可控。而考虑易用性方面，Vue 是更容易上手的，对于项目来说新人更容易接手。

1. 环境配置

首先需要安装 Node.js：NodeJS 的安装及配置。

打开 PowerShell，安装 @vue/cli：
```
npm i -g @vue/cli
1
```
Vue 相比于 React 的其中一个好处是默认提供了一个图形化的项目管理界面，在想要创建项目的文件夹下以管理员身份打开终端输入以下命令：
```
vue ui
1
```
然后我们创建一个名为 my_space 的项目，包管理器选择 npm，然后选上无新手指引的脚手架项目（Scaffold project without beginner instructions），预设选择 Vue3，然后创建项目。

项目创建好后在左侧能够看到导航栏，进入插件页面（Plugins）安装以下插件，其中 @vue/cli-plugin-router 用于多页面路由，@vue/cli-plugin-vuex 类似于 React 中的 Redux，可以让我们在多个组件之间维护同一个数据：
```
@vue/cli-plugin-router
@vue/cli-plugin-vuex
1
2
```
然后我们在依赖页面（Dependencies）安装 Bootstrap。

最后在任务页面（Tasks）的 serve 选项卡中可以运行项目，运行后在输出（Output）中可以看到网站链接：http://localhost:8080/，访问该链接即可看到 Vue 的初始化页面。

我们用 VS Code 打开项目的根目录，源代码位于 src 目录下，其中的 views 目录类似于 Django 中的 Views，每一个页面是一个 View；router 目录是路由，打开可以看到默认有两个路由分别是 / 和 /about；components 目录用于存放各种组件（views 也能存放组件，根据个人习惯决定）；App.vue 为根组件，整个项目的入口在 main.js 文件中。

仔细看一下页面的链接会发现其中有一个 #，如果想去掉可以将 router 目录下 index.js 文件中的 createWebHashHistory 修改为 createWebHistory（有两处需要修改）。

在 main.js 文件中可以看到以下代码：
```
createApp(App).use(router).use(store).mount('#app')
1
```
其中创建了我们的根组件 App，router 就表示路由，store 即 vuex，然后将其挂载到 #app 标签上，该标签可以在 public/index.html 中看到。

2. 使用 Vue 开发项目的基本概念

每一个 .vue 文件都会由三个部分组成：HTML、CSS、JS。其中 CSS 的标签可以加一个属性 scoped，这样不同组件之间的 CSS 选择器就不会相互影响到了：
```
<style scoped>
  ...
style>
1
2
3
```
我们的每个页面中都可能由多个组件组成，每个组件是一个 .vue 文件，可以用以下的方式引入 HelloWorld 组件，并传递 msg 属性给该组件：
```
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  div>
template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
script>
1
2
3
4
5
6
7
8
9
10
11
```
HelloWorld 组件需要 export 出去：
```
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
script>
1
2
3
4
5
6
7
8
```
其中 props 中的属性可以在创建该组件的父组件中传递进来。

现在我们来具体了解一下

CONTENTS

1. 环境配置

2. 使用 Vue 开发项目的基本概念