之前都是在html文件中写组件的css，组件的js，组件的模板来演示vue组件的语法，下面介绍以.vue结尾的单文件组件。vue-loader是一个Webpack的loader，可以将单文件组件转换为JavaScript模块。
一、基本组成
单文件组件中包含<template>、<script>、<style>三种代码块。
<template>默认语言是html，内容将被提取为字符串，编译结果作为Vue组件的template选项，一个.vue文件最多包含一个<template>代码块。
<script>默认语言是js，如果检测到babel-loader的配置，将自动支持es6语法，一个.vue文件最多包含一个<script>代码块。
<style>默认语言是css，默认使用style-loader提取内容，并通过<style>标签动态加入文档的<head> 中，一个.vue文件可以包含多个<style>代码块。<style>标签有scoped属性时，它的css只作用于当前组件中的元素。

二、运行时构建的demo
1、新建package.json文件

{
  "name": "vuetest",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "webpack-dev-server --open",
    "build": "webpack-dev-server"
  },
  "author": "camille",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "style-loader": "^0.19.0",
    "vue": "^2.5.2",
    "vue-loader": "^13.3.0",
    "vue-template-compiler": "^2.5.1"
  }
}

2、新建webpack.config.js文件

module.exports = {
  entry: './main.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool: "inline-source-map",
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader','css-loader']
      }
    ]
  }
}

3、新建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>单文件组件运行时构建</title>
</head>
<body>
  <div id="J_vapp"></div>
  <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

4、新建hello.vue单文件组件

<template>
  <p>{{ greeting }}，vue</p>
</template>
<script>
  module.exports={
    data:function(){
      return {
        greeting:"hello"
      }
    }
  }
</script>

<style scoped>
  p{
    font-size:15px;
    color:red;
  }
</style>

5、新建main.js文件

import Vue from 'vue'
import sfile from './hello.vue'
var vm = new Vue({
  el: '#J_vapp',
  render: function(h){
    return h(sfile)
  }
})

6、渲染结果

<p data-v-d0145a06="">hello，vue</p>

可以看出html中的J_vapp相当于桥梁，最后不会出现在dom中。
7、疑惑
我明明没有安装babel-loader，为什么上面可以用import from方式引入模块，而且没报错？vue-loader的v13.0.0版本告诉我，.vue文件将被默认为一个es模块。

四、运行时构建demo的另一种表达
众所周知，在main.js中既可以用import引入文件，也可以用require，下面就用require引入。

1、修改main.js文件

var Vue = require('vue')
var sfile = require('./hello.vue')

var vm = new Vue({
  el: '#J_vapp',
  render: function(h){
    return h(sfile)
  }
})

紧接着出现“Vue is not a constructor”问题。

2、修改webpack.config.js文件

module.exports = {
  entry: './main.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool: "inline-source-map",
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader','css-loader']
      }
    ]
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.js', //vue$表示精确匹配
    }
  }
}

前面那个问题解决了，接着又有“Failed to mount component: template or render function not defined.”问题。

3、修改main.js文件

各种探索，终于在vue-loader变更这里找到问题根源，如果依赖了v13+的vue-loader，用require引入.vue文件时，后面加上default。

var Vue = require('vue')
var sfile = require('./hello.vue').default

var vm = new Vue({
  el: '#J_vapp',
  render: function(h){
    return h(sfile)
  }
})

五、独立构建的demo
1、新建package.json文件
同运行时构建。
2、新建webpack.config.js文件

module.exports = {
  entry: './main.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool: "inline-source-map",
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader','css-loader']
      }
    ]
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.js' //vue$表示精确匹配
    }
  }
}

注意：如果没有resolve的配置，这里会报错。You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

3、新建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>单文件组件，独立构建，模板命名很重要</title>
</head>
<body>
  <div id="J_vapp">
    <temptpl></temptpl>
  </div>
  <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

4、新建hello.vue单文件组件

<template>
  <p>{{greeting}}，vue</p>
</template>
<script type="text/javascript">
  export default {
    data:function(){
      return {
        greeting:"hello"
      }
    }
  }
</script>

<style scoped>
  p{
    font-size:15px;
    color:red;
  }
</style>

5、新建main.js文件

