pwindy

浅谈 vue-loader---合格前端

什么是 vue-loader？

vue-loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件的格式撰写 Vue 组件。

如何使用？

1. 安装

npm install vue-loader vue-template-compiler --save-dev

2. 配置 webapck

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

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 它会应用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `


#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.title {
  color: red;
}

4. 见证奇迹的时刻

打包完之后，这个 Vue 组件就会被解析到页面上：

<head>
  <style type="text/css">
    #app {
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    .title {
      color: red;
    }
  style>
head>
<body>
  <div id="app">
    <div class="title">Hello worlddiv>
  div>
  <script type="text/javascript" src="/app.js">script>
body>

上面 Vue 组件里的