vue-loader和单页组件介绍

最新推荐文章于 2021-08-08 16:15:49 发布

休耕

最新推荐文章于 2021-08-08 16:15:49 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/hqs2212586/article/details/90436490

版权

vue-loader和单页组件介绍

一、Vue Loader介绍

　　Vue Loader 是一个 webpack 的loader，它允许你以一种名为单文件组件（SFCs）的格式撰写 Vue 组件。官方文档地址如下所示：

　　Vue Loader v15及以上版本官方文档地址

　　Vue Loader v14 或更早的版本官方文档地址

二、项目示例

1、项目准备和组件安装

　　将 webpack-dev-server 项目复制为 single-file，安装 vue-loader 组件：

$ npm install vue-loader@14.1.1 -D

　　安装vue的模板解析器: vue-template-compiler，注意要安装对应的版本号，才能适配。

$ npm install vue-template-compiler@2.5.17 -D

2、在webpack中配置vue-loader

　　这里是在webpack.dev.config.js中配置vue-loader：

// node.js中内容模块
var path = require('path');

module.exports = {
    // entry入口
    entry: {
        main: './src/main.js'
    },
    // output出口
    output: {
        path:path.resolve('./dist'),  // 相对转绝对
        filename: './bundle.js'
    },
    watch:true,
    // 模块中的loader
    module:{
        loaders:[
            {
                test:/\.css$/,  // css结尾的
                loader:'style-loader!css-loader'  // 依次识别
            },
            {
                test:/\.vue$/,
                loader:'vue-loader'
            }
        ]
    }
}