import Vue from 'vue'
import temptpl from './hello.vue'
var vm = new Vue({
  el: '#J_vapp',
  components: { temptpl }
})

6、渲染结果

<div id="J_vapp">
  <p data-v-d0145a06="">hello，vue</p>
</div>

可以看出html中的J_vapp元素不会消失，充当载体桥梁的是temptpl，temptpl最后不会出现在dom中。

六、提取单文件组件的css
1、安装webpack插件

cnpm i -D extract-text-webpack-plugin

2、安装webpack

cnpm i -D webpack

extract-text-webpack-plugin需要webpack作为依赖，npm3不会自动安装依赖。
如果不安装webpack，你会看到报错，Cannot find module 'webpack/lib/Chunk'。
3、配置webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  entry: './main.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool: "inline-source-map",
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            css: ExtractTextPlugin.extract({
              use: 'css-loader',
              fallback: 'vue-style-loader' //这是vue-loader的依赖，所以如果使用npm3，则不需要显式安装。
            })
          }
        }
      }
    ]
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.js' //vue$表示精确匹配
    }
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}

4、新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>提取单文件组件的css</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="J_vapp">
    <temptpl></temptpl>
  </div>
  <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

5、其他文件
与独立构建的demo中的package.json文件，hello.vue，main.js文件保持一致。

七、提取自定义块
1、安装raw-loader

cnpm i -D raw-loader

2、修改hello.vue文件

<docs>
## This is an Example component.
</docs>
<template>
  <p>{{greeting}}，vue</p>
</template>
<script type="text/javascript">
  export default {
    data:function(){
      return {
        greeting:"hello"
      }
    }
  }
</script>

<style scoped>
  p{
    font-size:15px;
    color:red;
  }
</style>

3、配置webpack.config.js文件

var ExtractTextPlugin2 = require("extract-text-webpack-plugin");

module.exports = {
  entry: './main.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool: "inline-source-map",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader','css-loader']
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // 提取 <docs> 中的内容为原始文本
            'docs': ExtractTextPlugin2.extract('raw-loader')
          }
        }
      }
    ]
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.js' //vue$表示精确匹配
    }
  },
  plugins: [
    new ExtractTextPlugin2("docs.md")
  ]
}

4、疑惑
自定义块是按照期望提取到docs.md中了，但是如果我想把.vue文件中的自定义块提取到docs.md，css提取到style.css，我该怎么办？我尝试实例化两个ExtractTextPlugin，发现提取结果是自定义块和css同时出现在docs.md和style.css中，不是我想要的结果。理想的结果应该是，docs.md只包含自定义块的内容，style.css只包含css的内容。

八、代码检验
eslint-loader能够在开发期间每次保存.vue文件时自动检验js代码规范。

1、安装loader

cnpm i -D eslint eslint-loader eslint-plugin-html

2、修改webpack.config.js文件

module.exports = {
  entry: './main.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool: "inline-source-map",
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader','css-loader']
      }
    ]
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.js' //vue$表示精确匹配
    }
  }
}

Webpack loader处理顺序是从右到左。确保在vue-loader之前应用eslint-loader，这样才能检验编译前的代码。webpack中所有的loader都可以拥有include和exclude属性，exclude排除不满足条件的文件夹，include匹配需要被loader处理的文件或文件夹。第三方的.vue组件可以不用检验，只检验自己写的。
3、修改package.json文件

{
  "name": "vuetest",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "webpack-dev-server --open",
    "build": "webpack-dev-server"
  },
  "author": "camille",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "eslint": "^4.9.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^3.2.2",
    "style-loader": "^0.19.0",
    "vue": "^2.5.2",
    "vue-loader": "^13.3.0",
    "vue-template-compiler": "^2.5.2"
  },
  "eslintConfig": {
    "env": {
      "browser": true
    },
    "plugins": [
      "html"
    ]
  }
}

4、新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>代码检查eslint，.vue文件和js文件</title>
</head>
<body>
  <div id="J_vapp"></div>
  <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

5、修改main.js文件

var Vue = require('vue')
var temptpl = require('./hello.vue').default

var vm = new Vue({
  el: '#J_vapp',
  template:'<tpl/>',
  components: { tpl: temptpl }
})

6、新建hello.vue文件

<template>
  <p>{{greeting}}，vue</p>
</template>
<script type="text/javascript">
  module.exports={
    data:function(){
      return {
        greeting:"hello"
      }
    }
  }
</script>

<style scoped>
  p{
    font-size:15px;
    color:red;
  }
</style>

7、测试
故意写个错误，看看eslint-loader会不会起作用。
8、渲染结果

<p data-v-17976ece>hello，vue</p>

可以看出html中的J_vapp相当于桥梁，最后不会出现在dom中。

vue中的单文件组件的更多相关文章

  1. Vue中创建单文件组件 注册组件 以及组件的使用

    <template> <div id="app"> <v-home></v-home> <hr > <br> ...

  2. vue入门之单文件组件

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

  3. Vue -3：单文件组件

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

  4. 如何在vue && webpack 项目中的单文件组件中引入css

    引入方式很简单,就是在script下使用require()即可. 因为import 是import...from 的形式,所以是不需要的. <script> import {mapStat ...

  5. 【原】vue单文件组件互相通讯

    在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用! 在一个vue项目中,单文件组件以.vue形式文件命名 每个组件之间 ...

  6. vue单文件组件互相通讯

    在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用! 在一个vue项目中,单文件组件以.vue形式文件命名 每个组件之间 ...

  7. vue中创建全局单文件组件/命令

    1.在 vue中如果我们使用基于vue.js编写的插件,我们可以使用Vue.use() 如在main.js中: 2.添加全局命令,让每个vue单文件组件都可以使用到: 第一步:最好建一个全局的命令文件 ...

  8. vue 单文件组件中样式加载

    在写单文件组件时,一般都是把标签.脚本.样式写到一起,这样写个人感觉有点不够简洁,所以就想着把样式分离出去. 采用import加载样式 在局部作用域(scoped)采用@import加载进来的样式文件 ...

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

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

随机推荐

  1. LeetCode（74）：搜索二维矩阵

    Medium! 题目描述: 编写一个高效的算法来判断 m x n 矩阵中,是否存在一个目标值.该矩阵具有如下特性: 每行中的整数从左到右按升序排列. 每行的第一个整数大于前一行的最后一个整数. 示例  ...

  2. 滴水穿石-04Eclipse中常用的快捷键

    一:常用快捷键 1:内容辅助键  :Alt+/ :main + 该快捷键 :自动生成main方法 :syso + 该快捷键 :自动生成System.out.println();语句 :提示作用 :内容 ...

  3. 史上最简单的SpringCloud教程 | 第九篇: 服务链路追踪(Spring Cloud Sleuth)

    这篇文章主要讲述服务追踪组件zipkin,Spring Cloud Sleuth集成了zipkin组件. 注意情况: 该案例使用的spring-boot版本1.5.x,没使用2.0.x, 另外本文图3 ...

  4. 处理json大文件

    import json import pymysql # 读取review数据,并写入数据库 # 导入数据库成功,总共4736897条记录 def prem(db): cursor = db.curs ...

  5. python pop方法

    在两个地方见到了pop方法的使用,看起来是之前自己确实故略寡闻了. 在pandas的DataFrame中 import pandas as pd dataframe = pd.read_csv('ir ...

  6. js中匿名函数和回调函数

    匿名函数: 通过这种方式定义的函数:(没有名字的函数) 作用:当它不被赋值给变量单独使用的时候 1.将匿名函数作为参数传递给其他函数 2.定义某个匿名函数来执行某些一次性任务 var f = func ...

  7. 使用shell脚本定时采集日志数据到hdfs分布式文件系统

    1.首先对linux操作系统的crontab命令进行熟悉和了解: .crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系 ...

  8. LeetCode-450 二叉搜索树删除一个节点

    二叉搜索树 建树 删除节点,三种情况,递归处理.左右子树都存在,两种方法,一种找到左子树最大节点,赋值后递归删除.找右子树最小同理 class Solution { public: TreeNode* ...

  9. UICollectionView的常用方法

    class UICollectionView : UIScrollView //初始化,位置,风格 init(frame: CGRect, collectionViewLayout layout: U ...

  10. Python_subprocess模块

    subprocess中,允许生成新的进程,连接到input/output/error管道,并获取他们的返回(状态)码,主要用于替换os.system/os.spawn*几个旧的模块和方法 subpro ...