Web前端學習筆記——Webpack結合VueJS使用、Mint-UI、MUI
阿新 • • 發佈：2019-01-22
注意：
有時候使用npm i node-sass -D裝不上，這時候，就必須使用 cnpm i node-sass -D
在普通頁面中使用render函式渲染元件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" 在webpack中配置.vue元件頁面的解析
-
執行
cnpm i vue -S將vue安裝為執行依賴； -
執行
cnpm i vue-loader vue-template-compiler -D將解析轉換vue的包安裝為開發依賴； -
執行
cnpm i style-loader css-loader -D將解析轉換CSS的包安裝為開發依賴，因為.vue檔案中會寫CSS樣式； -
在
webpack.config.js中，新增如下module規則：
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.vue$/, use: 'vue-loader' }
]
}
// 由於 webpack 是基於Node進行構建的，所有，webpack的配置檔案中，任何合法的Node程式碼都是支援的
var path = require('path')
// 在記憶體中，根據指定的模板頁面，生成一份記憶體中的首頁，同時自動把打包好的bundle注入到頁面底部
// 如果要配置外掛，需要在匯出的物件中，掛載一個 plugins 節點
var htmlWebpackPlugin = require('html-webpack-plugin')
// 當以命令列形式執行 webpack 或 webpack-dev-server 的時候，工具會發現，我們並沒有提供 要打包 的檔案的 入口 和 出口檔案，此時，他會檢查專案根目錄中的配置檔案，並讀取這個檔案，就拿到了匯出的這個 配置物件，然後根據這個物件，進行打包構建
module.exports = {
entry: path.join(__dirname, './src/main.js'), // 入口檔案
output: { // 指定輸出選項
path: path.join(__dirname, './dist'), // 輸出路徑
filename: 'bundle.js' // 指定輸出檔案的名稱
},
plugins: [ // 所有webpack 外掛的配置節點
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'), // 指定模板檔案路徑
filename: 'index.html' // 設定生成的記憶體頁面的名稱
})
],
module: { // 配置所有第三方loader 模組的
rules: [ // 第三方模組的匹配規則
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 處理 CSS 檔案的 loader
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 處理 less 檔案的 loader
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 處理 scss 檔案的 loader
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 處理 圖片路徑的 loader
// limit 給定的值，是圖片的大小，單位是 byte， 如果我們引用的 圖片，大於或等於給定的 limit值，則不會被轉為base64格式的字串， 如果 圖片小於給定的 limit 值，則會被轉為 base64的字串
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 處理 字型檔案的 loader
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 來轉換高階的ES語法
{ test: /\.vue$/, use: 'vue-loader' } // 處理 .vue 檔案的 loader
]
},
resolve: {
alias: { // 修改 Vue 被匯入時候的包的路徑
// "vue$": "vue/dist/vue.js"
}
}
}
- 建立
login.vue元件頁面：
<template>
<div>
<h1>這是登入元件，使用 .vue 檔案定義出來的 --- {{msg}}</h1>
</div>
</template>
<script>
export default {
data() {
// 注意：元件中的 data 必須是 function
return {
msg: "123"
};
},
methods: {
show() {
console.log("呼叫了 login.vue 中的 show 方法");
}
}
};
</script>
<style>
</style>
- 建立
main.js入口檔案：
// 如何在 webpack 構建的專案中，使用 Vue 進行開發
// 複習 在普通網頁中如何使用vue：
// 1. 使用 script 標籤 ，引入 vue 的包
// 2. 在 index 頁面中，建立 一個 id 為 app div 容器
// 3. 通過 new Vue 得到一個 vm 的例項
// 在webpack 中嘗試使用 Vue：
// 注意： 在 webpack 中， 使用 import Vue from 'vue' 匯入的 Vue 建構函式，功能不完整，只提供了 runtime-only 的方式，並沒有提供 像網頁中那樣的使用方式；
import Vue from 'vue'
// import Vue from '../node_modules/vue/dist/vue.js'
// 回顧 包的查詢規則：
// 1. 找 專案根目錄中有沒有 node_modules 的資料夾
// 2. 在 node_modules 中 根據包名，找對應的 vue 資料夾
// 3. 在 vue 資料夾中，找 一個叫做 package.json 的包配置檔案
// 4. 在 package.json 檔案中，查詢 一個 main 屬性【main屬性指定了這個包在被載入時候，的入口檔案】
// var login = {
// template: '<h1>這是login元件，是使用網頁中形式創建出來的元件</h1>'
// }
// 1. 匯入 login 元件
import login from './login.vue'
// 預設，webpack 無法打包 .vue 檔案，需要安裝 相關的loader：
// cnpm i vue-loader vue-template-compiler -D
// 在配置檔案中，新增loader哦配置項 { test:/\.vue$/, use: 'vue-loader' }
var vm = new Vue({
el: '#app',
data: {
msg: '123'
},
// components: {
// login
// }
/* render: function (createElements) { // 在 webpack 中，如果想要通過 vue， 把一個元件放到頁面中去展示，vm 例項中的 render 函式可以實現
return createElements(login)
} */
render: c => c(login)
})
// 總結梳理： webpack 中如何使用 vue :
// 1. 安裝vue的包： cnpm i vue -S
// 2. 由於 在 webpack 中，推薦使用 .vue 這個元件模板檔案定義元件，所以，需要安裝 能解析這種檔案的 loader cnpm i vue-loader vue-template-complier -D
// 3. 在 main.js 中，匯入 vue 模組 import Vue from 'vue'
// 4. 定義一個 .vue 結尾的元件，其中，元件有三部分組成： template script style
// 5. 使用 import login from './login.vue' 匯入這個元件
// 6. 建立 vm 的例項 var vm = new Vue({ el: '#app', render: c => c(login) })
// 7. 在頁面中建立一個 id 為 app 的 div 元素，作為我們 vm 例項要控制的區域；
在使用webpack構建的Vue專案中使用模板物件？
- 在
webpack.config.js中新增resolve屬性：
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
ES6中語法使用總結
-
使用
export default和export匯出模組中的成員; 對應ES5中的module.exports和export -
使用
import ** from **和import '路徑'還有import {a, b} from '模組標識'匯入其他模組 -
使用箭頭函式：
(a, b)=> { return a-b; }
在vue元件頁面中，整合vue-router路由模組
- 匯入路由模組：
import VueRouter from 'vue-router'
- 安裝路由模組：
Vue.use(VueRouter);
- 匯入需要展示的元件:
import login from './components/account/login.vue'
import register from './components/account/register.vue'
- 建立路由物件:
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
]
});
- 將路由物件，掛載到 Vue 例項上:
var vm = new Vue({
el: '#app',
// render: c => { return c(App) }
render(c) {
return c(App);
},
router // 將路由物件，掛載到 Vue 例項上
});
- 改造App.vue元件，在 template 中，新增
router-link和router-view：
<router-link to="/login">登入</router-link>
<router-link to="/register">註冊</router-link>
<router-view></router-view>
元件中的css作用域問題
抽離路由為單獨的模組
- main.js
import Vue from 'vue'
// 1. 匯入 vue-router 包
import VueRouter from 'vue-router'
// 2. 手動安裝 VueRouter
Vue.use(VueRouter)
// 匯入 app 元件
import app from './App.vue'
// 匯入 自定義路由模組
import router from './router.js'
var vm = new Vue({
el: '#app',
render: c => c(app), // render 會把 el 指定的容器中，所有的內容都清空覆蓋，所以 不要 把 路由的 router-view 和 router-link 直接寫到 el 所控制的元素中
router // 4. 將路由物件掛載到 vm 上
})
// 注意： App 這個元件，是通過 VM 例項的 render 函式，渲染出來的， render 函式如果要渲染 元件， 渲染出來的元件，只能放到 el: '#app' 所指定的 元素中；
// Account 和 GoodsList 元件， 是通過 路由匹配監聽到的，所以， 這兩個元件，只能展示到 屬於 路由的 <router-view></router-view> 中去；
- router.js
import VueRouter from 'vue-router'
// 匯入 Account 元件
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'
// 匯入Account的兩個子元件
import login from './subcom/login.vue'
import register from './subcom/register.vue'
// 3. 建立路由物件
var router = new VueRouter({
routes: [
// account goodslist
{
path: '/account',
component: account,
children: [
{ path: 'login', component: login },
{ path: 'register', component: register }
]
},
{ path: '/goodslist', component: goodslist }
]
})
// 把路由物件暴露出去
export default router
- App.vue
<template>
<div>
<h1>這是 App 元件</h1>
<router-link to="/account">Account</router-link>
<router-link to="/goodslist">Goodslist</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
- login.vue
<template>
<div>
<h3>這是Account的登入子元件</h3>
</div>
</template>
<script>
</script>
<style scoped>
div {
color: red;
}
</style>
使用 餓了麼的 MintUI 元件
- 匯入所有MintUI元件：
import MintUI from 'mint-ui'
- 匯入樣式表：
import 'mint-ui/lib/style.css'
- 在 vue 中使用 MintUI中的Button按鈕和Toast彈框提示：
Vue.use(MintUI)
- 使用的例子：
<mt-button type="primary" size="large">primary</mt-button>
Mint-UI中按需匯入的配置方式
- main.js
import Vue from 'vue'
// 1. 匯入 vue-router 包
import VueRouter from 'vue-router'
// 2. 手動安裝 VueRouter
Vue.use(VueRouter)
// 匯入bootstrap樣式
import 'bootstrap/dist/css/bootstrap.css'
import './css/app.css'
// 匯入 MUI 的樣式表， 和 Bootstrap 用法沒有差別
import './lib/mui/css/mui.min.css'
// 匯入所有的 MIntUI 元件
// 匯入 Mint-UI
// import MintUI from 'mint-ui' //把所有的元件都匯入進來
// // 這裡 可以省略 node_modules 這一層目錄
// import 'mint-ui/lib/style.css'
// // 將 MintUI 安裝到 Vue 中
// Vue.use(MintUI) // 把所有的元件，註冊為全域性的元件
// 按需匯入 Mint-UI元件
import { Button } from 'mint-ui'
// 使用 Vue.component 註冊 按鈕元件
Vue.component(Button.name, Button)
// console.log(Button.name)
// 匯入 app 元件
import app from './App.vue'
// 匯入 自定義路由模組
import router from './router.js'
var vm = new Vue({
el: '#app',
render: c => c(app), // render 會把 el 指定的容器中，所有的內容都清空覆蓋，所以 不要 把 路由的 router-view 和 router-link 直接寫到 el 所控制的元素中
router // 4. 將路由物件掛載到 vm 上
})
// 注意： App 這個元件，是通過 VM 例項的 render 函式，渲染出來的， render 函式如果要渲染 元件， 渲染出來的元件，只能放到 el: '#app' 所指定的 元素中；
// Account 和 GoodsList 元件， 是通過 路由匹配監聽到的，所以， 這兩個元件，只能展示到 屬於 路由的 <router-view></router-view> 中去；
- App.vue
<template>
<div>
<h1>這是 App 元件</h1>
<!-- 為什麼這裡叫做 mt-button 的 button 直接就能用 -->
<mt-button type="danger" icon="more" @click="show">default</mt-button>
<mt-button type="danger" size="large" plain>default</mt-button>
<mt-button type="danger" size="small" disabled>default</mt-button>
<button type="button" class="mui-btn mui-btn-royal">
紫色
</button>
<!-- <mybtn type="primary">12345</mybtn> -->
<router-link to="/account">Account</router-link>
<router-link to="/goodslist">Goodslist</router-link>
<router-view></router-view>
</div>
</template>
<script>
// 按需匯入 Toast 元件
import { Toast } from "mint-ui";
export default {
data() {
return {
toastInstanse: null
};
},
created() {
this.getList();
},
methods: {
getList() {
// 模擬獲取列表的 一個 AJax 方法
// 在獲取資料之前，立即 彈出 Toast 提示使用者，正在載入資料
this.show();
setTimeout(() => {
// 當 3 秒過後，資料獲取回來了，要把 Toast 移除
this.toastInstanse.close();
}, 3000);
},
show() {
// Toast("提示資訊");
this.toastInstanse = Toast({
message: "這是訊息",
duration: -1, // 如果是 -1 則彈出之後不消失
position: "top",
iconClass: "glyphicon glyphicon-heart", // 設定 圖示的類
className: "mytoast" // 自定義Toast的樣式，需要自己提供一個類名
});
}
}
};
</script>
<style>
</style>
使用 MUI 程式碼片段
注意： MUI 不同於 Mint-UI，MUI只是開發出來的一套好用的程式碼片段，裡面提供了配套的樣式、配套的HTML程式碼段，類似於 Bootstrap； 而 Mint-UI，是真正的元件庫，是使用 Vue 技術封裝出來的 成套的元件，可以無縫的和 VUE專案進行整合開發；
因此，從體驗上來說， Mint-UI體驗更好，因為這是別人幫我們開發好的現成的Vue元件；
從體驗上來說， MUI和Bootstrap類似；
理論上，任何專案都可以使用 MUI 或 Bootstrap，但是，MInt-UI只適用於Vue專案；
注意： MUI 並不能使用 npm 去下載，需要自己手動從 github 上，下載現成的包，自己解壓出來，然後手動拷貝到專案中使用；
- 匯入 MUI 的樣式表：
import '../lib/mui/css/mui.min.css'
- 在
webpack.config.js中新增新的loader規則：
{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }
- 根據官方提供的文件和example，嘗試使用相關的元件