使用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 分支名
Last updated
Was this helpful?