由浅入深学习webpack+vue全家桶，实现知乎日报--web

2018-07-02  本文已影响118人  Waitingforyu

截止上一节，我们学习了webpack的四大核心思想：入口(entry)、出口(output)、加载器(loaders)、插件(plugins)，并且初步创建了一个可以在本地端口运行的工程。接下来我们继续探讨学习.vue单文件组件的使用和编译。

众所周知，Vue.js官网提供了组件的三种使用方法：

  1. 字符串 (例如：template: '...')
  2. <script type="text/x-template">
  3. 单文件组件 (.vue)

.vue文件的构成

一个.vue文件包括三部分，<templtae>、<script>、<style>，可以没有<style>，在根目录下创建app.vue文件，快速建立vue预制模板，如下：

image.png
下面解读一下各部分代表的意义：

安装依赖

使用.vue文件需要先安装vue-loader、vue-style-loader等加载器并做配置，因为要使用ES6语法，还需要安装babel和babel-loader等加载器，使用npm进行逐个安装：

npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
npm install --save-dev vue-hot-reload-api
npm install --save-dev babel
npm install --save-dev babel-loader
npm install --save-dev babel-core
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-2015
npm install --save-dev babel-runtime

安装完成后，修改webpack.config.js来来支持.vue文件及ES6的解析：

//部分代码省略
var config = {
    entry: {
        main: './index'
    },
    output: {
        path: path.join(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'index.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        css: ExtractTextPlugin.extract({
                            use: 'css-loader',
                            fallback: 'vue-style-loader'
                        })
                    }
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/  
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'style-loader'
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('index.css')
    ]
};

vue-loader在编译.vue文件时，会对<template>、<script>、<style>分别处理，所以在vue-loader选项中多一项options来进一步对不同的语言进行配置，比如对css进行处理时，会先通过"css-loader"解析，然后把处理结果再交给"vue-style-loader"处理。当技术栈多样化时，可以对<template>、<script>、<style>指定不同的语言，比如<template lang="pug"></template>、<script type="text/typescript"></script>、<style lang="sass"></stype>，然后配置loaders就可以了。

配置babel信息

在根目录下新建名称为.babelrc的文件，并写入babel配置，webpack会依赖此文件配置来使用babel编译ES6，代码如下：

{
    "presets": [
        "ES2015"
    ],
    "plugins": [
        "transform-runtime"
    ],
    "comments": false
}

编写app.vue

代码如下：

<template>
    <div>
        {{message}}
    </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      message: 'This app.vue'
    };
  },
}
</script>

<style scoped>
    div {
        color: goldenrod;
        font-size: 18px;
    }
</style>

在<template>内写的HTML写法通html文件完全一样，不需要加"\ "换行，webpack最终会把它变异成Render函数的形式。写在<style>里的样式，已经用插件extract-text-webpak-plugin配置过了，最终会统一提取并打包到index.css里，因为加了scoped属性，这部分样式只针对app.vue组件有效。

修改入口js文件

.vue的组件是没有名称的，在父组件使用时可以对它进行定义。写好了app.vue组件，就可以在入口文件index.js内使用。index.js代码如下：

// 引入vue
import Vue from 'vue';
// 引入app.vue
import App from './app.vue'

// 创建vue根实例
new Vue({
    el: '#app',
    render: h => h(App)
})

注意：render: h => h(App)是ES6一种简写方式，可以使用以下方式代替：

new Vue({
    el: '#app',
    render: (h) => {
      return h(App);
    }
})

或者

new Vue({
    el: '#app',
    render: function(h) {
      return h(App);
    }
})

修改index.html

在index.js中，把初始化Vue对象时挂在一个id="app"的元素上，那么需要修改index.html文件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="dist/index.css">
</head>
<body>
    <div id="app"></div>
    <script src="dist/index.js"></script>
</body>
</html>

运行

执行命令：npm run dev，这个vue工程就跑起来了，效果如下：

image.png
在控制台我们可以看到，id="app"的内容被<div data-v-65bf5ec8="">This app.vue</div>代替，而且在index.css样式表中对应有 
div[data-v-65bf5ec8] {
    color: goldenrod;
    font-size: 18px;
}

之所以有这段代码，就是因为在app.vue中的<style>中加了scoped属性。

附加代码

在根目录下新建一个components文件夹，新建title.vue和count.vue，并在app.vue中引用这两个组件，具体代码如下：

<template>
    <nav>
        <ul class="nav">
            <li
                v-for="(item, idx) in navs"
                :key="idx"
                :value="item.value"
                :class="{'active': idx === 0}"
            >
                <a href="javascript:void(0);">{{item.text}}</a>
            </li>
        </ul>
    </nav>
</template>

<script>
export default {
  data() {
    return {
      navs: [
          {
              text: '新闻',
              vaule: 'news'
          },
          {
              text: '视频',
              vaule: 'videos'
          },
          {
              text: '生活',
              vaule: 'life'
          }
      ]
    };
  },
}
</script>

<style scoped>
    ul {
        list-style-type: none;
    }
    ul:after {
        content: "";
        display: table;
        clear: both;
    }
    ul li {
        float: left;
        padding: 10px 15px;
        font-size: 16px;
    }
    ul li a {
        text-decoration: none;
        color: #333;
    }
    ul li.active {
        border-bottom: 2px solid #299cee;
    }
</style>

<template>
    <div class="count">
        <button @click="handleDecrement">-</button>
        {{currentValue}}
        <button @click="handleIncrement">+</button>
    </div>
</template>

<script>
export default {
  data() {
    return {
      currentValue: this.value
    };
  },
  props: {
      value: {
          type: Number,
          default: 0
      }
  },
  watch: {
      currentValue(newValue) {
          this.$emit('input', newValue);
      }
  },
  methods: {
      handleDecrement() {
          this.currentValue--;
      },
      handleIncrement() {
          this.currentValue++;
      }
  }
}
</script>

<style scoped>
    .count {
        color: #999;
    }
    .count button {
        padding: 0 10px;
        text-align: center;
        line-height: 24px;
    }
</style>

<template>
    <div>
        <vTitle></vTitle>
        <vCount v-model="count"></vCount>
        <p>app.vue count {{count}}</p>
    </div>
</template>

<script>
import vTitle from './components/title.vue';
import vCount from './components/count.vue';
export default {
  name: 'app',
  components: {
      vTitle,
      vCount
  },
  data() {
    return {
      count: 10
    };
  }
}
</script>

<style scoped>
    div {
        color: goldenrod;
        font-size: 18px;
    }
</style>

运行工程，即可出现如下效果：


app.gif

至此我们完成了一个最基本的vue工程。
完整代码github地址：https://github.com/zhiyuanMain/zhihu-daily

上一篇 下一篇

猜你喜欢

热点阅读