Vuejs 単一ファイル コンポーネント (詳細なチュートリアル)

亚连
リリース: 2018-06-06 17:02:23
オリジナル
1911 人が閲覧しました

この記事では、主に Vuejs の単一ファイル コンポーネントのサンプルの詳細な説明を紹介します。必要な方は参照してください。

前の例では、Vue.component またはコンポーネント属性を使用してコンポーネントを定義しました。大規模なプロジェクトでは問題ありませんが、複雑なプロジェクトでは、次の欠点が非常に明白です:

文字列テンプレート: 強調表示がないため、特に HTML が複数行ある場合、記述が面倒です。テンプレートは HTML ファイルに記述することもできますが、煩わしすぎるため、コンポーネントの分離や分離には役立ちません。

CSS サポートなし: HTML と JavaScript がコンポーネント化されるとき、CSS は明らかに省略されることを意味します。

ビルドステップなし: プリプロセッサではなく、HTML と ES5 JavaScript の使用に限定されます。

Vuejs によって提供される .vue 拡張子の付いた単一ファイル コンポーネントは、上記のすべての問題に対する解決策を提供します。

単一ファイルコンポーネントの最初の紹介

または、ツールのソースコードを使用して、次の内容の hello.vue ファイルを src ディレクトリに作成します:

<template>
 <h2>{{ msg }}</h2>
</template>
<script>
export default {
data () {
return {
msg:&#39;Hello Vue.js 单文件组件~&#39;
}
}
}
</script>
<style>
h2 {
color: green;
}
</style>
ログイン後にコピー

次に、app.js が導入され、以下で使用されます。

// ES6 引入模块语法
import Vue from &#39;vue&#39;;
import hello from &#39;./hello.vue&#39;;
new Vue({
 el: "#app",
 template: &#39;<hello/>&#39;,
 components: {
  hello
 }
});
ログイン後にコピー

.vue ファイル webpack を他のものにすることはできないため、このプロジェクトは実行できません。これを処理するには、対応する vue-loader が必要です。注意深い人は、ここで hello.vue ES6 構文が使用されていることに気づくでしょう。ここでは、公式に推奨されている babel ツールを使用する必要があります。最初に必要なローダーをインストールします:

# hello.vue 文件中使用了 css,所以需要 css-loader 来处理,vue-loader 会自动调用
npm install vue-loader css-loader babel-loader babel-core babel-preset-env --save-dev
ログイン後にコピー

babel-loader を使用しただけで、なぜこれほど多くのツールをインストールする必要があるのか​​と疑問に思う人もいます。これは、多くのツールが独立しており、ローダーは webpack と連携するだけだからです。ブリッジが使用されており、ここで babel-core babel-preset-env が ES6 から ES5 への実装のコアとなります。 babel-loader 为什么还需要安装后面这么多工具呢,这是因为很多工具都是独立的, loader 只是为了配合 webpack 使用的桥梁,而这里 babel-core babel-preset-env 才是实现 ES6 到 ES5 的核心。

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

module.exports = {
 // ...
 module: {
  // 这里用来配置处理不同后缀文件所使用的loader
  rules: [
   {
    test: /.vue$/,
    loader: &#39;vue-loader&#39;
   },
   {
    test: /.js$/,
    loader: &#39;babel-loader&#39;
   }
  ]
 }
}
ログイン後にコピー

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

{
 "presets": [ "env" ]
}
ログイン後にコピー

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

ERROR in ./src/hello.vue
Module build failed: Error: Cannot find module &#39;vue-template-compiler&#39;
ログイン後にコピー

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

刚开始我不知道官方为什么没有直接告诉用户需要安装这个依赖,通过阅读 vue-loader 才明白其 package.json 文件中是将 vue-template-compilercss-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: &#39;vue-loader&#39;,
    options: {
     loaders: {
      // 这里也可以使用连写方式,但是不利于自定义话参数配置
      // scss: &#39;vue-style-loader!css-loader!sass-loader&#39;
      scss: [
       {
        loader: &#39;vue-style-loader&#39;
       },
       {
        loader: &#39;css-loader&#39;
       },
       {
        loader: &#39;sass-loader&#39;
       }
      ]
     }
    }
   },
   // ...
  ]
 }
}
ログイン後にコピー

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

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

加载全局设置文件

