Vuejs-Einzeldateikomponente (ausführliches Tutorial)

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung von Vuejs-Einzeldatei-Komponentenbeispielen vor.

In den vorherigen Beispielen haben wir die Komponenten über Vue.component oder Komponentenattribute definiert Die Methode ist in vielen kleinen und mittleren Projekten in Ordnung, aber in komplexen Projekten sind die folgenden Mängel sehr offensichtlich:

String-Vorlage: Fehlende Hervorhebung, schwierig zu schreiben, insbesondere mehrzeiliges HTML. Obwohl die Vorlage dies kann in eine HTML-Datei geschrieben werden, ist dies zu aufdringlich und trägt nicht zur Komponentenentkopplung und -trennung bei.

Keine CSS-Unterstützung: bedeutet, dass bei der Komponentenisierung von HTML und JavaScript CSS offensichtlich weggelassen wird.

Kein Build-Schritt: Beschränkt auf die Verwendung von HTML und ES5-JavaScript, nicht auf Präprozessoren.

Die von Vuejs bereitgestellte Einzeldateikomponente mit der Erweiterung .vue bietet Lösungen für alle oben genannten Probleme.

Erste Einführung in einzelne Dateikomponenten

Oder verwenden Sie den Quellcode in Tools, um die Datei hello.vue im src-Verzeichnis zu erstellen Der Inhalt lautet wie folgt:

<template>
 <h2>{{ msg }}</h2>
</template>
<script>
export default {
data () {
return {
msg:&#39;Hello Vue.js 单文件组件~&#39;
}
}
}
</script>
<style>
h2 {
color: green;
}
</style>

Führen Sie ihn dann in app.js ein und verwenden Sie ihn:

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

Zu diesem Zeitpunkt kann das Projekt nicht ausgeführt werden, da das .vue-Datei-Webpack nicht ersetzt werden kann Für die Verarbeitung ist der entsprechende Vue-Loader erforderlich, und aufmerksame Freunde werden feststellen, dass in hello.vue die ES6-Syntax verwendet wird. Zu diesem Zeitpunkt müssen Sie den entsprechenden Syntaxkonvertierungs-Loader verwenden, um ES6 in ES5 zu konvertieren, das mit Mainstream-Browsern kompatibel ist. Syntax, hier müssen Sie das offiziell empfohlene Babel-Tool verwenden. Installieren Sie zuerst den erforderlichen Loader:

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

Manche Leute fragen sich, warum sie nach der Verwendung von babel-loader so viele Tools installieren müssen. Dies liegt daran, dass viele Tools unabhängig sind und der Loader nur eine Brücke ist, die mit Webpack verwendet wird. und hier sind babel-core und babel-preset-env der Kern der Implementierung von ES6 bis ES5.

Wir ändern dann die Konfiguration von webpack.config.js wie folgt:

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

Für die Babel-Konfiguration müssen wir außerdem eine .babelrc-Datei im Projektstammverzeichnis erstellen, um Babel-Voreinstellungen und andere zu konfigurieren Verwandte Plug-Ins, der Inhalt lautet wie folgt:

{
 "presets": [ "env" ]
}

Obwohl alles konfiguriert ist, meldet das Projekt dennoch einen Fehler und der folgende Fehler wird gemeldet:

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

Jemand ist Ich bin nicht zufrieden, weil sie die Abhängigkeiten offensichtlich gemäß den offiziellen Anweisungen installiert und richtig konfiguriert haben. Warum wird immer noch ein Fehler gemeldet? Haben Sie keine Angst, wenn Sie auf einen Fehler stoßen. Es ist leicht herauszufinden, dass das Modul „vue-template-compiler“ nicht gefunden werden kann das vue-loader -Tool bei der Verarbeitung von .vue-Dateien. vue-template-compiler

Zuerst wusste ich nicht, warum der Beamte den Benutzern nicht direkt mitteilte, dass sie diese Abhängigkeit installieren müssen. Nachdem ich vue-loader gelesen hatte, wurde mir klar, dass die Datei package.json

und Da peerDependencies und peerDependencies vorhanden sind, wird es während der Installation nicht automatisch installiert (npm@3.0+), sondern gibt nur relevante Warnungen aus, daher müssen wir es natürlich manuell installieren, wenn wir CSS schreiben müssen Für die .vue-Datei müssen wir auch den CSS-Loader verwenden. Dies ist auch in peerDependencies. Verwandte Diskussion: https://github.com/vuejs/vue-loader/issues/1158vue-template-compilercss-loaderJetzt, da Sie das Problem kennen, installieren Sie es einfach direkt:

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

