首先必须先安装与配置好 Webpack。可参考以下内容：
.vue 单文件组件：是一个后缀名为 .vue 的文件，我们可以利用 Webpack 的 vue-loader 插件来处理 *.vue 的文件。
1 安装加载器
使用 npm 安装 vue-loader、vue-style-loader、babel 以及 babel-loader 等加载器（之所以要加载最后两个加载器，是为了支持 ES6 语法）。
npm install --save vuenpm install --save-dev vue-loadernpm install --save-dev vue-style-loadernpm install --save-dev vue-template-compilernpm install --save-dev vue-hot-reload-apinpm install --save-dev babelnpm install --save-dev babel-loader@7npm install --save-dev babel-corenpm install --save-dev babel-plugin-transform-runtimenpm install --save-dev babel-preset-es2015npm install --save-dev babel-runtime复制代码
对应安装的加载器版本是：
- vue@2.6.8
- vue-loader@15.7.0
- vue-style-loader@4.1.2
- vue-template-compiler@2.6.8
- vue-hot-reload-api@2.3.3
- babel@6.23.0
- babel-loader@7.1.5
- babel-core@6.26.3
- babel-plugin-transform-runtime@6.23.0
- babel-preset-es2015@6.24.1
- babel-runtime@6.26.0
注意： 因为我们安装的 babel 是 6.x 版本，而它所对应的 babe-loaderl 版本必须是 7.x，所以在命令行中，我们明确指定了版本号。如果版本不对应，就会抛出
Cannot find module '@babel/core'错误。
2 配置 webpack
在 webpack.config.js 中，新增对 .vue 文件以及 ES6 语法的解析支持：
//插件const ExtractTextPlugin = require('extract-text-webpack-plugin');//Vue Loader v15+const VueLoaderPlugin = require('vue-loader/lib/plugin');var config = { module: { rules: [ {//vue 解析 test: /\.vue$/, loader: 'vue-loader', options: { loaders: { css: ExtractTextPlugin.extract({ use: 'css-loader', fallback: 'vue-style-loader' }) } } }, {//js 解析 test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, {//css 解析 test: /\.css$/, use: ExtractTextPlugin.extract({//插件 use: 'css-loader', fallback: 'style-loader' }) } ] }, entry: { main: './main' }, output: { //目标输出目录 path: '/public/assets', //资源文件引用目录 publicPath: '/dist/', //输出文件的文件名 filename: 'main.js' }, plugins: [//插件 new ExtractTextPlugin('main.css'), new VueLoaderPlugin() ]};module.exports = config;复制代码 - 针对 .vue 文件，使用 vue-loader 来解析。注意：如果 Vue Loader 版本为 15+，那么必须在此配置 VueLoaderPlugin。
- 因为 vue-loader 在编译 .vue 文件时，会对
<template>、<script>以及<style>标签分别处理，所以我们在 vue-loader 之后，又配置了 options 属性，用来指定 CSS 解析器。 - 也可以对
<template>、<script>以及<style>标签分别指定不同的前端技术，比如<style lang="less">，然后在配置文件的 loaders 中指定想要的 loader 就可以咯O(∩_∩)O~
3 配置 babel
babel 是新一代 JavaScript 语法的编译器 。 因为新，所以浏览器会因版本不同而存在兼容性问题。但是新语法实在太诱人咯，它不但能够减少代码量，从而减轻代码维护成本，而且还拥有 async,await 等新特性。
Babel 可以让我们放心地使用大部分 JavaScript 新的标准语法，代码会通过编译，生成兼容绝大多数主流浏览器的代码 。 在项目工程脚手架中，一般会使用 .babelrc 文件，来配置一些基本参数，配合 webpack 进行打包压缩 。
在项目根目录，创建 .babelrc 文件，内容如下：
{ "presets": [ "es2015" ], "plugins": [ "transform-runtime" ], "comments": false}复制代码 | 属性 | 说明 |
|---|---|
| presets | 指定预设转码器；babel6 有这些值可选：es2015 ,stage-0 , stage-1 ,stage-2 , stage-3 ,react。 |
| plugins | 插件。这里安装了 transform-runtime 插件。 |
| comments | 在生成的文件中，是否带注释。 |
之所以使用了 transform-runtime 插件，是因为 babel 在转换 ES2015 语法为 ECMAScript 5 的语法时，它需要一些辅助函数，例如 _extend。babel 默认会将这些辅助函数内联到每一个 js 文件里，这样文当件多的时候，项目就会很大。所以 babel 提供了 transform-runtime 插件来将这些辅助函数 “搬” 到一个单独的模块 babel-runtime 中，通过这种方式就能有效地减少项目文件。
4 编写 *.vue 文件
每个 *.vue 文件代表一个组件，组件之间可以相互依赖。
我们在主工程根目录下，新建一个 hello.vue：
您好，{ {name}}复制代码
这里使用了 ES 6 语法：
data () {}复制代码 就是：
data:function () {}复制代码 - 在
<template>标签中写 H5 代码，就是畅快O(∩_∩)O~，Webpack 会把它编译为 Render 函数。 - 因为配置了extract-text-webpack-plugin 插件，所以写在
<style>中的样式，会被打包到 main.css 中。因为加了 scoped 属性，所以这里定义的样式只对当前组件（hello.vue）有效。
5 引用 *.vue 组件
在父组件中引用 *.vue 组件时，可以自定义组件名称。现在让我们在 main.js 中引用刚刚定义的 hello.vue 组件：
// 引入 Vue 框架import Vue from 'vue'//引入 hello.vue 组件import Hello from './hello.vue'new Vue({ el: '#app', render: h => h(Hello)})复制代码 这里使用了 ES6 的箭头函数：
render: h => h(Hello)复制代码
相当于：
render: function (h){ return h(Hello)}复制代码 注意： 箭头函数中的 this 对象指向的是定义时所在的对象。请看下面的例子：
function Timer() { this.id = 10; var that = this; setTimeout(function () { console.log('普通 this=' + this.id);//undefined console.log('普通 that=' + that.id);//10 }, 1000) setTimeout(() => { console.log('箭头函数=' + this.id);//10 }, 1000)}new Timer();复制代码 运行结果：
使用箭头函数之后，我们就不需要再额外定义一个 that 来保存父函数的 this 对象咯，代码将因此变得更简洁O(∩_∩)O~
6 运行
在安装了 Webpack 环境下的工程根目录，执行 npm run dev，执行成功后，就会自动打开浏览器：
F12 打开浏览器调试器：
可以看到，<div id="app"> 被替换为
您好，Deniro复制代码
对应的 CSS 也加上了我们定义的样式。
之所以加了 -v-xxx，是因为我们在 <style> 加了 scoped 属性。
7 扩展
我们再定义两个组件（标题与按钮组件），把它们引入 hello.vue。
title.vue：
{ {title}}
复制代码
button.vue：
复制代码
在根实例 hello.vue 组件中，引入刚刚定义的两个组件：
复制代码请点击
这里也用了 ES6 对象字面量缩写语法：
components: { vTitle, vButton }复制代码 相当于：
components: { vTitle: vTitle, vButton: vButton }复制代码 当对象的 key 与 value 同名时，就可以采用这种简洁的写法咯O(∩_∩)O~
注意： 这些导入的组件，都是局部注册且可以自定义名称的组件。
渲染结果：
点击按钮组件后的运行结果：
至此，Vue 单文件组件环境搭建成功O(∩_∩)O~