Vue(day6)

1、webpack中經常使用的文件loader & 插件

因爲版本存在變更，如下安裝和配置都有可能發生變化，請以官方文檔爲準。

一、html-webpack-plugin插件

html-webpack-plugin是在內存中生成html模板的插件plugin

首先安裝插件npm install html-webpack-plugin -D，而後在配置文件webpack.config.js中進行插件配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
//....
plugins: [
    //注意：模板地址未找到會報錯
    new htmlWebpackTemplate({
        template: path.join(__dirname, "/src/index.html"),
        filename: 'index.html'
    })
]

二、css的loader：style-loader&css-loader

一樣的先安裝loader模塊：

npm install style-loader css-loader -D

而後在配置文件中進行模塊向配置：

module: {
    rules: [
        {test: /\.css$/, use: ['style-loader', 'css-loader']},//注意順序不能錯，從後往前調用
    ]
}

三、less loader:less-loader；scss loader：sass-loader

同時同樣的配置方法。相似的非js文件都須要咱們手動去配置對應的文件加載loader。

４、url loader：url-loadr&file-loader

有時候咱們須要在css中引用圖片等文件做爲背景，這個時候涉及到url的解析，以及文件的加載，因此須要url和file的loader。

安裝後基本配置：

//file-loader是url-loader的內部依賴，因此配置url-loader便可。
{test: /\.(jpg|png|bmp|jpeg|gif)$/, use: 'url-loader'}

注意：

• 加載資源時默認加載爲base64字節形式，但能夠在配置中進行限制：

  {test: /\.(jpg|png|bmp|jpeg|gif)$/, use: 'url-loader?limit=2048name=[name].[ext]'}
  //使用limit參數來限制字節數，大於或等於limit值時不轉爲base64字符。
  //name參數是保留文件名和後綴。可是這樣在引入不一樣目錄的同名文件時先引入的文件會被覆蓋。
  //能夠設置hash值進行區別：url-loader?limit=2048&name=[hash:8][name].[ext]

• 使用字體圖標時一樣須要使用url-loader：

  好比咱們使用bootstrap中的字體圖標（注意安裝的時候請安裝3.x.x的版本，4的版本不帶字體圖標）。

  咱們能夠直接在index.js中使用，首先引用css文件，而後再隨便使用一個字體圖標便可看到效果。

  字體loader配置：

  {test: /\.(ttf|svg|eot|woff|woff2)$/, use: 'url-loader'}

  咱們能夠在頁面中這樣使用：

  <!--引入css-->
  <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
  
  <!--使用字體圖標-->
  <span class="glyphicon glyphicon-music" aria-hidden="true"></span>

  既然咱們使用了webpack，就不推薦這樣直接在頁面引入的形式，咱們應該在入口文件main.css中引入這個bootstrap.css文件，像這樣：

  //注意：對於導入node_modules下面的文件可省略前面的路徑
  import 'bootstrap/dist/css/bootstrap.min.css';

五、babel模塊的使用

有時候咱們但願使用最新es6語法進行項目開發，可是webpack可能尚未最好支持的時候，咱們就能夠安裝配置babel相關的模塊進行js文件的解析加載。

若是在webpack中某些es6或es7的高級語法號沒法直接使用時，還須要使用一些loader來處理這些高級語法。

• 安裝須要的模塊：

npm install babel-core babel-loader babel-plugin-transform-runtime -D
npm install babel-preset-env babel-preset-stage-0 -D

說明：babel-preset-env，babel-preset-stage-0爲babel須要的語法模塊；另外的爲須要的語法轉換器模塊。

• 而後進行配置：

{test: /\.js$/, use: 'babel-loader', exclude:/node_modules/}
//配置 babel 規則時必須把 node_modules 目錄排除，若是不排除會把目錄下的js文件都打包，這樣會很是消耗cpu。

• .babelrc配置文件

在項目根目錄新建.babelrc配置文件，必須符合json格式規範。(不能註釋；字符串必須使用雙引號等)

配置項：

{
    "presets": ["env", "stage-0"],
    "plugins": ["transform-runtime"]
}

注意不須要插件或語法的前綴。

更多細節請參考：https://webpack.docschina.org/loaders/babel-loader/#src/components/Sidebar/Sidebar.jsx

2、在webpack中使用vue

在使用以前咱們先安裝Vue:

npm install vue -D

一、組件的使用：使用模板形式

先回顧一下組件的使用：

//建立一個組件模板
var buttonCounter = {
    data: function(){
        return {
            count: 0,
        }
    },
    template: '<a @click="++count">you click me {{count}} times!</a>'
}
//全局註冊
Vue.component('button-counter', buttonCounter);
//局部註冊
new Vue({
    el: '#app',
    components:{
        'button-counter': buttonCounter,
    }
});

<!--組件接口-->
<button-counter></button-counter>

咱們先嚐試直接拿到webpack環境下使用看看可否直接使用：

//導入vue模塊
import Vue from 'vue';

//建立一個組件模板
var buttonCounter = {
    data: function(){
        return {
            count: 0,
        }
    },
    template: '<button @click="++count">you click me {{count}} times!</button>'
}

//註冊到Vue實例中
new Vue({
    el: '#app',
    components:{
        'button-counter': buttonCounter,
    }
});

訪問頁面發現運行報錯：

vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

報錯的緣由是vue在node中引用的這個js文件是runtime-only運行時環境包，功能並無原來頁面中所引用的全面，這個包沒法直接渲染組件到頁面中。

咱們能夠手動更改引入的包：

import Vue from 'vue/dist/vue.js'

這樣再運行就不會報錯了。

二、組件的使用：使用函數渲染形式

除了使用component掛在的方式，還可使用render函數進行渲染，可是二者渲染有所區別：

new Vue({
    el: '#app',
    render: function(createElement){
        return createElement(html)
    }
});

三、單文件組件的使用

既然Vue默認使用了運行時環境的包，就是但願咱們使用這個包進行開發而不是手動去引用完整包。

運行時的模塊沒法直接渲染，可是可使用render函數配合單文件組件來使用。

注意，render函數會將實例的已有內容清空再渲染，因此若是使用了render函數進行頁面渲染，實例根元素內部的元素都沒有必要再書寫了。

可是若是咱們的實例內部元素都寫在組件註冊中，無疑太冗雜，因此咱們須要使用單文件組件進行開發。

文件擴展名爲 .vue 的 single-file components(單文件組件) 解決了Vue.component定義組件存在的相關侷限，而且還可使用 webpack 或 Browserify 等構建工具，也更符合模塊式編程的思想。

因爲引用的爲.vue格式的文件，天然須要安裝配置相應的loader：

npm install vue-loader vue-template-compiler -D

{test: /\.vue$/, use: 'vue-loader'}

此外，還須要確保在你的 webpack 配置中添加 Vue Loader 的插件（必須）：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

//...
plugins: [
    new VueLoaderPlugin()
]

這樣，咱們就能夠直接把.vue格式的文件引入做爲render的模板文件。

書寫一個相似這樣的單文件組件：由三部分組成，

<template>
  <div class="example">
    {{msg}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

能夠發現， 單文件組件比普通的組件註冊多了css控制。

參考地址：

單文件組件規範

Vue-loader

四、export 和 export default的區別

值得注意的是，module.exports導出模塊接口的方法是Node提供的，符合commonJS規範，導入模塊時使用的是require()方法。

而es6對於模塊的兩個關鍵字，import和export，一樣可使用require關鍵字進行模塊的導入。

[總結一下]

require: node 和 es6 都支持的引入
export / import : 只有es6 支持的導出引入
module.exports / exports: 只有 node 支持的導出

參考：

http://www.javashuo.com/article/p-zizjvavv-t.html

http://www.javashuo.com/article/p-bupuxjan-dk.html

五、結合使用vue-router，子路由和抽離路由

• 複習Vue-Router的使用

  使用以前記得安裝：

  npm install vue-router -D

  js代碼：

  import VueRouter from 'vue-router';
  
  //一、建立路由視圖組件
  var home = {template: '<h3>This is home page!</h3>'};
  var about = {template: '<h3>This is about page!</h3>'};
  //二、建立路由規則
  var routes = [
      {path: '/home', component: home},
      {path: '/about', component: about}
  ];
  //三、建立一個路由實例
  var router  = new VueRouter({
      routes: routes
  });
  //四、將路由搭載到Vue實例中
  new Vue({
      el: '#app',
      router: router
  });

• 在webpack中使用：

  須要注意兩個區別，咱們須要手動掛載到Vue上，使用use方法：

  Vue.use(VueRouter)//手動掛載路由

  還有就是路由的視圖組件不能直接這樣寫，須要使用單文件組件來定義視圖組件，不然回報runtime-only...錯誤。

六、Vue 中style的lang屬性 和 scoped屬性

lang屬性能夠指定樣式使用的語言，好比less，scss等。

scoped屬性存在時style的做用域就只在當前組件，不然爲全局樣式。