Führen Sie das Projekt erneut aus. auf der Seite Unser Inhalt erscheint und es wird kein Fehler gemeldet, ok, Sie sind fertig~

Verwendung des PräprozessorsWir haben es gelernt Schreiben Sie in .vue CSS. Was ist, wenn Sie den Sass-Präprozessor verwenden? Installieren Sie zunächst das im vorherigen Artikel erwähnte Modul:

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

Die Konfiguration erfordert nur zwei Schritte:

Ändern Sie die Vue-Loader-Konfiguration in webpack.config.js

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'
       }
      ]
     }
    }
   },
   // ...
  ]
 }
}

Fügen Sie dem Style-Tag in der Vue-Datei das Attribut

hinzu.

lang="scss"Nachdem die Konfiguration abgeschlossen ist, können Sie problemlos Sass-Syntax in die .vue-Datei schreiben.

Globale Einstellungsdatei laden

In der tatsächlichen Entwicklung, wenn wir Sass-Dateien schreiben, extrahieren wir oft die globalen SCSS-Variablen und legen sie in einer separaten Datei ab, aber es gibt ein Problem Die zu verwendende Komponente muss manuell eingegeben werden

, was sehr unfreundlich ist. Das Plug-in

kann uns sehr gut bei der Lösung dieses Problems helfen. Installieren Sie es zuerst: @import './styles/_var.scss'

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

sass-resources-loader und ändern Sie dann die Vue-Loader-bezogene Konfiguration in der Datei webpack.config.js:

// ...
{
 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')]
     }
    }
   ]
  }
 }
}
// ...

Die Konfiguration ist abgeschlossen. Okay, testen wir es noch einmal.

Erstellen Sie die Dateien hello1.vue bzw. hello2.vue im src-Verzeichnis:

<!-- hello1.vue -->
<template>
 <h1>{{ msg }}</h1>
</template>
<script>
export default {
name:&#39;hello1&#39;,
data () {
return {
msg:&#39;Hello Vue.js 单文件组件~&#39;
}
}
}
</script>
<stylelang="scss">
h1 {
color: $green;
}
</style>

<!-- hello2.vue -->
<template>
 <h1>{{ msg }}</h1>
</template>
<script>
export default {
name:&#39;hello2&#39;,
data () {
return {
msg:&#39;Hello Vue.js 单文件组件~&#39;
}
}
}
</script>
<stylelang="scss">
h1 {
color: $red;
}
</style>

Dann erstellen Sie ein Stilverzeichnis und eine neue Datei _var.scss, um darin globale Variablen zu speichern:

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

Als nächstes referenzieren Sie die beiden Komponenten in app.js:

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

Führen Sie das Projekt einfach erneut aus.

BereichsstilDie einzelne Dateikomponente bietet uns eine sehr praktische Funktion, nämlich das Hinzufügen des Bereichsattributs zum Stil-Tag. Die Stile innerhalb des Tags gelten nur für Elemente in der aktuellen Komponente.

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

<!-- hello1.vue -->
<stylelang="scss"scoped>
h1 {
color: $green;
}
</style>
<!-- hello2.vue -->
<stylelang="scss"scoped>
h1 {
color: $red;
}
</style>

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

自定义块

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

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

<docs>
 # 标题
  这是标题内容，[仓库地址](https://github.com/yugasun/You-Dont-Know-Vuejs)
 ## 子标题
  这是子标题内容
</docs>
<template>
 <h1>{{ msg }}</h1>
</template>
<script>
export default {
name:&#39;hello1&#39;,
data () {
return {
msg:&#39;Hello Vue.js 单文件组件~&#39;
}
}
}
</script>
<stylelang="scss"scoped>
h1 {
color: $green;
}
</style>

然后修改 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 文件，这就是我们想编写的说明文档。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

集成vue到jquery/bootstrap项目方法？

在vue.js中实现分页中单击页码更换页面内容

在vue2.0组件中如何实现传值、通信

Das obige ist der detaillierte Inhalt vonVuejs-Einzeldateikomponente (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!