【九层之台】Web开发教程：6. VueCli

6. VueCli

本章内容比较多，主要介绍VueCli的使用方法。VueCli是Vuejs团队推出的一个开发辅助工具，被我们称为“脚手架”。如果说，上一章里面用Vuejs前端框架控制网页应用的逻辑好似开高达，那么本章的VueCli可能就是坐在办公室里用程序开高达了。VueCli给我的感觉是，它已经脱离了开发辅助工具的范畴，而是发明了一种新的开发方法。下面我们就来看一看它的使用方法。

官网地址：https://cli.vuejs.org/

Nodejs & npm

在开始开发之前，我们要先介绍一些基础内容。

Nodejs是一个软件，它的功能是把JS代码运行在本地命令行上。在之前的JS章节，我们就说过网页JS是运行在浏览器上的，JS代码也是通过浏览器来解析和编译的。那么，如何让JS脱离浏览器工作呢？其中一个方法就是使用Nodejs。

以Windows操作系统为例，首先我们去Nodejs官网下载一份安装包，点击运行并安装。等它安装好以后，我们就可以打开系统命令行，输入node，然后就可以输入JS代码愉快玩耍了！如果使用node index.js命令，还可以运行一个JS脚本代码文件。

与Nodejs一起被安装的，其实还有我们最好的伙伴npm，它是Nodejs的包管理器。所有的Nodejs项目都是以“包”的形式存在的，我们把所有的代码放在一个文件夹里，附上这个项目所需要的依赖包。依赖包就是前人写好的其他“包”，大量的代码包一层一层地堆叠出一个Nodejs项目。

那么，为什么需要Nodejs呢？我们想做的事情是，写一些简单的代码，然后通过一个工具把简单的代码给打包，形成一个HTML、CSS、JS三部分代码组成的网页。我们说这个打包工具是VueCli，现在我要告诉你们，VueCli本身也是用JS代码编写的，它需要运行在Nodejs上（本地运行）。我们用一些运行在Nodejs上的代码来打包另一些代码，最后给出一份网页应用的代码，是不是很神奇？

安装

按照官网上的安装方法，打开本机命令行（Windows系统下按键盘上win + Enter并输入powershell），输入命令（并按回车）：

npm install -g @vue/cli

等待命令执行完毕，VueCli就安装好啦。其实就是一个代码包被下载到了你的电脑上。让我们尝试查看一下VueCli的版本号：

vue --version

如果你可以看到版本号，说明一切正常！

创建项目

官网上的教程主要讲了命令行的方法，了解一下当然很好，但是从VueCli3开始，你就只需要记住一行命令，那就是：

vue ui

回车以后，稍等一下下就会发现你的浏览器自动打开并显示了一个页面。VueCli控制台闪亮登场！
我就喜欢这种傻瓜又直接的开发工具。
歌颂它的伟大吧！VueCli的所有功能都可以在这个控制页面上完成。

点击创建项目，取个名字，选个文件夹保存，然后一路默认。选择组件的时候（自定义）可以选一下Vue Router，也可以什么都不选创建一个最最简单的工程。

在一小段等待以后（可以在系统的命令行界面看到进度），我们的VueCli项目就创建完成啦！

VueCli项目控制台

在VueCli控制台上，可以看到左边的标签。其中大多是都很浅显易懂，例如可以通过搜索并添加依赖，来添加别人写好的组件库等等。

这里主要要介绍“任务”标签上的两个功能，serve和build。

• serve：热更新的调试预览。通过点击serve任务的开始键，我们可以让VueCli将我们的项目临时打包，打包完成以后（前提是代码里面没有错误），可以通过“打开应用”按钮在另一个页面上预览我们网页应用的效果。如果这个时候你修改了代码，预览页面也会实时刷新。
• build：构建。点击build任务的开始键，VueCli就会帮助我们把我们的代码打包为一个正常的网页，默认会输出到项目目录下的dist文件夹中。构建出的网页就是我们最终发布的网页文件。

我们在控制台上开启我们刚刚创建的新项目，开始serve，等它准备好以后点击“打开应用”，就可以在新的页面看到我们的项目的情况了！新创建的项目并不是完全空白的，而是有VueCli的默认项目内容。

同时，在VueCli控制台的“配置”页面上，有一些常用的配置。通常来说这些配置都不需要修改，如果有需要请自行百度！

VueCli项目目录