实际开发中,我们在编写 sass 文件时,经常会将全局的 scss 变量提取出来,放到一个单独的文件中,但是这样就有个问题,每个需要用到的组件,都需要手动 @import &#39;./styles/_var.scss&#39; 进来,非常不友好。插件 sass-resources-loader

次に、webpack.config.js 設定を次のように変更します。

npm install sass-resources-loader --save-dev
ログイン後にコピー

Babel 設定の場合、Babel プリセットおよびその他の関連プラグインを設定するために、プロジェクトのルート ディレクトリに .babelrc ファイルを作成する必要もあります。その内容は次のとおりです。次のように:

// ...
{
 test: /.vue$/,
 loader: &#39;vue-loader&#39;,
 options: {
  loaders: {
   scss: [
    {
     loader: &#39;vue-style-loader&#39;
    },
    {
     loader: &#39;css-loader&#39;
    },
    {
     loader: &#39;sass-loader&#39;
    },
    // 看这里,看这里,看这里
    {
     loader: &#39;sass-resources-loader&#39;,
     options: {
      // 这里的resources 属性是个数组,可以放多个想全局引用的文件
      resources: [resolve(&#39;./src/styles/_var.scss&#39;)]
     }
    }
   ]
  }
 }
}
// ...
ログイン後にコピー

しかし、すべてが構成されているにもかかわらず、プロジェクトは依然としてエラーを報告し、次のエラーが報告されます:

<!-- 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>
ログイン後にコピー

公式の指示に従って依存関係をインストールし、正しく構成したことに不満を抱いている人もいます。では、なぜ彼らは依然としてエラーを報告するのでしょうか?エラーが発生した場合は、心配しないでください。まずエラーの内容を読んでください。モジュール 'vue-template-compiler' が見つからないことが原因であることは簡単にわかります。 > は .vue ファイルを処理しています。処理には vue-template-compiler ツールも使用する必要があります。

最初、なぜ公式がこの依存関係をインストールする必要があることをユーザーに直接伝えなかったのか分かりませんでしたが、vue-loader を読んだ後、その package.json ファイルに vue-template-compiler< が含まれていることに気付きました。 /code> と <code>css -loader をpeerDependencyとして指定しますが、peerDependencyはインストール中に自動的にインストールされず(npm@3.0以降)、関連する警告のみが表示されるため、手動でインストールする必要があります。もちろん、.vue ファイル内にある場合 CSS を記述する必要がある場合は、peerDependency 内にある css-loader も使用する必要があります。関連するディスカッション: https://github.com/vuejs/vue-loader/issues/1158

問題がわかったので、直接インストールするだけです:

$green: rgb(41, 209, 41);
$red: rgb(177, 28, 28);
ログイン後にコピー

プロジェクトを再度実行すると、コンテンツがページに表示されます。しかし、ページには表示されません。エラーを報告してください。完了しました~

プリプロセッサの使用

.vue で CSS を書くことを学びました。では、sass プリプロセッサを使用したらどうなるでしょうか?まず、前の記事で説明したモジュールをインストールします: 🎜
import Vue from &#39;vue&#39;;
import hello1 from &#39;./hello1.vue&#39;;
import hello2 from &#39;./hello2.vue&#39;;
new Vue({
 el: "#app",
 template: &#39;<p><hello1/><hello2/></p>&#39;,
 components: {
  hello1,
  hello2
 }
});
ログイン後にコピー
🎜設定には 2 つのステップのみが必要です: 🎜🎜webpack.config.js で vue-loader 設定を変更します 🎜
<!-- hello1.vue -->
<stylelang="scss"scoped>
h1 {
color: $green;
}
</style>
<!-- hello2.vue -->
<stylelang="scss"scoped>
h1 {
color: $red;
}
</style>
ログイン後にコピー
ログイン後にコピー
🎜 .vue ファイルの style タグに lang を追加します="scss" 属性。 🎜🎜設定が完了したら、.vue ファイルに Sass 構文を自由に記述できます。 🎜🎜グローバル設定ファイルをロードする🎜🎜 実際の開発では、sass ファイルを記述するときに、グローバル scss 変数を抽出して別のファイルに配置することがよくありますが、これには問題があり、コンポーネントを手動でインポートする必要があります。 >@import './styles/_var.scss' 、これは非常に不親切です。プラグイン sass-resources-loader は、この問題をうまく解決するのに役立ちます。まずインストールしてください: 🎜
<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 ファイル内の vue-loader 関連の設定を変更します: 🎜
const path = require(&#39;path&#39;);
// 引入相关插件
const ExtractTextPlugin = require(&#39;extract-text-webpack-plugin&#39;);
function resolve(dir){
 return path.resolve(__dirname, dir);
}
module.exports = {
 // 入口文件
 entry: &#39;./src/app.js&#39;,
 // 编译输出文件
 output: {
  path: resolve(&#39;./&#39;),
  filename: &#39;build.js&#39;
 },
 resolve: {
  alias: {
   // 因为我们这里用的是 require 引入方式,所以应该使用vue.common.js/vue.js/vue.min.js
   &#39;vue$&#39;: &#39;vue/dist/vue.common.js&#39;
  }
 },
 devServer: {
  // 这里定义 webpack-dev-server 开启的web服务的根目录
  contentBase: resolve(&#39;./&#39;)
 },
 module: {
  // 这里用来配置处理不同后缀文件所使用的loader
  rules: [
   {
    test: /.vue$/,
    loader: &#39;vue-loader&#39;,
    options: {
     loaders: {
      scss: [
       {
        loader: &#39;vue-style-loader&#39;
       },
       {
        loader: &#39;css-loader&#39;
       },
       {
        loader: &#39;sass-loader&#39;
       },
       {
        loader: &#39;sass-resources-loader&#39;,
        options: {
         resources: [resolve(&#39;./src/styles/_var.scss&#39;)]
        }
       }
      ],
      docs: ExtractTextPlugin.extract(&#39;raw-loader&#39;)
     }
    }
   },
   {
    test: /.js$/,
    loader: &#39;babel-loader&#39;
   }
  ]
 },
 plugins: [
  new ExtractTextPlugin(&#39;docs.md&#39;)
 ]
}
ログイン後にコピー
ログイン後にコピー
🎜設定は完了しました。もう一度テストしてみましょう。 🎜🎜src ディレクトリに hello1.vue と hello2.vue ファイルをそれぞれ作成します:🎜rrreee🎜次に、styles ディレクトリを作成し、グローバル変数を保存する新しいファイル _var.scss を作成します:🎜rrreee🎜次に、app.js で次の 2 つのコンポーネントを参照します: 🎜rrreee🎜 プロジェクトを再実行するだけです。 🎜🎜🎜🎜スコープスタイル🎜🎜🎜🎜単一ファイルコンポーネントは非常に便利な機能を提供します。つまり、スタイルタグがスコープ属性を追加すると、タグ内のスタイルは現在のコンポーネント内の要素にのみ作用します。 。 🎜

接着上面的例子,运行后会发现 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(&#39;path&#39;);
// 引入相关插件
const ExtractTextPlugin = require(&#39;extract-text-webpack-plugin&#39;);
function resolve(dir){
 return path.resolve(__dirname, dir);
}
module.exports = {
 // 入口文件
 entry: &#39;./src/app.js&#39;,
 // 编译输出文件
 output: {
  path: resolve(&#39;./&#39;),
  filename: &#39;build.js&#39;
 },
 resolve: {
  alias: {
   // 因为我们这里用的是 require 引入方式,所以应该使用vue.common.js/vue.js/vue.min.js
   &#39;vue$&#39;: &#39;vue/dist/vue.common.js&#39;
  }
 },
 devServer: {
  // 这里定义 webpack-dev-server 开启的web服务的根目录
  contentBase: resolve(&#39;./&#39;)
 },
 module: {
  // 这里用来配置处理不同后缀文件所使用的loader
  rules: [
   {
    test: /.vue$/,
    loader: &#39;vue-loader&#39;,
    options: {
     loaders: {
      scss: [
       {
        loader: &#39;vue-style-loader&#39;
       },
       {
        loader: &#39;css-loader&#39;
       },
       {
        loader: &#39;sass-loader&#39;
       },
       {
        loader: &#39;sass-resources-loader&#39;,
        options: {
         resources: [resolve(&#39;./src/styles/_var.scss&#39;)]
        }
       }
      ],
      docs: ExtractTextPlugin.extract(&#39;raw-loader&#39;)
     }
    }
   },
   {
    test: /.js$/,
    loader: &#39;babel-loader&#39;
   }
  ]
 },
 plugins: [
  new ExtractTextPlugin(&#39;docs.md&#39;)
 ]
}
ログイン後にコピー
ログイン後にコピー

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

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

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

相关文章:

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

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

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

以上がVuejs 単一ファイル コンポーネント (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート