06_01.集成mint-ui组件库

效果图

1.下载mint-ui

npm i mint-ui -S

1.1 mint-ui官网

http://mint-ui.github.io/#!/zh-cn

1.2 引用头部(Header)

http://mint-ui.github.io/docs/#/zh-cn2/header

demo:

2. 要操作的文件：

3. demo

• .src/index.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

• .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

• ./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