Vue.js 3 应用开发学习指南（一）：启动与预热！

最近用 Vue 做了个项目，总结了一些经验，做成了一个系列课程，陆续会在宁皓网发布。这里先给大家划个学习重点，您在学习 Vue 开发应用的时候可以作为参考。避免学习陷阱的方法就是少看视频多实践。

用 Vue 做出来的东西就是应用的界面，也就是应用的客户端，也可以叫前端应用。在应用的界面上要显示的数据一般都来自服务端，也就是 Vue 应用可以对服务端应用接口发出 HTTP 请求，然后把请求回来得到的数据放到界面上展示出来。Vue 也可以把用户在界面上生产出来的数据交给服务端去处理，服务端可以把数据永久地存储到应用的数据仓库里。

Vue 3 给大家提供了一种新的创建组件的方法，就是通过 Composition API。之前咱们经常用的是使用 Options API 创建应用的组件。平时开发的时候不会看到这些名词，所以你不必太在乎，你只要知道现在有两种创建组件的方法就行了。两套方法都可以造出你想要的应用，掌握其中任意一套方法即可。对于 Vue 的初学者来说，我推荐先从 Options API 开始。这篇文章我们就先介绍一下用 Vue 的 Options API 创建组件。

现在学会 Vue 框架，不但可以创建前端应用，还可以通过一些方法（UniApp / Taro.js）开发各种平台的小程序，甚至是移动端与桌面应用，Vue 是非常值得学的技术。

前置知识

学习使用 Vue 开发前端应用或者小程序，前置知识就是最基本的 Web 老三样：HTML，CSS 与 JavaScript。如果您打算成为一名开始者，强烈推荐先学它们仨，最长久，最实用，可以用它们做很多事情。只需要学会基础即可，不用学太多，理解了核心概念以后，可以随用随学。

Vue 做的就是应用的界面，界面的内容结构用的就是 HTML 组织出来的。你要知道一块界面如何用 HTML 组织好。HTML 提供了很多标签（元素），不同的标签在浏览器上会呈现出不同的样子，标签也可以称为元素。用 CSS 可以设计界面的样式，比如元素的定位，长度，宽度，排版，背景，边框，字号，文字颜色等等。

你要做到，给你一张设计图，或者看到一个页面的时候，你大概知道如何用 HTML 与 CSS 做出来。也就是知道如何使用 HTML 把界面结构组织好，然后用 CSS 设置这个界面的样式。

JavaScript 是一种程序语言，只需要学会基本语法，知道基本的数据类型（数字，字符串，数组，对象），数据的基本运算，逻辑判断，声明变量，定义与执行函数。一开始不用学太多，我准备了一个 JavaScript 核心课程，你只需要理解这个课程里所有的语法就行了。https://ninghao.net/course/8115

很多东西我都记不住，都是现用现查，在开发应用的时候，我会随时搜索。关于 JavaScript 语言，最好的文档库就是 MDN ，几乎可以解决你所有的 JavaScript 问题。别学太多，语言基础最多用半个月到一个月的时候搞定。我们不需要知道所有才能去干活，不知道的随时查就行。

开发工具

开发 Vue 应用，你只需要这几样工具：

编辑器：写代码用
终端：执行命令，运行服务
Git：源代码管理
浏览器：测试开发的 Vue 应用

编辑器可以使用 VSCode（有自己喜欢的就用自己喜欢的）。终端是执行命令的地方，Windows 用户可以下载安装一个完整版的 Cmder，里面包含了很多常用的工具，比如 Git。macOS 用户直接使用系统自带的那个 Terminal 就行。在系统上都把 Git 安装配置好，用它管理项目的源代码。浏览器用来测试预览正在开发的 Vue 应用。

编辑器配置

如果你选择使用 VSCode 编写 Vue 应用，可以在编辑器里安装一个 Vetur 插件，它可以高亮显示 Vue 组件的代码，还提供了一些其它的功能。再安装一个 Prettier 插件，用它自动格式化应用的代码，装好以后可以勾选一下编辑器的 Format on save 这个配置选项，保存时自动格式化。

如果你发现不能自动格式化，可以打开编辑器的命令面板（command + shift + P），搜索并执行 Format Document 命令，这样会弹出提示让我们选择一种格式化器，可以选择使用 Prettier 作为代码的格式化器。

开发环境

Node.js：JavaScript 运行环境

