alexxiyang
alexxiyang

Vue 不睡觉教程2 - 洋气的文件结构

名字灵感来自我的书《HBase不睡觉书》 意为让你看了也不会想睡觉的教程 ：）

目标

书接上回，上回那个例子实在太土了。实际开发中我们不可能把整个网站的js和html全写到一个页面上。所以我们这节课的目标在于改造这个例子的文件结构，让它不那么土

Let's do it

环境参数

  • vue版本：2.5.16

开始改造

我们要开始改造上一节那个极土的例子，让它看起来洋气一点。很多教程上来把webpack跟vue绑在一起教，让很多原本不懂webpack的人以为webpack是vue的组成部分，或者是必不可少的部分。在这里我要声明一句：

webpack不是vue的必须组成，只是webpack可以让你的js文件看起来更结构化。

webpack

webpack是一个js打包工具，使用webpack你可以在一个js文件中使用 import 或者 require 来引用另外一个js文件中定义的组件。不消说，这样你就可以把js组件分文件存放了。

虽然vue的基础例子提供了vue-cli-service，使用这个工具会自动调用webpack来帮你打包js并自动插入js到html。但是这不利于我们学习技术。我们现在从最基本的webpack使用开始了解webpack如何跟vue一起工作。

安装webpack

由于我们在之前的例子中并没有建立package.json文件。所以我们现在来建立一个简单的package.json文件：

{
    "name": "learn-vue",
    "version": "1.0.0"
  }

你们是知道我的风格的。怎么样，够土吧？！这是我能想到最简单的package.json了。现在我们的learn-vue文件夹下有两个文件了，index.html和package.json

既然有了package.json，就让我们来安装webpack吧。

$ npm i --save-dev webpack webpack-cli

运行完该指令后，npm自动将 webpack和webpack-cli写到了package.json中。此时的package.json的内容如下

{
    "name": "learn-vue",
    "version": "1.0.0",
    "devDependencies": {
        "webpack": "^4.12.1",
        "webpack-cli": "^3.0.8"
    }
}

我们的learn-vue文件夹下也自动生成了 node_modules和 package-lock.json文件


通过webpack就可以把多个js文件打包成一个js文件。使用了webpack就可以使用import语句来导入别的js文件，这样做有两个好处

  • 不需要将公共库的js引用写到页面上来了，比如vue的引用就不需要写到index.html页面上了。
  • 你可以将你的所有js脚本可以按模块来分文件存放了

我们首先来试试把index.html上的js脚本抽取到一个js文件中。新建一个src文件夹，并在其中建立main.js。 并将index.html中的js语句移动到这个文件中，文件的内容为：

new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    }
})

我们将index.html中的这段语句换成js引用

然后记得再次访问页面，保证我们还能看到Hello Vue.js!字样。到此为止，我们还没有用到webpack。不用急，我们这就把webpack用上。

新建一个webpack.config.js文件

var path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

简单的讲解一下这个webpack.config.js

  • mode: 主要用到的模式有production和development。开发时使用development，所以我们现在用development，其实你就算用production对我们的例子也没什么影响。
  • entry: 我嫩之前不是说过使用了webpack之后就可以引用import来导入别的js文件么？那么你可以想象一下，你项目中的js可以构成一个引用树。这个引用树总要有一个树根的，这个树根是不会被任何js所引用的，所有引用最后都可以回溯到它。这里的entry就是webpack的js引用树树根文件
  • output：定义了打包后文件要存放的路径和文件名

从output我们可以知道最终的文件会被存放在dist文件夹中。所以我们还需要建立dist文件夹

mkdir dist

最后，我们来看看webpack究竟能干什么。在项目根目录下运行

npx webpack

如果你看到类似以下的输出

$ npx webpack
Hash: 5b16bee4aec18c534801
Version: webpack 4.12.1
Time: 62ms
Built at: 2018-06-27 01:00:04
    Asset      Size  Chunks             Chunk Names
