第4章 Webpack+Vue.js实战

4.1 创建一个页面

激动人心的时刻到来了，接下来我们需要通过自己动手开始下一步的学习。

请读者务必准备好电脑，只有一边学习一边编写代码，才能真正看到效果，因为调试代码的过程是无法脑补出来的。

在Vue.js中创建页面需要以下两步。

（1）新建路由。

（2）新建vue页面。

4.1.1 新建路由

默认的路由文件是src/router/index.js，将其打开之后，我们增加两行：

上面的代码中：

import SayHi from '@/components/SayHi'

表示从当前目录下的components引入SayHi文件，@表示当前目录。

然后利用下面的代码定义一个路由：

routes: [
    {
      path: '/say_hi',  // 对应一个url
      name: 'SayHi',    // Vue.js内部使用的名称
      component: SayHi  // 对应的.vue页面的名字
    },
]

也就是说，每当用户的浏览器访问http://localhost:8080/#/say_hi时，就会渲染./components/SayHi.vue文件。name: 'SayHi'定义了该路由在Vue.js内部的名称。

4.1.2 创建一个新的Component

由于我们在路由中引用了component：src/components/SayHi.vue，接下来，就创建这个文件。代码如下：

在上面的代码中：

•<template></template>代码块中表示的是HTML模板，里面写的就是最普通的HTML。

•<script/>表示的是js代码，所有的js代码都写在这里。这里使用的是EMScript。

•<style>表示所有的CSS/SCSS/SASS文件都可以写在这里。

现在，可以直接访问http://localhost:8080/#/say_hi了，页面如图4-1所示。

图4-1 页面效果

4.1.3 为页面添加样式

我们可以为页面添加一些样式，让它变得好看一些。

注意上面代码中的<style>标签，里面与普通的CSS一样定义了样式。

.hi {
  color: red;
  font-size: 20px;
}

刷新浏览器，可以看到文字加了颜色，如图4-2所示。

图4-2 为文字添加颜色

4.1.4 定义并显示变量

如果要在vue页面中定义一个变量，并显示出来，就需要事先在data中定义。

可以看到，上面的代码是通过Webpack的项目来写的。回忆一下，在原生的Vue.js中是如何定义一个变量（property）的？

答案是：

我们可以认为，之前在“原生的Vue.js”的代码中存在于new Vue({...})中的代码，在Webpack框架下，都应该放到export default{ .. }代码块中。

完整的代码（src/components/SayHi.vue）如下所示：

页面效果如图4-3所示。

图4-3 页面效果