Composant de fichier unique Vuejs (tutoriel détaillé)

Cet article présente principalement l'explication détaillée des exemples de composants à fichier unique Vuejs. Les amis qui en ont besoin peuvent s'y référer

Dans les exemples précédents, nous avons défini les composants via Vue.component ou les attributs des composants. La méthode convient à de nombreux projets de petite et moyenne taille, mais dans les projets complexes, les défauts suivants sont très évidents :

Modèle de chaîne : manque de surbrillance, difficile à écrire, notamment en HTML multiligne Bien que le modèle puisse être écrit dans un fichier HTML, il est trop intrusif et ne favorise pas le découplage et la séparation des composants.

Pas de support CSS : signifie que lorsque HTML et JavaScript sont composants, CSS est évidemment laissé de côté.

Aucune étape de construction : limitée à l'utilisation de HTML et JavaScript ES5, pas de préprocesseurs.

Le composant mono-fichier avec l'extension .vue fourni par Vuejs fournit des solutions à tous les problèmes ci-dessus.

Première introduction aux composants à fichier unique

Ou utilisez le code source dans Outils pour le créer dans le répertoire src fichier hello.vue, le le contenu est le suivant :

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

Ensuite, introduisez-le dans app.js :

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

Le projet ne peut pas être exécuté pour le moment, car le webpack du fichier .vue est Il n'y a pas d'une autre manière. Il a besoin du chargeur de vue correspondant pour le traiter, et les amis prudents découvriront que la syntaxe ES6 est utilisée dans hello.vue. À ce stade, vous devez utiliser le chargeur de conversion de syntaxe correspondant pour convertir ES6 en serveur de navigation grand public. -syntaxe ES5 compatible, vous devez ici utiliser l'outil babel officiellement recommandé. Installez d'abord le chargeur requis :

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

Certaines personnes se demandent pourquoi elles doivent installer autant d'outils après avoir simplement utilisé babel-loader C'est parce que de nombreux outils sont indépendants et que le chargeur n'est utilisé qu'avec webpack. bridge, et ici babel-core et babel-preset-env sont au cœur de la réalisation de ES6 vers ES5.

Nous modifions ensuite la configuration webpack.config.js comme suit :

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

Pour la configuration de Babel, nous devons également créer un fichier .babelrc dans le répertoire racine du projet pour configurer les préréglages Babel et autres Le contenu des plug-ins concernés est le suivant :

{
 "presets": [ "env" ]
}

Mais même si tout est configuré, le projet signalera toujours une erreur comme suit :

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

Quelqu'un est mécontent, évidemment. J'ai installé les dépendances conformément aux instructions officielles et je les ai configurées correctement. Pourquoi ai-je toujours une erreur ? N'ayez pas peur lorsque vous rencontrez une erreur. Lisez d'abord quelle est l'erreur. Il est facile de découvrir que c'est parce que vous ne trouvez pas le module 'vue-template-compiler'. C'est parce que vue-loader doit également s'appuyer sur. l'outil vue-template-compiler lors du traitement des fichiers .vue à gérer.

Au début, je ne savais pas pourquoi le responsable n'avait pas dit directement aux utilisateurs qu'ils devaient installer cette dépendance. Après avoir lu vue-loader, j'ai réalisé que son fichier package.json utilise vue-template-compiler et <.> comme peerDependencies et peerDependencies sont présents lors de l'installation, il ne sera pas installé automatiquement (npm@3.0+), mais donnera uniquement des avertissements pertinents, nous devons donc l'installer manuellement, bien sûr, si nous devons écrire du CSS. le fichier .vue, il faut aussi utiliser css-loader C'est aussi dans peerDependencies. Discussion connexe : https://github.com/vuejs/vue-loader/issues/1158css-loader

Maintenant que vous connaissez le problème, installez-le simplement directement :

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

Exécutez le projet encore une fois, Notre contenu apparaît sur la page et aucune erreur n'est signalée, ok, vous avez terminé ~

Utilisez le préprocesseur

Nous avons appris à utiliser .vue Maintenant que j'ai écrit du CSS, que se passe-t-il si j'utilise le préprocesseur sass ? Installez d'abord les modules mentionnés dans l'article précédent :

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

La configuration ne prend que deux étapes :

Modifiez la configuration de vue-loader dans 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'
       }
      ]
     }
    }
   },
   // ...
  ]
 }
}

Ajoutez l'attribut

à la balise de style dans le fichier .vue. lang="scss"

Une fois la configuration terminée, vous pouvez volontiers écrire la syntaxe sass dans le fichier .vue.

Charger le fichier de paramètres globaux

Dans le développement réel, lorsque nous écrivons des fichiers sass, nous extrayons souvent les variables scss globales et les mettons dans un fichier séparé, mais il y a un problème est que chaque Le composant qui doit être utilisé doit être saisi manuellement

, ce qui est très peu convivial. Le plug-in @import './styles/_var.scss' peut très bien nous aider à résoudre ce problème. Installez-le d'abord : sass-resources-loader

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

puis modifiez la configuration liée à vue-loader dans le fichier 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')]
     }
    }
   ]
  }
 }
}
// ...

La configuration est terminée, testons-la à nouveau.

Créez respectivement les fichiers hello1.vue et hello2.vue dans le répertoire src :

<!-- 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>

Créez ensuite un répertoire styles et créez un nouveau fichier _var.scss pour y stocker les variables globales :

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

Ensuite, référencez les deux composants dans 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
 }
});

Réexécutez le projet.

Style de portée

Le composant fichier unique nous offre une fonction très pratique, qui consiste à ajouter l'attribut scoped à la balise de style , les styles dans la balise ne s'appliqueront qu'aux éléments du composant actuel.

接着上面的例子，运行后会发现 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组件中如何实现传值、通信

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!