Vue-loader起步

  • A+
所属分类:Vue Vue-loader

Vue Loader 是什么?

Vue Loader 是一个 webpack 的 loader,它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件:

<template>
  <divclass="example">{{ msg }}</div>
</template>
<script>export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}</script>
<style>.example {
  color: red;
}</style>

安装

cnpm install -D vue-loader vue-template-compiler

webpack 配置

Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外,请确保在你的 webpack 配置中添加 Vue Loader 的插件:

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件!
    new VueLoaderPlugin()
  ]
}

 

 

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的QQ
  • 我的QQ扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: