Vue.js - Day5 - Webpack

在網頁中會引用哪些常見的靜態資源？

• JS

• .js .jsx .coffee .ts（TypeScript 類 C# 語言）

• CSS

• .css .less .sass .scss

• Images

• .jpg .png .gif .bmp .svg

• 字體文件（Fonts）

• .svg .ttf .eot .woff .woff2

• 模板文件

• .ejs .jade .vue【這是在webpack中定義組件的方式，推薦這么用】

網頁中引入的靜態資源多了以后有什么問題？？？

1. 網頁加載速度慢， 因為 我們要發起很多的二次請求；
2. 要處理錯綜復雜的依賴關系

如何解決上述兩個問題

1. 合并、壓縮、精靈圖、圖片的Base64編碼
2. 可以使用之前學過的requireJS、也可以使用webpack可以解決各個包之間的復雜依賴關系；

什么是webpack?

webpack 是前端的一個項目構建工具，它是基于 Node.js 開發出來的一個前端工具；

如何完美實現上述的2種解決方案

1. 使用Gulp， 是基于 task 任務的；
2. 使用Webpack， 是基于整個項目進行構建的；

• 借助于webpack這個前端自動化構建工具，可以完美實現資源的合并、打包、壓縮、混淆等諸多功能。
• 根據官網的圖片介紹webpack打包的過程
• webpack官網

webpack安裝的兩種方式

1. 運行npm i webpack -g全局安裝webpack，這樣就能在全局使用webpack的命令
2. 在項目根目錄中運行npm i webpack --save-dev安裝到項目依賴中

初步使用webpack打包構建列表隔行變色案例

1. 運行npm init初始化項目，使用npm管理項目中的依賴包
2. 創建項目基本的目錄結構
3. 使用cnpm i jquery --save安裝jquery類庫
4. 創建main.js并書寫各行變色的代碼邏輯：

    // 導入jquery類庫
    import $ from 'jquery'

    // 設置偶數行背景色，索引從0開始，0是偶數
    $('#list li:even').css('backgroundColor','lightblue');
    // 設置奇數行背景色
    $('#list li:odd').css('backgroundColor','pink');

5. 直接在頁面上引用main.js會報錯，因為瀏覽器不認識import這種高級的JS語法，需要使用webpack進行處理，webpack默認會把這種高級的語法轉換為低級的瀏覽器能識別的語法；
6. 運行webpack 入口文件路徑 輸出文件路徑對main.js進行處理：

webpack src/js/main.js dist/bundle.js

使用webpack的配置文件簡化打包時候的命令

1. 在項目根目錄中創建webpack.config.js
2. 由于運行webpack命令的時候，webpack需要指定入口文件和輸出文件的路徑，所以，我們需要在webpack.config.js中配置這兩個路徑：

    // 導入處理路徑的模塊
    var path = require('path');

    // 導出一個配置對象，將來webpack在啟動的時候，會默認來查找webpack.config.js，并讀取這個文件中導出的配置對象，來進行打包處理
    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件
        output: { // 配置輸出選項
            path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
            filename: 'bundle.js' // 配置輸出的文件名
        }
    }

實現webpack的實時打包構建

1. 由于每次重新修改代碼之后，都需要手動運行webpack打包的命令，比較麻煩，所以使用webpack-dev-server來實現代碼實時打包編譯，當修改代碼之后，會自動進行打包構建。
2. 運行cnpm i webpack-dev-server --save-dev安裝到開發依賴
3. 安裝完成之后，在命令行直接運行webpack-dev-server來進行打包，發現報錯，此時需要借助于package.json文件中的指令，來進行運行webpack-dev-server命令，在scripts節點下新增"dev": "webpack-dev-server"指令，發現可以進行實時打包，但是dist目錄下并沒有生成bundle.js文件，這是因為webpack-dev-server將打包好的文件放在了內存中

• 把bundle.js放在內存中的好處是：由于需要實時打包編譯，所以放在內存中速度會非常快
• 這個時候訪問webpack-dev-server啟動的http://localhost:8080/網站，發現是一個文件夾的面板，需要點擊到src目錄下，才能打開我們的index首頁，此時引用不到bundle.js文件，需要修改index.html中script的src屬性為:<script src="../bundle.js"></script>
• 為了能在訪問http://localhost:8080/的時候直接訪問到index首頁，可以使用--contentBase src指令來修改dev指令，指定啟動的根目錄：

"dev": "webpack-dev-server --contentBase src"

同時修改index頁面中script的src屬性為<script src="bundle.js"></script>

使用html-webpack-plugin插件配置啟動頁面

由于使用--contentBase指令的過程比較繁瑣，需要指定啟動的目錄，同時還需要修改index.html中script標簽的src屬性，所以推薦大家使用html-webpack-plugin插件配置啟動頁面.

