Vue单文件组件开发：Vue Loader 及其 webpack 配置

单文件开发

.vue单文件开发依赖webpack的模块机制，将template、script、style封装在单文件中，代码的组织性和可复用性得到增强。
这个模块叫做"vue-loader"，官方文档

手动配置webpack

安装依赖

npm i -D webpack webpack-cli webpack-dev-server
touch webpack.config.js

npm i -D css-loader
npm i -D vue vue-loader vue-template-compiler

一次性下载：

npm i -D webpack webpack-cli webpack-dev-server css-loader vue vue-loader vue-template-compiler
touch webpack.config.js

编辑node项目配置文件package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "My first singe page web app...",
  "private": true, // 防止意外发布
  "scripts": {
    "dev": "webpack-dev-server --host 0.0.0.0 --port 8080 --open" // 开发服务器脚本
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vue": "^2.6.11",
    "vue-loader": "^15.8.3",
    "vue-template-compiler": "^2.6.11",
    "css-loader": "^3.4.2",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.3"
  }
}

编辑配置文件./webpack.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode: 'development',
    devServer: {
        contentBase: `${ __dirname }/dist`,
    },
    entry: {
        index: `${__dirname}/src/js/index.js`,
    },
    output: {
        filename: 'js/[name]/bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            { test: /.vue$/, loader: 'vue-loader', },
            { test: /.css$/, use: ['vue-style-loader', 'css-loader'], },
        ],
    },
    plugins: [ new VueLoaderPlugin(), ],
};

VueLoaderPlugin：这个插件是必须的！它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块。

开始编码

src/js/index.js

import Vue from 'vue';                                                                                             
import Index from '../vue/index.vue';

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

src/vue/index.vue

<template>
<div>
        <h1>{{msg}}</h1>
</div>
</template>

<script>
export default {
        data() {
                return {
                        msg: 'Hello, Vue.js',
                };
        },
};
</script>

<style scoped>
* {
        color: pink;
}
</style>

dist/index.html

<!DOCTYPE HTML>
<html>
<div id='app'></div>
<script src='./js/index/bundle.js'></script>
</html>

渲染结果：

模块化开发

借助url-loader模块，我们实现一张“忍者”卡片模块：

<template>
    <div id='all'>
        <img :src=ninja />
        <div id='title'>{{ title }}</div>
    </div>
</template>
<script>
import ninja from 'url-loader!./ninja.png';
export default {
    data() {
        return {
            title: '忍者',
            ninja,
        };
    },
};
</script>
<style scoped>
div#all {
     fit-content;
    border: 1px solid red;
}
div#title {
    text-align: center;
}
</style>

Vue单文件组件开发：Vue Loader 及其 webpack 配置

单文件开发

手动配置webpack

开始编码

模块化开发

END