bundle.js  3.84 KiB    main  [emitted]  main
[./src/main.js] 77 bytes {main} [built]

那么恭喜你，你成功的构建了第一个webpack打包文件。

然后我们修改index.html页面上对main.js的引用为对bundle.js的引用

然后再访问页面，确保你能看到Hello Vue.js!

此时的项目结构是这样的：


是不是开始有点结构化了呢？有点意思吧。

接下来，我们来做更有意思的事情：将以下的vue的引用从页面上去除

我们来写你的第一个import语句。修改main.js脚本，在头部加上

import Vue from 'vue'

我们的main.js就变为了

import Vue from 'vue'

new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    }
})

这个import怎么起作用呢？它总不会自己知道要去下载vue的源码吧？！当然没那么神奇了，你需要自己使用npm来安装vue

$ npm i --save vue

运行完后，我们的package.json中自动新增了vue

{
    "name": "learn-vue",
    "version": "1.0.0",
    "devDependencies": {
        "webpack": "^4.12.1",
        "webpack-cli": "^3.0.8"
    },
    "dependencies": {
        "vue": "^2.5.16"
    }
}

node_modules文件夹下也增加了vue的包。

我们再使用webpack来构建一次项目

$ npx webpack
Hash: cd3c4ea4c7c76aeb5beb
Version: webpack 4.12.1
Time: 410ms
Built at: 2018-06-27 01:16:20
    Asset     Size  Chunks             Chunk Names
bundle.js  235 KiB    main  [emitted]  main
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {main} [built]
[./src/main.js] 100 bytes {main} [built]
    + 4 hidden modules

构建完毕了，此时我们打开dist/bundle.js看看。你会发现它把整个vue库都压缩了并写入了bundle.js文件。这样你的页面在打开时就可以一次性的把所有js库所有的依赖库都下载好了。

我们再刷新一次页面，确保你还能看到Hello Vue.js!

额。。。这回什么都没有。打开控制台可以看到以下警告信息

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

这是因为如果你直接写 import Vue from 'vue' 那么调用的是运行时的vue版本，这个版本不带模板解析包。我们之前在index.html页面上引用的也不是运行时版本。所以在这个例子中正确的做法应该是 

import Vue from 'vue/dist/vue.js'
再打包一次，这回我们就能够看到Hello Vue.js了。


你以为这篇教程到这就结束了吗？

No！接下来我们要继续优化文件结构直到让它看起来很洋气为止。

组件化

如果你在网上看vue的教程，肯定经常会看到component组件这个概念。真正投入市场的产品都是由组件构成的。那么什么是vue的组件呢？

单文件组件(SFC)

每一个vue的组件都采用单文件组件的格式来组织组件文件。英文是  single file component 简称SFC。SFC文件的后缀名是 .vue。简单的说就是一个 .vue文件就是一个组件，它的结构由三部分组成

  • html模板
  • js脚本
  • css样式

给大家看一个组件的例子，感受一下 SFC的结构：

我们可以看出SFC结构可以概括为
除了script元素以外，template和style都是可选的。我们来新建一个组件玩玩

新建HelloVue组件

组件放哪都行，不过业界的习惯是把组件放到 src/components文件夹下。所以我们在src下建立component文件夹

$ cd src
$ mkdir components
$ cd components

然后在src目录下建立一个新的组件HelloVue.vue，然后把之前写在index.html和main.js的代码搬到HelloVue.vue里面

题外话

如果你们用的是 visual studio code，建议你们安装 Vue.js Extension Pack 。它能为.vue文件中的代码上色


安装后，看.vue文件效果是这样的


不同之处

大家会发现跟之前的代码比起来有几个不同点：

  • 不需要执行 new Vue了，只需要用export default {...} 来定义组件即可
  • data属性变成一个方法了，该方法可以通过一串预处理过程得出一个json对象。此处我们没有预处理过程，所以直接返回对象咯
  • 没有