下载一个长期支持版本（LTS）的 Node.js ，把它安装在自己的本地电脑上。用 Vue CLI 创建 Vue 项目，运行项目的开发服务，还有在编译项目的时候都会用到 Node.js。装好以后会自带一个包管理工具叫 NPM，你也可以额外再安装一个叫 Yarn 的包管理工具，这两个东西用谁都行，不过从 Vue 官方文档的说明来看，官方更推荐用 Yarn，选择用谁都无所谓，因为随时都可以切换。

Vue CLI

Vue CLI 是 Vue 提供的一个命令行工具，用它可以创建 Vue 项目，可以运行与编译项目。使用 Node.js 的包管理工具，在电脑的全局范围安装一下这个工具，就可以使用 vue 这个命令了。

npm install @vue/cli --global

或者用 Yarn：

yarn global add @vue/cli

启动项目

如果你打算用 Vue 创建一个独立的前端应用，而不只是想把 Vue 集成到现有的网站或者应用里，那在创建这个 Vue 项目的时候就要使用 Vue CLI。用命令创建一个 Vue 项目，然后再用命令启动这个项目在本地的开发服务，在浏览器上可以打开预览正在开发的项目，在编辑器里修改项目然后保存文件以后，无需手动刷新，就可以立即在浏览器上看到修改之后的结果。

这种独立的 Vue 应用，一般都会使用单文件组件，也就是应用里的每个组件可以放在各自独立的带 .vue 后缀的文件里。使用这种独立文件的方法创建组件跟你在官方文档里看到的例子不太一样，所以要注意一下。

创建一个 Vue 项目

cd ~/desktop
vue create ninghao-vue

进入到你想要保存项目的地方，然后使用 vue 命令 create 一个 Vue 项目，放在 ninghao-vue 这个目录的下面。在创建项目的时候会让我们选择一个项目的预设，也就是它会根据我们的选择创建一个 Vue 项目。选择创建一个 Vue 3 项目。

这里你可以选择默认的预设，也可以选择手工设置，如果是手工设置会问你很多问题，让你做出选择，然后根据你的选择给你创建一个 Vue 项目。这也无所谓，因为随时都可以修改，也可以重新创建一个项目。

运行项目的开发服务

cd ~/desktop/ninghao-vue
yarn serve

或者用 NPM：

npm run serve

在创建的 Vue 项目里定义了几个命令，比如 serve 这个命令可以启动本地的开发服务，用 build 命令可以编译在生产环境上使用的应用。启动了本地开发服务以后，可以通过一个地址访问到我们的 Vue 项目，在本地电脑上访问项目的地址默认是 http://localhost:3000 ，你在局域网的其它设备上也可以通过电脑的本地 IP 地址访问到这个 Vue 项目。比如 http://192.168.31.140:3000，192.168.31.140 是我的运行 Vue 开发服务的这台电脑在我的局域网内部的 IP 地址。

成功创建了 Vue 项目，启动了项目的本地开发服务，就可以开练了。

项目结构

用你的编辑器打开新创建的这个 Vue 项目，先观察一下项目的文件与目录结构。在项目根目录下面会有一些文件，这些文件一般就是项目里用的一些开发工具的配置文件，如果你不知道它们是什么，可以暂时忽略掉它们。

├── README.md
├── babel.config.js
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
└── yarn.lock

package.json

文件里描述了当前这个项目，项目的名字，介绍，项目依赖的包，自定义的命令等等。

node_modules

项目依赖的包都会下载到这个目录的下面。

public

在 public 目录里面有个 index.html 文档，我们开发的 Vue 应用会挂载到这个网页上。

src

应用的源代码文件都会放在这个目录的下面，这个目录里的结构我们可以自己定义。

src/main.js

这个 main.js 是应用的入口文件，在这个文件里要创建一个 Vue 应用，创建这个应用的时候要指定使用一个 Root 组件，也可以称为主组件。

dist

在终端项目所在目录的下面执行 npm run build 或者 yarn build ，就会编译生成适合在生产环境上运行的应用，生成的应用会放在这个 dist 目录的下面。最终我们开发之后编译生成的前端应用，其实就是一个网页，一些 CSS 样式表，还有一些 JavaScript 文件。把这个 dist 目录里的静态文件资源放到某个 Web 服务器上就算是完成部署了。

组件