1. 運行cnpm i html-webpack-plugin --save-dev安裝到開發依賴
2. 修改webpack.config.js配置文件如下：

    // 導入處理路徑的模塊
    var path = require('path');
    // 導入自動生成HTMl文件的插件
    var htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件
        output: { // 配置輸出選項
            path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
            filename: 'bundle.js' // 配置輸出的文件名
        },
        plugins:[ // 添加plugins節點配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/index.html'),//模板路徑
                filename:'index.html'//自動生成的HTML文件的名稱
            })
        ]
    }

3. 修改package.json中script節點中的dev指令如下：

"dev": "webpack-dev-server"

4. 將index.html中script標簽注釋掉，因為html-webpack-plugin插件會自動把bundle.js注入到index.html頁面中！

實現自動打開瀏覽器、熱更新和配置瀏覽器的默認端口號

注意：熱更新在JS中表現的不明顯，可以從一會兒要講到的CSS身上進行介紹說明！

方式1：

• 修改package.json的script節點如下，其中--open表示自動打開瀏覽器，--port 4321表示打開的端口號為4321，--hot表示啟用瀏覽器熱更新：

"dev": "webpack-dev-server --hot --port 4321 --open"

方式2：

1. 修改webpack.config.js文件，新增devServer節點如下：

devServer:{
        hot:true,
        open:true,
        port:4321
    }

2. 在頭部引入webpack模塊：

var webpack = require('webpack');

3. 在plugins節點下新增：

new webpack.HotModuleReplacementPlugin()

使用webpack打包css文件

1. 運行cnpm i style-loader css-loader --save-dev
2. 修改webpack.config.js這個配置文件：

module: { // 用來配置第三方loader模塊的
        rules: [ // 文件的匹配規則
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//處理css文件的規則
        ]
    }

3. 注意：use表示使用哪些模塊來處理test所匹配到的文件；use中相關loader模塊的調用順序是從后向前調用的；

使用webpack打包less文件

1. 運行cnpm i less-loader less -D
2. 修改webpack.config.js這個配置文件：

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

使用webpack打包sass文件

1. 運行cnpm i sass-loader node-sass --save-dev
2. 在webpack.config.js中添加處理sass文件的loader模塊：

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

使用webpack處理css中的路徑

1. 運行cnpm i url-loader file-loader --save-dev
2. 在webpack.config.js中添加處理url路徑的loader模塊：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }

3. 可以通過limit指定進行base64編碼的圖片大小；只有小于指定字節（byte）的圖片才會進行base64編碼：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

使用babel處理高級JS語法

1. 運行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安裝babel的相關loader包
2. 運行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安裝babel轉換的語法
3. 在webpack.config.js中添加相關loader模塊，其中需要注意的是，一定要把node_modules文件夾添加到排除項：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

4. 在項目根目錄中添加.babelrc文件，并修改這個配置文件如下：

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

5. 注意：語法插件babel-preset-es2015可以更新為babel-preset-env，它包含了所有的ES相關的語法；

相關文章

babel-preset-env：你需要的唯一Babel插件
Runtime transform 運行時編譯es6

Vue.js - day6

注意：

有時候使用npm i node-sass -D裝不上，這時候，就必須使用 cnpm i node-sass -D

在普通頁面中使用render函數渲染組件

在webpack中配置.vue組件頁面的解析

1. 運行cnpm i vue -S將vue安裝為運行依賴；

2. 運行cnpm i vue-loader vue-template-compiler -D將解析轉換vue的包安裝為開發依賴；

3. 運行cnpm i style-loader css-loader -D將解析轉換CSS的包安裝為開發依賴，因為.vue文件中會寫CSS樣式；

4. 在webpack.config.js中，添加如下module規則：

module: {

    rules: [

      { test: /\.css$/, use: ['style-loader', 'css-loader'] },

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

    ]

  }

5. 創建App.js組件頁面：

    <template>

      <!-- 注意：在 .vue 的組件中，template 中必須有且只有唯一的根元素進行包裹，一般都用 div 當作唯一的根元素 -->

      <div>

        <h1>這是APP組件 - {{msg}}</h1>

        <h3>我是h3</h3>

      </div>

    </template>



    <script>

    // 注意：在 .vue 的組件中，通過 script 標簽來定義組件的行為，需要使用 ES6 中提供的 export default 方式，導出一個vue實例對象

    export default {

      data() {

        return {

          msg: 'OK'

        }

      }

    }

    </script>



    <style scoped>

    h1 {

      color: red;

    }

    </style>

6. 創建main.js入口文件：

    // 導入 Vue 組件

    import Vue from 'vue'



    // 導入 App組件

    import App from './components/App.vue'



    // 創建一個 Vue 實例，使用 render 函數，渲染指定的組件

    var vm = new Vue({

      el: '#app',

      render: c => c(App)

    });

在使用webpack構建的Vue項目中使用模板對象？

1. 在webpack.config.js中添加resolve屬性：

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

ES6中語法使用總結

1. 使用 export default 和 export 導出模塊中的成員; 對應ES5中的 module.exports 和 export

2. 使用 import ** from ** 和 import '路徑' 還有 import {a, b} from '模塊標識' 導入其他模塊

3. 使用箭頭函數：(a, b)=> { return a-b; }

在vue組件頁面中，集成vue-router路由模塊

