Vuejs中怎么实现一个单文件组件-创新互联

Vuejs中怎么实现一个单文件组件，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

初识单文件组件

还是利用工欲善其事必先利其器 中的源码，在 src 目录下创建 hello.vue 文件，内容如下：

然后在 app.js 中引入使用：

// ES6 引入模块语法
import Vue from 'vue';
import hello from './hello.vue';
new Vue({
 el: "#app",
 template: '',
 components: {
  hello
 }
});

此时项目是没法运行的，因为 .vue 文件 webpack 是没法是别的，它需要对应的 vue-loader 来处理才行，而且细心的朋友会发现 hello.vue 中用到了 ES6 语法，此时就需要用到相应的语法转化 loader 将 ES6 转化成主流浏览器兼容的 ES5 语法，这里就需要用到官方推荐的 babel 工具了。先安装需要的 loader :

# hello.vue 文件中使用了 css，所以需要 css-loader 来处理，vue-loader 会自动调用
npm install vue-loader css-loader babel-loader babel-core babel-preset-env --save-dev

有的人疑惑只是使用 babel-loader 为什么还需要安装后面这么多工具呢，这是因为很多工具都是独立的， loader 只是为了配合 webpack 使用的桥梁，而这里 babel-core 和 babel-preset-env 才是实现 ES6 到 ES5 的核心。

我们再修改 webpack.config.js 配置如下：

module.exports = {
 // ...
 module: {
  // 这里用来配置处理不同后缀文件所使用的loader
  rules: [
   {
    test: /.vue$/,
    loader: 'vue-loader'
   },
   {
    test: /.js$/,
    loader: 'babel-loader'
   }
  ]
 }
}

对于 babel 的配置，我们还需在项目根目录下刚创建 .babelrc 文件来配置 Babel presets 和 其他相关插件，内容如下：

{
 "presets": [ "env" ]
}

但是虽然虽然都配置好了，项目还是还是会报错，报如下错误：

ERROR in ./src/hello.vue
Module build failed: Error: Cannot find module 'vue-template-compiler'

有人就不高兴了，明明是按照官方提示安装了依赖，并正确的进行配置，为什么还是会报错呢？遇到错误不要怕，先阅读下错误是什么，很容易发现，是因为 Cannot find module 'vue-template-compiler' ，这是因为 vue-loader 在处理 .vue 文件时，还需要依赖 vue-template-compiler 工具来处理。

刚开始我不知道官方为什么没有直接告诉用户需要安装这个依赖，通过阅读 vue-loader 才明白其 package.json 文件中是将 vue-template-compiler 和 css-loader 作为 peerDependencies ，而 peerDependencies 在安装的时候，并不会自动安装（npm@3.0+），只会给出相关警告，所以这个需要我们手动安装的，当然在 .vue 文件中如果需要写 CSS，也必须用到 css-loader ，这个也是在 peerDependencies 中。相关讨论： https://github.com/vuejs/vue-loader/issues/1158

知道问题了，直接安装下就可以了：

npm install vue-template-compiler css-loader --save-dev

再次运行项目，页面中出现了我们的内容，并没报错，ok，大功告成~

使用预处理器

我们已经学会在 .vue 中写 css 了，那么如果使用 sass 预处理器呢？首先安装上篇文章中提到的模块：

npm install sass-loader node-sass --save-dev

配置只需两步：

修改 webpack.config.js 中 vue-loader 配置

module.exports = {
 // ...
 module: {
  // 这里用来配置处理不同后缀文件所使用的loader
  rules: [
   {
    test: /.vue$/,
    loader: 'vue-loader',
    options: {
     loaders: {
      // 这里也可以使用连写方式，但是不利于自定义话参数配置
      // scss: 'vue-style-loader!css-loader!sass-loader'
      scss: [
       {
        loader: 'vue-style-loader'
       },
       {
        loader: 'css-loader'
       },
       {
        loader: 'sass-loader'
       }
      ]
     }
    }
   },
   // ...
  ]
 }
}

给 .vue 文件中的 style 标签，添加 lang="scss" 属性。

配置完后，就可以再 .vue 文件中，愉快地编写 sass 语法了。

加载全局设置文件

实际开发中，我们在编写 sass 文件时，经常会将全局的 scss 变量提取出来，放到一个单独的文件中，但是这样就有个问题，每个需要用到的组件，都需要手动 @import './styles/_var.scss' 进来，非常不友好。插件 sass-resources-loader 就很好地帮我们解决这个问题，先安装一下：

npm install sass-resources-loader --save-dev

然后修改 webpack.config.js 文件中 vue-loader 相关配置：

// ...
{
 test: /.vue$/,
 loader: 'vue-loader',
 options: {
  loaders: {
   scss: [
    {
     loader: 'vue-style-loader'
    },
    {
     loader: 'css-loader'
    },
    {
     loader: 'sass-loader'
    },
    // 看这里，看这里，看这里
    {
     loader: 'sass-resources-loader',
     options: {
      // 这里的resources 属性是个数组，可以放多个想全局引用的文件
      resources: [resolve('./src/styles/_var.scss')]
     }
    }
   ]
  }
 }
}
// ...

配置就完成了，我们再来测试下。

在 src 目录下分别创建 hello1.vue 和 hello2.vue 文件：

h2 {
color: $green;
}






h2 {
color: $red;
}

然后创建一个 styles 目录，并在其中新建存放全局变量的文件 _var.scss :

$green: rgb(41, 209, 41);
$red: rgb(177, 28, 28);

接下来，在 app.js 中引用两个组件：

import Vue from 'vue';
import hello1 from './hello1.vue';
import hello2 from './hello2.vue';
new Vue({
 el: "#app",
 template: '
',
 components: {
  hello1,
  hello2
 }
});

重新运行项目就可以了。

有作用域的 style

单文件组件中为我们提供了一个非常便利的功能，就是当 style 标签添加 scoped 属性时，标签内的样式将只作用于当前组件中的元素。

接着上面的例子，运行后会发现 hello1.vue 中的 h2 颜色并不是想要的 $green 色，而是被 hello2.vue 中的样式覆盖了。于是分别在 hello1.vue 和 hello2.vue 的 style 标签上添加 scoped 属性，如下：

h2 {
color: $green;
}



h2 {
color: $red;
}

这样一来我们的两个 h2 标签颜色都显示正常了。

自定义块

在编写某些开源组件时，有时候我们需要同时维护多个组件和组件说明，但是每次修改就要同时修改 .vue 和 .md 文件，相当麻烦。 .vue 文件的 自定义语言块 功能，就允许我们将 markdown 说明同时写进 .vue 文件中，然后通过插件将其说明部分单独提取到相应的 .md 文件中，这样就可以同时维护说明文档和组件功能了。

比如我们将 hello1.vue 文件修改如下：

 # 标题
  这是标题内容，[仓库地址](https://github.com/yugasun/You-Dont-Know-Vuejs)
 ## 子标题
  这是子标题内容




h2 {
color: $green;
}

然后修改 webpack.config.js 配置：

const path = require('path');
// 引入相关插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
function resolve(dir){
 return path.resolve(__dirname, dir);
}
module.exports = {
 // 入口文件
 entry: './src/app.js',
 // 编译输出文件
 output: {
  path: resolve('./'),
  filename: 'build.js'
 },
 resolve: {
  alias: {
   // 因为我们这里用的是 require 引入方式，所以应该使用vue.common.js/vue.js/vue.min.js
   'vue$': 'vue/dist/vue.common.js'
  }
 },
 devServer: {
  // 这里定义 webpack-dev-server 开启的web服务的根目录
  contentBase: resolve('./')
 },
 module: {
  // 这里用来配置处理不同后缀文件所使用的loader
  rules: [
   {
    test: /.vue$/,
    loader: 'vue-loader',
    options: {
     loaders: {
      scss: [
       {
        loader: 'vue-style-loader'
       },
       {
        loader: 'css-loader'
       },
       {
        loader: 'sass-loader'
       },
       {
        loader: 'sass-resources-loader',
        options: {
         resources: [resolve('./src/styles/_var.scss')]
        }
       }
      ],
      docs: ExtractTextPlugin.extract('raw-loader')
     }
    }
   },
   {
    test: /.js$/,
    loader: 'babel-loader'
   }
  ]
 },
 plugins: [
  new ExtractTextPlugin('docs.md')
 ]
}

这里用到了 extract-text-webpack-plugin 导出 text 插件，和 raw-loader ，分别都安装下就行。

然后运行构建命令 npm run build ，等运行结束，根目录下会同时生成一个 docs.md 文件，这就是我们想编写的说明文档。

关于Vuejs中怎么实现一个单文件组件问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联成都网站设计公司行业资讯频道了解更多相关知识。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。