打开新建的VueCli项目所在的文件夹，我们来看一看项目目录下面都有些什么。项目目录下面大多数东西都是与Nodejs包有关的，例如package.json，我们只需要关注以下几个内容：

• /public：这个文件夹存放了VueCli工程的构建模板，也就是说，VueCli工程最后构建的所有代码都带上这里的index.html作为网页的入口。通常来说我们需要在其中的body元素上新增style="margin: 0;"来取消浏览器body元素自带的边距。
• /src：源码，也就是主要的开发内容。
  • /asset：资源，存放一些图片什么的
  • /components：组件，通常是小组件（下一节详述）
  • /router：（如果创建项目的时候选了Vue Router）路由设置（下面详述）
  • /views：视图组件
  • App.vue：主应用组件
  • main.js：应用主入口
• vue.config.js：需要自己创建，是一些VueCLi的高级配置

简要介绍一下VueCli的文件之间的联系：

1. 首先/src/main.js中生成的Vue对象绑定了/public/index.html中那个具有属性id="app"的块元素，所以相当于页面上所有的内容都由Vuejs框架接管。
2. 接下来，/src/main.js中的Vue对象使用渲染函数，指定渲染为/src/App.vue中的主应用组件。简单理解起来，就是在Vuejs框架下把HTML代码中的块元素替换为了/src/App.vue组件。
3. 通过编写/src/App.vue，并根据需求引入路由视图（见下面详述），或者直接引入/src/views中的视图组件形成用户界面的框架
4. 通过编写/src/views文件夹中的视图组件，在其中引入/src/components文件夹中的小组件，最终形成一个复杂的应用。

下一节中我们就会详细介绍Vue组件。

Vue组件

如果说要给VueCli选一个关键词的话，那就是“组件”了。其实，不需要VueCli辅助，Vuejs框架本身就支持了组件，只不过比较难用，写起来不清晰。

在VueCli中，每一个组件都是固定的格式的.vue文件，举个例子：

<template>
  <h1>{{ message }}</h1>
</template>

<script>
  export default {
    name: "MyComponent",
    data() {
      message: "Hello"
    }
  }
</script>

<style scoped>
  h1 {
    color: red;
  }
</style>

可以看得到，组件被三个HTML标签分为了三个部分：

• template：模板部分，使用HTML代码标记该组件的内容。注意，template元素内部只能有一个子元素，如果需要有多个，请用一个块元素把它们包裹起来。
• script：脚本部分，其中可能包含了引入其它组件，但一定包含有export default，大括号内部的内容相当于一个Vue对象的内部，但略有不同，下面详细介绍。
• style：样式部分，使用CSS代码控制模板部分的元素的样式，和正常的CSS一样。默认情况下样式部分的CSS会应用于整个应用，这是很不方便的，如果我们需要限制样式只对当前组件生效，就需要在style的开始标签上加一个scoped，就像上面的代码里一样。

模板部分和样式部分没什么好说的，都是以前学习并熟练的内容了。接下来我们着重介绍脚本部分，特别是export default内的内容。export default内部的内容类似于一个Vue对象，但略有不同。它经常包括以下一些内容：

• name：当前组件的名称。用于给别的组件引用的时候使用，注意，以前Vue对象中的el变量不需要写了，因为这里没有显式的绑定HTML元素，组件都是通过main.js中定义的渲染函数进行渲染的。
• data：与Vue对象中的data对象不同，这里的data必须是一个函数，只不过这个函数返回当前组件需要使用的数据对象，就像上面的例子中一样。
• components：在此对象中列举当前组件使用的其他组件的组件名
• props：用于组件之间传递值（自行去官网学习）
• computed：计算属性，与Vue对象中一样
• methods：对象方法，与Vue对象一样

下面，举例看一看，如果另一个组件要引用这个组件，应该怎么写：

<script>
  import MyComponent from "@/components/MyComponent.vue";
  export default {
    name: "NewComponent",
    components: {
      MyComponent
    }
  }
</script>

可以看到，我们在这里使用import语句从一个文件当中引用了MyComponent组件。VueCli中规定引用目录@就是我们的/src目录。然后在components对象当中列举了引用的组件名，它们才真正被引用进当前组件。想要把这个组件放进当前组件的视图中，我们可以在模板部分写：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

可以看到，我们的组件名会自动变成-连接的小写单词。

Vue Router

在VueCli中，不得不讲一讲Vue Router。首先，我们的VueCli构建出的网页，默认都是单页应用。也就是说，网页只有一个HTML文件index.html，其他视图的变化都是通过Vuejs框架控制的。从上一章我们知道，我们可以通过Vuejs的控制语句v-if来控制视图的选择性渲染，但是如果我们的应用需要多个不同的视图，并实现它们之间的切换，单纯通过v-if就比较麻烦。于是，VueCli提供了强大的Vue Router路由模块。

我建议大家去官网上详细学习，这里我只做简要介绍。

首先，我们发现我们在应用入口main.js当中会多一个router模块，并且App.vue主应用组件中的模板部分会出现一个奇妙的组件<router-view></router-view>。这是什么呢？这个组件的渲染控制权，会从当前的主应用组件移交到我们的router上。router会根据我们的网页URL（网址）来判断当前这个部分应该渲染为什么组件。

仔细观察我们VueCli打包的网页的URL，我们会发现网页URL都形如：http://domain/.../#/.../，一定会出现一个#，这就是VueCli的路由管理所使用的机制，#之前的内容可以是网页的相对路径（在服务器上的存放位置），但是从#开始的部分就被Vuejs读取并根据这些来控制网页上显示的组件。

通过配置router/index.js我们就可以实现对不同的路由（#后面的部分）显示不同的组件。其中还支持路由组件的懒加载（不访问不加载）和子路由等等，如有兴趣请自行学习官网教程。

Vuejs相关的官网教程还是写的非常好的。

组件间通信

对于两个组件来说，它们之间如何交换信息呢？如果用户在其中给一个组件中点击了一个按钮，如何让另一个组件知道呢？一般来说有以下几种方法：

• props：如果是一个组件想要传递信息给它内部引用了的组件，可以使用这种方法。子组件中，props数组中的名称，可以通过在父组件的模板部分在组件标签上以属性的方式传值。例如，如果子组件有props: ["name"]，那么父组件可以通过<my-component name="test"></my-component>的方式传入字符串test作为子组件中name变量（根据props自动生成的变量）的值。当然，你也可以使用v-bind让这个值动态变化。
• emit：子组件中的事件，可以通过emit方法传递到父组件。例如，子组件的JS代码中调用了全局函数this.$emit("hey")，父组件可以在标签上监听hey事件，并连接一个处理函数：<my-component @hey="handle"></my-component>。
• 引用同一个管道模块：这是JS的方案，通过引用同一个模块（不一定是Vue组件）可以实现信息的传递，不常用，不做详述。
• Vuex：当当当当！隆重介绍Vuex！Vuex与Vue Router一样，是官方出品的一个插件模块。因为大型的VueCli项目当中信息传递很难调度，所以诞生了Vuex。只要安装了Vuex，所有的组件都可以引入Vuex中的工具函数，并且操作Vuex中存储的数据，从而实现组件之间的数据共享。如果有兴趣，当然要去自己学习啦！看官方教程这个部分：https://vuex.vuejs.org/zh/guide/state.html （建议使用上面的mapState之类的辅助函数！）再在默认生成的Vuex默认代码上摸索一下吧！

开发辅助

首先，大多数文本编辑器都有针对VueCli开发的插件，例如Sublime中的Vue Syntax Highlight，这些插件可以大幅度减轻编写Vue组件的压力，因为默认情况下把HTML、CSS、JS写在一个文件当中，代码的颜色和高亮是很不好看的。

其次，在Google Chrome浏览器中有一个非常好用的插件Vue Devtools，它可以在分析在调试模式中的Vue应用的很多数据，显示每个组件的状态和事件等等，有条件的同学可以安装一下。

最后，必须要说一说项目目录下的vue.config.js文件，通常来说我们会在里面配置反向代理来解决前端网页调试的时候出现的跨域问题（不懂没问题，遇到的时候再回来）。例如：

module.exports = {
  devServer: {
    proxy: {
      '/api/': {
        target: 'http://url/',
        changeOrigin: true
      }
    }
  }
};

就可以转发/api/开头的网络请求到http://url/api/上，我们大概会在网络章节重新见到它。

引入组件库

如果觉得自己写所有的组件很累，又想要页面变好看，怎么办呢？当然是拿前辈们做好的组件库啦！遇到一个组件库，只要支持Vue，按照它的指南去安装，就可以在VueCli中很轻松地引入。你可以不花时间写CSS就创造出漂亮的按钮、输入框、表格，你也可以轻轻松松地快速构建出你想要的功能。

什么？要我推荐几个？下面的章节会有的！

快速、分片、通用，这就是VueCli，一个无限可能的地方。