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

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

2.配置webpack.config.js

  1. var path = require('path');
  2. var webpack = require('webpack');
  3. var VueLoaderPlugin = require('vue-loader/lib/plugin');
  4.  
  5. module.exports = {
  6.     entry: './src/main.js', // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包
  7.     output: {
  8.  
  9.         filename: 'build.js' // 打包后的文件名
  10.     },
  11.     plugins:[
  12.         new VueLoaderPlugin(),
  13.     ],
  14.     devServer: {
  15.         contentBase:path.resolve(__dirname,"dist"),
  16.         historyApiFallback: true,
  17.         overlay: true
  18.     },
  19.     resolve: {
  20.         alias: {
  21.             'vue$': 'vue/dist/vue.esm.js'
  22.         }
  23.     },
  24.     module: {
  25.         rules: [
  26.             {
  27.                 test: /\.css$/,
  28.                 use: [
  29.                     'vue-style-loader',
  30.                     'css-loader',
  31.  
  32.                 ]
  33.  
  34.             },
  35.             {
  36.                 test: /\.(png|jpg|gif|svg)$/,
  37.                 loader: 'file-loader',
  38.                 options: {
  39.                     name: 'img/[name].[ext]?[hash]'
  40.                 }
  41.             },
  42.             {
  43.                 test: /\.vue$/,
  44.                 loader: 'vue-loader',
  45.  
  46.             }
  47.  
  48.         ]
  49.     }
  50.  
  51. };

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

.vue文件分成3个部分

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

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

style:css

  1. <template>
  2.   <div id="app">
  3.     <h1>{{ msg }}</h1>
  4.     <img src="./img/icon_bindap.png">
  5.     <input type="text" v-model="msg">
  6.   </div>
  7. </template>
  8.  
  9. <script>
  10.  
  11. var util = require("./util");
  12.  
  13. export default {
  14.   name: 'app',
  15.   data () {
  16.     return {
  17.       msg: 'Welcome to Your Vue.js'
  18.     }
  19.   },
  20.   created() {
  21.     this.fetchData();
  22.   },
  23.   methods: {
  24.     fetchData() {
  25.       var test = util.testfunc();
  26.       this.msg = test;
  27.     }
  28.   }
  29. }
  30. </script>
  31.  
  32. <style lang="css">
  33.  h1 {
  34.     color: green;
  35.   }
  36. </style>

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

util.js

  1. exports.testfunc = function test(){
  2.     console.log('test');
  3.     return "test";
  4. }

main.js

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

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

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

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

  1. import Vue from 'vue';
  2. import App from './App.vue';
  3. import './style/common.css';
  4.  
  5. new Vue({
  6.   el: '#app',
  7.   template: '<App/>',
  8.   components: { App }
  9. })

index.html

挂载vue到div#app

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  10.  
  11. <body>
  12.     <div id="app"></div>
  13.     <script src="build.js"></script>
  14. </body>
  15.  
  16. </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. 可视化限流管理，Sentinel 控制台启动和接入

    Sentinel 的使用可以分为核心库和控制台两个部分. 核心库不依赖任何框架/库,集成了主流框架,可以进行单机限流降级等功能, 控制台Dashboard提供了可视化的管理限流规则.对集群进行监控,集 ...

  2. 【java面试】集合类篇

    java中主要的类集合接口如下 Collection ├List │├LinkedList │├ArrayList │└Vector │ └Stack └Set Map ├Hashtable ├Has ...

  3. Python学习，第二课 - 字符编码

    关于字符编码 python解释器在加载 .py 文件中的代码时,会对内容进行编码(默认ascill) ASCII(American Standard Code for Information Inte ...

  4. kafka概念扫盲

    一.kafka概述 1.1.定义 Kakfa是一个分布式的基于发布/订阅模式的消息队列(message queue),主要应用于大数据的实时处理领域 1.2.消息队列 1.2.1.传统的消息队列&am ...

  5. jmeter使用—正则表达式提取器

    当我们测试接口的时候,有些请求参数是需要从上个接口返回获取的数据,这样的话我们就需要用到关联了.今天我们使用的关联是正则表达式提取器来进行获取需要关联的数据. 下面来具体说明正则表达式提取器的使用方法 ...

  6. SpringBoot系列教程之事务传递属性

    200202-SpringBoot系列教程之事务传递属性 对于mysql而言,关于事务的主要知识点可能几种在隔离级别上:在Spring体系中,使用事务的时候,还有一个知识点事务的传递属性同样重要,本文 ...

  7. Docker获取镜像报错docker: Error response from daemon

    docker: Error response from daemon: Get https://registry-1.docker.io/v2/: net/http: request canceled ...

  8. PDO和Mysqli的区别

    参考:http://www.cnblogs.com/feng18/p/6523646.html 人家写的不错

  9. HDU-5902-GCD is Funny解题笔记

    Alex has invented a new game for fun. There are n integers at a board and he performs the following ...

  10. hashlib 模块的用法

    import hashlib #多用于加密a=hashlib.md5()print(a) #<md5 HASH object @ 0x00000000021CCF90> a.update( ...