效果圖
1.下載mint-ui
npm i mint-ui -S
1.1 mint-ui官網
1.2 引用頭部(Header)
demo:
2. 要操作的文件：
3. demo
- .src/index.html
<!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>
</head>
<body>
<div id="app"></div>
</body>
</html>
- .src/js/main.js
/*
* @Author: Robyn
* @Date: 2017-11-18 10:57:15
* @Last Modified by: Robyn
* @Last Modified time: 2017-11-18 10:57:15
*/
// from后面的路徑, 如果含有./ ../那么就相對于當前文件找文件
// 如果沒有, 那么就會去node_modules里面找對應的包
// 1.1 導入第三方包
import Vue from 'vue';
import MintUi from 'mint-ui';
import 'mint-ui/lib/style.css';
import Common from '../component/common'; // 自動找到index.js引入
// 1.2 啟用vue插件
Vue.use(MintUi);
Vue.use(Common);
// 2.1 導入根組件
import AppComponent from '../component/App.vue';
// 2.2 渲染根組件, 啟動項目
new Vue({
el: '#app',
render(createNode) {
return createNode(AppComponent);
}
});
- .src/component/common/header.vue
<template>
<header>
<mt-header fixed title="test"></mt-header>
</header>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
- .src/component/common/index.js
/*
* @Author: Robyn
* @Date: 2017-11-18 10:58:51
* @Last Modified by: Robyn
* @Last Modified time: 2017-11-18 10:58:51
*/
// 編寫屬于自己的公共Vue組件庫
import HeaderComponent from './header.vue';
// Vue插件要求提供一個install方法, 這個方法會被注入Vue
// 需要我們調用Vue的filter component directive去擴展功能
export default {
install(Vue) {
Vue.component('app-header', HeaderComponent);
}
};
- .src/component/App.vue
<template>
<app-header></app-header>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
- ./webpack.config.js
const path = require('path');
const HtmlWP = require('html-webpack-plugin');
const CleanWP = require('clean-webpack-plugin');
module.exports = {
// 打包的入口文件
entry: path.resolve(__dirname, './src/js/main.js'),
// 輸出
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
// 插件配置
plugins: [
new HtmlWP({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
}),
new CleanWP(['dist'])
],
// 模塊配置
module: {
// 配置loader規則
rules: [
// css
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
// less
{
test: /\.less$/,
use: [ 'style-loader', 'css-loader', 'less-loader' ]
},
// html
{
test: /\.(html|tpl)$/,
use: [ 'html-loader' ]
},
// 靜態資源引用
{
test: /\.(png|jpeg|gif|jpg|svg|mp3)$/,
use: [
{ loader: 'url-loader', options: { limit: 10240 } } // 小于10KB的打包
]
},
// js
{
test: /\.js$/,
use: [ 'babel-loader' ],
exclude: path.resolve(__dirname, 'node_modules')
},
// vue
{
test: /\.vue$/,
use: [ 'vue-loader' ]
}
]
}
};
- 根目錄執行webpack
webpack