vue-router官網

1. 導入路由模塊：

import VueRouter from 'vue-router'

2. 安裝路由模塊：

Vue.use(VueRouter);

3. 導入需要展示的組件:

import login from './components/account/login.vue'

import register from './components/account/register.vue'

4. 創建路由對象:

var router = new VueRouter({

  routes: [

    { path: '/', redirect: '/login' },

    { path: '/login', component: login },

    { path: '/register', component: register }

  ]

});

5. 將路由對象，掛載到 Vue 實例上:

var vm = new Vue({

  el: '#app',

  // render: c => { return c(App) }

  render(c) {

    return c(App);

  },

  router // 將路由對象，掛載到 Vue 實例上

});

6. 改造App.vue組件，在 template 中，添加router-link和router-view：

    <router-link to="/login">登錄</router-link>

    <router-link to="/register">注冊</router-link>



    <router-view></router-view>

組件中的css作用域問題

抽離路由為單獨的模塊

使用 餓了么的 MintUI 組件

Github 倉儲地址

Mint-UI官方文檔

1. 導入所有MintUI組件：

import MintUI from 'mint-ui'

2. 導入樣式表：

import 'mint-ui/lib/style.css'

3. 在 vue 中使用 MintUI：

Vue.use(MintUI)

4. 使用的例子：

<mt-button type="primary" size="large">primary</mt-button>

使用 MUI 組件

官網首頁

文檔地址

1. 導入 MUI 的樣式表：

import '../lib/mui/css/mui.min.css'

2. 在webpack.config.js中添加新的loader規則：

{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }

3. 根據官方提供的文檔和example，嘗試使用相關的組件

將項目源碼托管到oschina中

1. 點擊頭像 -> 修改資料 -> SSH公鑰 如何生成SSH公鑰

2. 創建自己的空倉儲，使用 git config --global user.name "用戶名" 和 git config --global user.email ***@**.com 來全局配置提交時用戶的名稱和郵箱

3. 使用 git init 在本地初始化項目

4. 使用 touch README.md 和 touch .gitignore 來創建項目的說明文件和忽略文件；

5. 使用 git add . 將所有文件托管到 git 中

6. 使用 git commit -m "init project" 將項目進行本地提交

7. 使用 git remote add origin 倉儲地址將本地項目和遠程倉儲連接，并使用origin最為遠程倉儲的別名

8. 使用 git push -u origin master 將本地代碼push到倉儲中

App.vue 組件的基本設置

1. 頭部的固定導航欄使用 Mint-UI 的 Header 組件；

2. 底部的頁簽使用 mui 的 tabbar;

3. 購物車的圖標，使用 icons-extra 中的 mui-icon-extra mui-icon-extra-cart，同時，應該把其依賴的字體圖標文件 mui-icons-extra.ttf，復制到 fonts 目錄下！

4. 將底部的頁簽，改造成 router-link 來實現單頁面的切換；

5. Tab Bar 路由激活時候設置高亮的兩種方式：

• 全局設置樣式如下：

   .router-link-active{

       color:#007aff !important;

   }

• 或者在 new VueRouter 的時候，通過 linkActiveClass 來指定高亮的類：

   // 創建路由對象

   var router = new VueRouter({

     routes: [

       { path: '/', redirect: '/home' }

     ],

     linkActiveClass: 'mui-active'

   });

實現 tabbar 頁簽不同組件頁面的切換

1. 將 tabbar 改造成 router-link 形式，并指定每個連接的 to 屬性；

2. 在入口文件中導入需要展示的組件，并創建路由對象：

    // 導入需要展示的組件

    import Home from './components/home/home.vue'

    import Member from './components/member/member.vue'

    import Shopcar from './components/shopcar/shopcar.vue'

    import Search from './components/search/search.vue'



    // 創建路由對象

    var router = new VueRouter({

      routes: [

        { path: '/', redirect: '/home' },

        { path: '/home', component: Home },

        { path: '/member', component: Member },

        { path: '/shopcar', component: Shopcar },

        { path: '/search', component: Search }

      ],

      linkActiveClass: 'mui-active'

    });

使用 mt-swipe 輪播圖組件

1. 假數據：

lunbo: [

        'http://www.itcast.cn/images/slidead/BEIJING/2017440109442800.jpg',

        'http://www.itcast.cn/images/slidead/BEIJING/2017511009514700.jpg',

        'http://www.itcast.cn/images/slidead/BEIJING/2017421414422600.jpg'

      ]

2. 引入輪播圖組件：

<!-- Mint-UI 輪播圖組件 -->

    <div class="home-swipe">

      <mt-swipe :auto="4000">

        <mt-swipe-item v-for="(item, i) in lunbo" :key="i">

          <img :src="item" alt="">

        </mt-swipe-item>

      </mt-swipe>

    </div>

  </div>

在.vue組件中使用vue-resource獲取數據

1. 運行cnpm i vue-resource -S安裝模塊

2. 導入 vue-resource 組件

import VueResource from 'vue-resource'

3. 在vue中使用 vue-resource 組件

Vue.use(VueResource);