在 Vue 框架里有个关键概念就是 “组件 ”（Component），一个组件你可以把它想成是应用的某一块儿界面，组件可以组合到一块儿使用，最终构成应用的整体的界面。开发 Vue 应用，就是去创建一些组件，设计组件要展示的内容，样式，以及行为。

创建一个组件，你可以决定这个组件里边儿要展示应用的哪部分内容，组件可以做什么事情。在组件里你可以使用 HTML 与 CSS 来设计组件的内容结构与样式。在组件里可以定义一些方法，比如获取组件需要的数据用的方法，处理在组件的元素上发生的事件的方法。

组件可以组合到一块儿使用，比如你定义了一个 PostList（内容列表）组件，又定义了一个 PostListItem （内容列表项目）组件。你在内容列表组件（PostList）里可以使用内容列表项目组件（PostListItem）来展示每个内容项目。这样我们就可以说 PostList 组件是 PostListItem 组件的父组件，PostListItem 是 PostList 的子组件。在内容列表项目组件里需要用的数据，可以在它的父组件（PostList）那里，通过属性（props）的方式传递过来。

PostList 示例：

<div class="post-list">
  <PostListFilter />
  <PostListItem 
    v-for="post in posts"
    :item="post"
    :key="post.id"
  />
</div>

上面这个例子是 PostList 这个组件的模板可能的样子，在这个组件里使用了 PostListFilter 组件，还有一个 PostListItem 组件。在这个组件上，我们使用了 Vue 框架提供的 v-for 指令，循环了一下在 PostList 组件里的一个叫 posts 的数据，每次循环当前项目的名字叫 post，然后我们通过绑定 PostListItem 组件的 item 属性，把 post 这个数据交给了 PostListItem 组件使用。

这样这个 PostListItem 组件的模板，可以像这样：

<div class="post-list-list">
  <h3>{{ item.title }} - {{ item.user.name }}</h3>
</div>

假设上面是 PostListItem 组件的模板，这里绑定输出了 item 这个属性里的两个数据，item.title 是内容的标题，item.user.name 是内容作者的名字。这个 PostList 组件最终在浏览器上展示的时候，界面的源代码大概会像这样：

<div class="post-list">
  <div class="post-list-filter">...</div>
  <div class="post-list">
    <h3>十年生死两茫茫，不思量，自难忘 - 苏轼</h3>
  </div>
  <div class="post-list">
    <h3>曾经沧海难为水，除却巫山不是云 - 元稹</h3>
  </div>
  ...
</div>

单文件组件的结构

在 Vue 应用里可以创建单文件组件，这些文件的后缀是 .vue，也就是一个这样的文件就定义了一个 Vue 组件。在组件文件里分成了三个部分，组件的模板（tempalte），组件的脚本（script），还有组件的样式（style）

<template>
</template>

<script>
</script>

<style>
</style>

模板

组件的模板会放在 .vue 文件的 <template> 标签里面，你可以在这里使用 HTML 设计组件的内容结构。

<template>
  <div>宁皓网</div>
</template>

脚本

组件的脚本放在 script 标签里面，在这里要默认导出一个对象，这个对象里面的东西就是组件的脚本，在里面你可以定义组件需要的东西，比如组件的数据，属性，方法等等。

<script>
export default {
  // 数据
  data() {
    return {
      posts: []
    }
  },
  
  // 方法
  methods: {
    async getPosts() {
      // ...
    }
  }
}
</script>

样式

组件模板需要的样式可以放在一组 style 标签里面。

<style>
  .post-list {
    max-width: 750px;
  }
</style>

你也可以单独给组件创建一些样式表，然后在 style 标签里面，用 @import 导入这些样式表，像这样：

<style>
@import './styles/post-list.css';
</style>

数据：data

在 Vue 组件里要展示的数据可以通过在这个组件内部定义的方法请求服务端应用接口获取到，也可以通过属性的方式传递过来。比如在上面那个例子里，PostList 组件循环处理了一个叫 posts 的数据，这个数据应该是一组内容列表。在这个组件里可以定义一个请求服务端内容列表接口用的方法，成功以后，把服务端应用响应回来的数据交给组件里的 posts 这个数据。这样在组件里就可以使用这个数据了。

在组件里可以添加一个 data 方法返回组件里面需要的数据，这里也可以理解成是在组件里声明一下组件里都需要哪些数据，这些数据可能暂时没有值，可以在执行了获取数据用的方法以后再设置这些数据的值。

PostList 组件里的数据：

data() {
  return {
    posts: []
  }
}

上面我们在 PostList 组件里面用 data 方法返回了组件需要的数据，这里有一个 posts 数据，暂时先让它等于一个空白的数组，等以后请求服务端内容列表接口获取到了数据，可以重新设置 posts 这个数据的值。当组件里的数据发生变化的时候，组件会重新被渲染显示更新之后的结果。

方法：methods

在 Vue 组件里可以定义一些行为，也就是组件可以执行的一些方法，比如获取数据用的方法，元素事件的处理器等等，这些都可以定义成组件的方法。在定义组件的时候，在组件对象里添加一个 methods 属性，然后在里面可以添加一些方法。

methods: {
  // 组件的方法
}

比如在 PostList 组件里面，需要一个请求服务端接口获取内容列表数据用的方法，可以把这个方法放在这个 methods 属性里面。

使用 HTTP 客户端可以请求服务端应用接口，比如 axios 就是一种可以用在 Vue 应用里的 HTTP 客户端。在我们的项目里安装一下这个东西，就可以在应用里导入使用它了。

下面是这个请求内容列表接口方法可能的样子：

  methods: {
    async getPosts() {
      try {
        const response = await axios.get('http://localhost:3000/posts');
        this.posts = response.data;
      } catch (error) {
        console.log(error.response);
      }
    }
  }

在上面这个 getPosts 方法里面，我们用 axios 上的 get 方法，发出一个 GET 类型的 HTTP 请求，这个请求的地址就是服务端应用的内容列表接口。请求成功以后可以设置一下组件里的 posts 这个数据，让它等于响应里的 data 这个属性：

this.posts = response.data;

一开始组件里的 posts 数据的值是一个空白的组件，执行 getPosts 获取到了内容列表数据，设置了一下这个 posts 数据的值，组件的数据有变化，它就会被重新渲染，所以我们会立即在应用的界面上看到更新之后的结果。

在这个方法里用了 axios 这个东西，所以你需要先安装并导入它，才能在组件里使用它。

import axios from 'axios';

生命周期：Life Cycle

Life Cycle 生命周期，指的就是组件的不同阶段。在组件里可以添加一些生命周期方法，这些方法会在组件的不同阶段被调用。比如组件被创建之后，被挂载以后，被更新之后，取消挂载之后。这些都有一个对应的生命周期方法。你需要在组件的哪个阶段去做一些事情，只需要在组件里添加一个对应的生命周期方法，在里面添加要做的事情就行了。

比如 created 这个方法会在组件被创建之后调用。你想在这个阶段执行一些任务，可以在组件里定义一个叫 created 的方法，然后在里面添加要做的事情。

在之前的例子我们提到过，PostList 组件可以通过 getPosts 方法获取到内容列表数据，但是这个方法要在什么时候被执行呢？比如可以让它在组件被创建之后执行，也就是在应用里创建了 PostList 组件之后，可以请求获取这个组件里需要的内容列表数据。

在 PostList 里定义 created 生命周期方法：

created() {
  // 请求获取内容列表数据
  this.getPosts();
}

组件属性：props

在 Vue 应用里定义组件的时候，可以声明一下这个组件支持的一些属性，这样在使用这个组件的时候可以设置组件的这些属性的值，在组件里面可以使用这些属性的值。组件支持的属性可以放在组件的 props 这个选项里。

比如在上面的例子里，PostList 组件在使用 PostListItem 组件的时候，就设置了这个组件的 item 属性，对应的值应该是一个内容项目。在 PostListItem 组件的模板里，绑定输出了这个内容项目里的内容的标题，还有内容作者的名字。

PostListItem 组件里声明属性：

props: {
  item: Object
}

props 里的东西就是组件支持使用的一些属性，在 PostListItem 组件里有一个 item 属性，它的值的类型是一个 Object（对象）。这样使用这个组件的时候，就可以设置这个 item 属性的值，像这样：

  <PostListItem 
    v-for="post in posts"
    :item="post"
    :key="post.id"
  />

上面是在 PostList 组件里使用的 PostListItem 组件，先在这个组件里循环了一下 posts 数据，每次循环的时候都会把当前这个内容项目交给 PostListItem 组件的 item 属性。

注意这里用了一个绑定的写法，绑定指的就是绑定组件里的某个数据的值， :item="post" 这是一种简单的写法，完整的写法像这样：v-bind:item="post" 。这里绑定的数据叫 post，这个 post 应该是当前这个组件里的某个数据，这里就是循环组件的 posts 数据的时候，当前被循环的内容项目。

这样就会把一个内容项目数据传递到 PostListItem 这个组件里，在 PostListItem 组件的脚本里可以使用 this.item 得到组件的 item 这个属性。在这个组件的模板里可以绑定输出这个 item 属性里的数据：

<div class="post-list-list">
  <h3>{{ item.title }} - {{ item.user.name }}</h3>
</div>

计算属性：computed

在组件里可以定义一些计算属性，你可以在这些计算属性里使用组件里的数据，做一些加工，处理，转换等等这些操作计算出一个新的值。然后你在组件里就可以使用这个计算属性的值，比如在组件的方法里使用它，或者把它绑定到组件的模板上显示出来。当在计算属性里使用的组件数据发生变化的时候，这个计算属性会自动重新计算出新的值。

Vue 组件里的计算属性可以放在 computed 里面，它是一个对象，里面可以定义计算属性，每个计算属性都是一个方法，方法的名字就是这个计算属性的值，方法返回（return）的东西就是这个计算属性提供的值。你在组件里可以使用这个计算属性的名字引用这个计算属性提供的值。

在 PostList 组件里定义一个计算属性：

computed: {
  postImageURL () {
    return `${API_BASE_URL}/files/${this.item.file.id}/serve?size=large`
  }
}

上面定义了一个叫 postImageURL 的计算属性，在这个计算属性里面用到了组件里的一个属性的值（item），这样当这个属性的值发生变化的时候，这个计算属性也会重新计算出新的值。在组件的脚本里可以用 this.postImageURL 引用这个计算属性的值，在组件的模板里，也可以绑定输出这个计算属性的值：{{ postImageURL }}，也可以把它的值绑定在某个元素的属性上：<img :src="https://ninghao.net/postImageURL" />

重构应用

之前我们用 Vue CLI 创建了一个 Version 3 版本的 Vue 应用，就是在执行 vue create ninghao-vue 命令创建应用的时候，可以选择 Vue 3 这个预设。下面把项目里的 src 下面的东西全部都删除掉，我们一块儿再重新创建一个 Vue 应用。

主组件

创建 Vue 应用的时候需要一个主组件，先去创建这个组件。

src/app/app.vue<新建>

<template>
  <h1>{{ appName }}</h1>
</template>

<script>
export default {
  data() {
    return {
      appName:'宁皓网',
    };
  },
};
</script>

这是一个非常简单的组件，在这个组件里声明一个叫 appName 的数据，它的值是宁皓网，我们把这个 appName 数据绑定在组件的模板里了，用一组 h1 元素包装了这个数据的值。

应用入口

Vue 应用的入口文件要放在 src 的根目录下面，文件的名字是 main.js。

src/main.js<新建>

import { createApp } from 'vue';
import App from './app/app.vue';

/**
 * 创建应用
 */
const app = createApp(App);

/**
 * 挂载应用
 */
app.mount('#app');

创建 Vue 应用的时候用的是 vue 这个包里提供的 createApp，使用它的时候要提供应用的主组件，这里我们用的就是之前创建的 App 组件。新建的这个应用叫 app，然后执行 app 上面的 mount 方法，把应用挂载到页面里的带 #app 这个 ID 的元素上，这里说的页面指的是 public 目录下面的那个 index.html 。

在浏览器上预览这个项目，页面上显示的内容就是 App 组件里的 appName 数据的值，检查页面元素，你会发现这几个字用了一组 h1 元素包装了一下。这组用 h1 元素包装了 appName 这个数据的这块界面，就是 App 这个组件的模板。

暂时就先了解这些，后面我们会继续用几篇文章介绍更多开发 Vue 3 应用相关的东西，比如在应用里创建与使用组件，请求服务端应用的接口获取数据，应用的路由与状态管理等等。

参考课程：Vue.js（v3）前端应用 #1：理解框架

Vue 3 系列课程正在陆续发布，以后每周都会有更新。另外基于 Node.js 开发服务端应用的课程已经全部放出，里面介绍了几种开发语言，工具，数据库，应用接口的设计与开发思路等等，你可以用这个系列课程作为应用的入门课程。在我们最后几集的 Vue 3 课程里，也会用到在这个 Node.js 课程里开发的部分接口。

现在订阅宁皓网，即刻在线学习。