首頁  >  文章  >  web前端  >  Vuejs 單一檔案元件(詳細教學)

Vuejs 單一檔案元件(詳細教學)

亚连
亚连原創
2018-06-06 17:02:231893瀏覽

這篇文章主要介紹了Vuejs 單一檔案元件實例詳解,需要的朋友可以參考下

在先前的實例中,我們都是透過Vue.component 或components 屬性的方式來定義元件,這種方式在許多中小規模的專案中還好,但在複雜的專案中,下面這些缺點就非常明顯了:

字串範本:缺乏高亮,書寫麻煩,特別是HTML 多行的時候,雖然可以將模板寫在html 檔案中,但是侵入性太強,不利於元件解耦分離。

不支援CSS:表示當HTML 和JavaScript 元件化時,CSS明顯被遺漏了

沒有建置步驟:限制只能使用HTML 和ES5 JavaScript,而不能使用預處理器。

Vuejs 提供的副檔名為 .vue 的 單一檔案元件 為以上所有問題提供了解決方案。

初識單檔案元件

還是利用工欲善其事必先利其器中的原始碼,在src 目錄下創建hello.vue 文件,內容如下:

<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 語法,此時就需要用到相應的語法轉換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: &#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;
       }
      ]
     }
    }
   },
   // ...
  ]
 }
}

<pre class="brush:php;toolbar:false;">npm install sass-resources-loader --save-dev</pre>#修改webpack. vue 檔案中的style 標籤,新增

lang="scss"

屬性。

配置完後,就可以再 .vue 檔案中,愉快地寫 sass 語法了。

載入全域設定檔實際開發中,我們在編寫sass 檔案時,經常會將全域的scss 變數提取出來,放到一個單獨的檔案中,但是這樣就有個問題,每個需要使用的組件,都需要手動@import './styles/_var.scss' 進來,非常不友善。外掛程式

sass-resources-loader

就很好地幫我們解決這個問題,先安裝一下:

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

然後修改webpack.config.js 檔案中vue-loader 相關設定:

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

設定就完成了,我們再來測試下。

在src 目錄下分別建立hello1.vue 和hello2.vue 檔案:

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

然後建立一個styles 目錄,並在其中新存放全域變數的檔案_var.scss :

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
 }
});

接下來,在app.js 中引用兩個元件:

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

重新運行專案就可以了。 有作用域的style

###單一檔案元件中為我們提供了一個非常便利的功能,就是當style 標籤加入scoped 屬性時,標籤內的樣式將只作用於目前元件中的元素。 ###

接着上面的例子,运行后会发现 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn