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. struts2学习第一天

    Stuts2是基于MVC设计模式成熟的Web应用框架.不仅仅是Struts1的下一个版本,是一个全新的Struts架构.由WebWork社区跟Strut社区联手打造的.(教程来自W3Cschool) ...

  2. matplotlib 直方图

    一.特点 数据必须是原始数据不能经过处理,数据连续型,显示一组或多组分布数据 histogram 直方图 normed 定额 二.核心 hist(x, bins=None, normed=None) ...

  3. sqlalchemy 多线程 创建session

    1.基于threding.local,推荐使用 from sqlalchemy.orm import sessionmaker from sqlalchemy import create_engine ...

  4. Qt Installer Framework翻译(5-1)

    创建离线安装程序 脱机安装程序在安装过程中根本不会尝试连接在线存储库.但是,元数据配置(config.xml)使用户可以在线添加和更新组件. 在公司防火墙不允许用户连接到Web服务器的情况下,脱机安装 ...

  5. UidGenerator springboot2集成篇

    uid-generator 官网集成文档: https://github.com/baidu/uid-generator/blob/master/README.zh_cn.md 由于并没有提供spri ...

  6. PHP——常量

    一.什么是常量 常量可以理解为值不变的量(如圆周率)或者是常量值被定义后,在脚本的其他任何地方都不可以被改变.PHP中的常量分为自定义常量和系统常量,自定义常量是根据我们开发的需要,而定义的常量,它通 ...

  7. Qt Installer Framework翻译(7-5)

    操作 这些操作由组件和控制脚本准备,并由安装程序执行. 注意:操作是通过线程执行的. 在内部,每个操作都有一个DO步骤,包含有关安装程序的说明,以及一个UNDO步骤,包含有关卸载程序的说明. 操作总结 ...

  8. initramfs打包集成rootfs到image镜像及linux rootfs的正常启动

    最近的项目中需要在仿真机haps及VDK上集成rootfs,中间遇到一些问题,在此整理记录以备忘. rootfs里面集成的busybox版本1.29.3 (buildroot环境中自带) kernel ...

  9. sqli_labs学习笔记(一)Less-38~Less-53

    续上,开门见山 堆叠注入,实际上就构成了两条SQL语句 http://43.247.91.228:84/Less-38/?id=1' union select 1,2,3 --+    //未报错 h ...

  10. CSS-12-盒子模型

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...