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" >
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>444444</p>
</div>
<script>
var login = {
template: '<h1>這是登入元件</h1>'
}
// 建立 Vue 例項,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
render: function (createElements) { // createElements 是一個 方法,呼叫它,能夠把 指定的 元件模板,渲染為 html 結構
return createElements(login)
// 注意:這裡 return 的結果,會 替換頁面中 el 指定的那個 容器
}
});
</script>
</body>
</ html>
在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,嘗試使用相關的元件