webpack构建vue单文件组件

时间：2022-10-28 10:29:11

1.安装vue-loader和vue-template-compiler

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

2.配置webpack.config.js

var path = require('path');

var webpack = require('webpack');

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

module.exports = {

    entry: './src/main.js', // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包

    output: {

        filename: 'build.js' // 打包后的文件名

    },

    plugins:[

        new VueLoaderPlugin(),

    ],

    devServer: {

        contentBase:path.resolve(__dirname,"dist"),

        historyApiFallback: true,

        overlay: true

    },

    resolve: {

        alias: {

            'vue$': 'vue/dist/vue.esm.js'

        }

    },

    module: {

        rules: [

            {

                test: /\.css$/,

                use: [

                    'vue-style-loader',

                    'css-loader',

                ]

            },

            {

                test: /\.(png|jpg|gif|svg)$/,

                loader: 'file-loader',

                options: {

                    name: 'img/[name].[ext]?[hash]'

                }

            },

            {

                test: /\.vue$/,

                loader: 'vue-loader',

            }

        ]

    }

};

在src目录下新建一个App.vue

.vue文件分成3个部分

template：html代码,相对于用extend定义组件时的template部分

script:js代码，用extend定义组件时的methods、data这些部分都写在这里

style:css

<template>

  <div id="app">

    <h1>{{ msg }}</h1>

    <img src="./img/icon_bindap.png">

    <input type="text" v-model="msg">

  </div>

</template>

<script>

var util = require("./util");

export default {

  name: 'app',

  data () {

    return {

      msg: 'Welcome to Your Vue.js'

    }

  },

  created() {

    this.fetchData();

  },

  methods: {

    fetchData() {

      var test = util.testfunc();

      this.msg = test;

    }

  }

}

</script>

<style lang="css">

 h1 {

    color: green;

  }

</style>

vue文件里template的根div的id可以不要，js里的name也可以不要，name和id也不要求一样

util.js

exports.testfunc = function test(){

    console.log('test');

    return "test";

}

main.js

相当于在vue里嵌入一个子组件

components声明子组件，template使用子组件

new vue对象，el:"app"，相对于把一个叫vue的组件自动挂载到index.html的app元素下，里面有一个子组件app，类似 vue组件 中的：

new todoItem().$mount('#todoItem');

import Vue from 'vue';

import App from './App.vue';

import './style/common.css';

new Vue({

  el: '#app',

  template: '<App/>',

  components: { App }

})

index.html

挂载vue到div#app

<!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>

</head>

<body>

    <div id="app"></div>

    <script src="build.js"></script>

</body>

</html>

碰到的问题：

1.ExtractTextPlugin配置了css路径后，css不起作用的问题：
 index.html中没有用link引入css，可以手动修改index.html,引入css
 也可以结合HtmlWebpackPlugin，HtmlWebpackPlugin会自动加入link引入需要的css文件，也会自动加入script引入需要的js文
 件
 
2.HtmlWebpackPlugin没有配置模板时，会使用默认模板生成index.html，自动加入需要的css和js的引用，如果目标文件夹下也有index.html，会被覆盖
 
3.build时出现错误：webpack vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin
 
新版本的vue-loader需要配合一个 webpack 插件才能正确使用：

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

module.exports = {
// ...
plugins: [
new VueLoaderPlugin()
]
}

4.Vue packages version mismatch 错误：

vue-template-compiler和vue版本必须一致，如果不一致，重新安装 vue-template-compiler让其跟vue版本一致即可

5.文件名不区分大小写，上例中App.vue在main.js中引入时，可以写成：

import App from './app.vue';
 
6.如果App.vue引入后的名字改成其他，则后面模板的定义要改成对应的名字，比如：
import Vue from 'vue';
import App2 from './app.vue';
import './style/common.css';
new Vue({
el: '#app',
template: '<App2/>',
components: { App2 }
})
标红三者要保持统一
 
 
 
 
 
 
 

webpack构建vue单文件组件的更多相关文章

  1. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  2. webpack对vue单文件组件的解析

    vue2.0 Step0: 首先vuelLoaderPlugin会在webpack初始化的时候 注入pitcher这个rule,然后将rules进行排序, [pitcher,...clonedRule ...

  3. webpack入坑之旅（五）加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  4. Vue单文件组件

    前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...

  5. vue 单文件组件

    在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...

  6. ts-loader如何与vue单文件组件衔接

    .ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...

  7. 基于VSCode的vue单文件组件模板设置---一次设置，可爽终生

    第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...

  8. vue 单文件组件最佳实践

    vue 单文件组件最佳实践 生命周期 template <template> <section> <h1>vue single file components te ...

  9. vue单文件组件的构建

    在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...

随机推荐

  1. Java 8新特性-5 内建函数式接口

    在之前的一片博文 Lambda 表达式,提到过Java 8提供的函数式接口.在此文中,将介绍一下Java 8四个最基本的函数式接口 对于方法的引用,严格来讲都需要定义一个接口.不管我们如何操作实际上有 ...

  2. UVa 11082 &amp&semi; 最大流的行列模型

    题意: 给出一个矩阵前i行的和与前j列的和,(i∈[1,r],j属于[1,c]),每个元素ai,j∈[1,20],请你还原出这个矩阵,保证有解. SOL: 给网络流建模跪了,神一样的建图,如果我我会怎 ...

  3. Tomcat7 安装StartSSL证书笔记

    1.Tomcat-Native安装 使用StartSSL,Tomcat必须用apr方式启动(apr方式对于静态的内容,比默认的bio效率要高很多倍) Windows下tomcat-native安装 直 ...

  4. Monad

    Monad英文含义,单体.单分子.单细胞. Monad是一种设计模式,表示将一个运算过程,通过函数拆解成互相连接的多个步骤.你只要提供下一步运算所需的函数,整个运算就会自动进行下去.

  5. 手把手教小白如何用css&plus;js实现页面中图片放大展示效果

    1.前言      很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀, ...

  6. 5个数组Array方法&colon; indexOf、filter、forEach、map、reduce使用实例

    ES5中,一共有9个Array方法 Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.pr ...

  7. widows本地-xshell实现远程连接linux服务器图形界面

    本地环境远程连接linux图形界面,常用的实现工具有,VNC.Puty.Xshell等,这里我们用的xshell manager: Xmanager简介:Xmanager是一个运行于 Windows平 ...

  8. linux下之mysql篇

    网上查到的一般是 yum install mysql yum install mysql-server yum intall mysql-devel 但是在centos7下  mysql-server ...

  9. bootstrap 中的 iCheck 全选反选功能的实现

    喜欢bootstrap 风格的同学应该知道,iCheck的样式还是很好看的. 官网: http://www.bootcss.com/p/icheck/ 进入正题,iCheck提供了一些方法,可以进行全 ...

  10. oracle常用DDL语句

    1.添加表字段--咨询表添加内容简介字段 ALTER TABLE s_table ADD intro VARCHAR2(1024); COMMENT ON COLUMN s_table.remarks ...

相关文章