使用Mint UI组件库

1.使用

下载组件
npm i mint-ui

在main.js中进行挂载

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'

Vue.use(MintUI)

1.2 按照需求使用组件

下载对应的插件并且修改vue-lazyload中.babelrc文件内容
```
npm install babel-plugin-component -D
```

将组件注册为Vue中全局组件

import {Header} from 'mint-ui' 

import 'mint-ui/lib/style.css' //自动去node_modules下找
Vue.component(Header.name,Header)

第一次按照官方文档使用时就报错

ReferenceError: Unknown plugin "external-helpers" specified in "node_modules/vue-lazyload/.babelrc"

按照官网的去配置了.babelrc文件

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

2.项目整体结构

./
|-- dist
|   `-- bundle.js
|-- index.html
|-- src
|   |-- components
|   |   |-- app.vue
|   |   |-- header.vue
|   |   |-- index.vue
|   |   `-- login.vue
|   |-- css
|   |   |-- index.css
|   |   `-- mui
|   |-- img
|   |   `-- bg2.jpg
|   |-- main.js
|   `-- routes.js
`-- webpack.config.js

webpack.config.js 配置webpack打包配置信息
index.html 用于显示页面
src目录下用于存放打包的源代码
- components 目录中存放vue组件
- css 存放一些插件的样式，或者自定义的一些样式
- img是资源目录
- min.js是webpack的程序入口
- routes.js用于管理vue的路由
- 最后将所有文件打包成dist中的bundle.js文件

3.关于webpack的配置

const path=require("path") //node.js中用于识别路径的包

const VueLoaderPlugin = require('vue-loader/lib/plugin') //用于打包Vue组件的插件

module.exports={    
    mode:'development', //设置开发模式
    entry: path.join(__dirname,"src/main.js"), //入口文件

    output:{
        path:path.join(__dirname,"dist"), //出口文件和文件名
        filename:"bundle.js"
    },
    devServer:{ //使用webpack-dev-server进行实时监控
        port:8081, //展示的端口
        host:'0.0.0.0', //外部主机可以访问
        disableHostCheck: true, //避免安全检查
        contentBase:path.join(__dirname,"/"), //设置展示的初始路径
        hot:true //启用热重载
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                {loader:'vue-style-loader'}, //定义css文件的处理规则，这里具有固定的加载顺序
                {loader:'css-loader'}
                ]
            },
            {test:/\.(jpg|png|gif|jpeg)$/,use: 'url-loader?limit=102400&name=[name].[ext]'}, //处理url类型资源和图片的base64压缩处理
            {test:/\.vue$/,use:'vue-loader'}, //
            {test:/\.js$/,use:'babel-loader'}
        ]
    },
    plugins:[
        new VueLoaderPlugin() //vue打包必须
    ],
    resolve:{
        alias:{
            vue$:"vue/dist/vue.js" //处理在main中引用vue的问题
        }
    }
}

4.页面组件化

main.js中作为程序入口引入app.js组件
app.js组件中将页面组件化和一些逻辑的处理
index.html 用于渲染对应的vue实例对象

4.1 main.js程序入口

//Vue 入口文件
import Vue from 'vue'

import {Header, Tabbar, TabItem} from 'mint-ui' 

import 'mint-ui/lib/style.css' //自动去node_modules下找

//app组件文件
import appEntry from './components/app.vue'

Vue.component(Header.name,Header)
Vue.component(Tabbar.name,Tabbar)
Vue.component(TabItem.name,TabItem)

//替换html模板x 
var template=`
<App></App>
`

//将app组件挂载到实例对象中
var app=new Vue({
    el:"#app",
    template:template,
    components: {
        'App':appEntry
    }
})

4.2 app.js页面组件化

<template>
    <div class="app-container">
    <!-- 顶部内容 mint-ui组件 -->
    <mt-header fixed :title="header"></mt-header> 
    <router-view></router-view>
    <!-- 底部内容 -->
    <mt-tabbar v-model="selected">
      <mt-tab-item v-for="item in data1" :id="item.content" :key="item.id" >
        <img slot="icon" >
        {{item.content}}
      </mt-tab-item>
    </mt-tabbar>
    </div>
</template>
<script>
    export default {
        data:function(){
            return{
                header:"hello Vue!",
                data1:[{
                    id:0,
                    content:"外卖"
                },{
                    id:1,
                    content:"订单"
                },{
                    id:2,
                    content:"发现"
                },{
                    id:3,
                    content:"我的"
                }
                ],
                selected:''
            }
        }
    }    
</script>
<style scoped>

</style>

4.4 index.html 渲染

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>webpack</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div id="app">    
    </div>
</body>
<script type="text/javascript" src="/bundle.js"></script>
</html>

5 使用git将项目进行保存

README.md说明文件
License开源协议
.gitignore忽略掉要上传的文件或者目录

5.1 仓库初始化

git init

5.2 根据.gitignore规则添加文件到本地git

git add .

git commit -m 'Vue Test'

5.3 创建云端仓库

获得对应的ssh或者https链接

5.4 与云仓库关联

git remote add origin git@github.com:zpliu1126/VueTest.git

5.5推送文件到云仓库

git push origin master

master为对应的分支

5.6 将云端代码更新到本地

git pull origin 分支名

Previous项目迁移 Next案例操作

Last updated 5 years ago