vue中引入mintui、vux重构简单的APP项目
最近在学习vue时也了解到一些经常使用的UI组件，有用于PC的和用于移动端的。用于PC的有：Element(饿了么)、iView等；用于移动端APP的有Vux、Mint UI(饿了么)、Vant(有赞团队)、cube-ui(滴滴)。css
想作一个移动端微信公众号使用的界面，因而选择用mintUI。html
mintUI官网：http://mint-ui.github.io/docs/#/en2/quickstartvue
1.项目中引入mint-ui
1.下载以及配置
(1)下载：webpack
E:\HBuilderSpace\vue-demo>cnpm install --save mint-ui
(2)引入：能够按需引入，也能够所有引入ios
所有引入的方式：git
main.js:github
import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.config.productionTip = false; Vue.use(MintUI) new Vue({ router, store, render: h => h(App), }).$mount('#app');
好比咱们在home.vue使用头部固定的header:(只是简单的实验，须要的时候到官网查阅便可)web
<template> <div class="home"> <mt-header title="multiple button"> <router-link to="/" slot="left"> <mt-button icon="back">back</mt-button> <mt-button @click="handleClose">close</mt-button> </router-link> <mt-button icon="more" slot="right"></mt-button> </mt-header> <ul class="footer"> <router-link class="icons" to="/home/user">我的中心</router-link> <router-link class="icons" to="/home/contact">通信录</router-link> </ul> <router-view/> </div> </template> <script> export default { name: 'home', }; </script> <style scoped lang="scss"> li{ list-style: none; } .footer{ position: fixed; width: 100%; height: 60px; line-height:60px; left: 0px; bottom: 0px; display: flex; flex-flow: row nowrap; justify-content: space-around; } .icons{ font-size: 16px; flex: 1; text-align:center; border-top: 1px solid #42b983; } a { color: #42b983; &.active{ color: #fff; background:#42b983; } } </style>
最终效果以下：ajax
按需引入的方式：(好比咱们按需引入所需的按钮模块)spring
(1)main.js引入模块和css：
import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; import { Button } from 'mint-ui'; import 'mint-ui/lib/style.css' Vue.component(Button.name, Button); Vue.config.productionTip = false; new Vue({ router, store, render: h => h(App), }).$mount('#app');
(2).vue文件直接使用：
<mt-button size="large" type="primary">large</mt-button>
结果：
2. 重构以前的项目，改成mintUI
主要代码以下：
App.vue:只定义了入口，在router/index.js中设置默认路由
<template> <div id="app"> <router-view/> </div> </template> <style lang="scss"> *{ padding: 0px; text-align: center; } </style>
Main.js：按需引入所需的mint模块，而且用Vue.component(name, options)发布为全局组件
import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; import 'mint-ui/lib/style.css' import { Button } from 'mint-ui'; import { Field } from 'mint-ui'; import { Header } from 'mint-ui'; import { Navbar, TabItem } from 'mint-ui'; Vue.component(Navbar.name, Navbar); Vue.component(TabItem.name, TabItem); Vue.component(Header.name, Header); Vue.component(Field.name, Field); Vue.component(Button.name, Button); Vue.config.productionTip = false; new Vue({ router, store, render: h => h(App), }).$mount('#app');
router/index.js：
import Vue from 'vue'; import VueRouter from 'vue-router'; import Login from '../views/Login.vue'; Vue.use(VueRouter); const routes = [ { path: '/', name: 'login', component: Login, }, { path: '/home', name: 'home', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue'), redirect: '/home/user', children: [{ path: 'user', name: 'user', component: () => import(/* webpackChunkName: "about" */ '../views/User.vue') }, { path: 'contact', name: 'contact', component: () => import(/* webpackChunkName: "about" */ '../views/Contact.vue') }] }, ]; const router = new VueRouter({ mode: 'hash', base: process.env.BASE_URL, linkActiveClass: 'active', routes, }); export default router;
定义了默认路由是Login,Login采用一次性加载，其余采用懒加载。登陆成功以后的/home重定向到子路由/home/user。
store/index.js
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { username: '' }, mutations: { setLoginUsername(state, username) { state.username = username }, }, actions: { setLoginUsernameFun(context, username) { context.commit("setLoginUsername", username); }, }, modules: { }, });
vuex管理组件定义了一个属性与修改属性的方法
views/Login.vue
<template>
<div class="login">
<form v-if="!isReg">
<h1>欢迎来到XXX系统</h1>
<br/>
<mt-field label="用户名" placeholder="Input username" v-model="name"></mt-field>
<mt-field label="密 码" placeholder="Input password" type="password" v-model="password"></mt-field>
<mt-button size="large" type="primary" @click.prevent="login()" key="login">登陆</mt-button>
<br/>
<mt-button size="large" type="default" @click.prevent="reg()" key="reg" plain>注册</mt-button>
<br/>
</form>
<div v-else>
<h1>注册</h1>
<br/>
<br/>
<mt-field label="用户名" placeholder="Input username" v-model="name"></mt-field>
<mt-field label="密 码" placeholder="Input password" type="password" v-model="password"></mt-field>
<mt-field label="密 码" placeholder="Input passwordRepeat" type="password" v-model="passwordRepeat"></mt-field>
<mt-button size="large" type="primary" @click="addUser()" key="doReg">注册</mt-button>
<br/>
<mt-button size="large" type="default" @click="cancel()" key="cancel" plain>取消</mt-button>
</div>
</div>
</template>
<script> import store from '@/store'; import { MessageBox } from 'mint-ui'; import { Toast } from 'mint-ui'; export default { name: 'login', store, data() { return { isReg: false, name: '', password: '', }; }, methods: { login() { this.isReg = false; var nameLocal = localStorage.getItem("name"); var passwordLocal = localStorage.getItem("password"); if (nameLocal == '' || passwordLocal == '') { MessageBox.alert("您还没注册!", "title"); return; } if (nameLocal === this.name && passwordLocal === this.password) { store.dispatch("setLoginUsernameFun", nameLocal); Toast("登陆成功"); this.$router.push('/home') return false; } MessageBox.alert("帐号密码错误"); }, reg() { this.name = ''; this.password = ''; this.passwordRepeat = ''; this.isReg = true; }, addUser() { if (this.name == '' || this.password == '') { MessageBox.alert("必填用户名密码!!!"); return; } if (this.password !== this.passwordRepeat) { MessageBox.alert("两次密码不一致!!!"); return; } localStorage.setItem("name", this.name); localStorage.setItem("password", this.password); this.name = ''; this.password = ''; this.isReg = false; Toast("注册成功"); }, cancel() { this.isReg = false; } }, }; </script>
定义了两个表单，登陆和注册用的，用isReg属性进行切换。注册成功保存到本地localStorage。
注意：(1)mint中button默认类型是submit，因此须要阻止事件的默认行为。(2)mintUI的JS组件不能够在main.js中全局引入。好比MessageBox、Toast。
views/Home.vue
<template>
<div class="home">
<mt-header title="XXX管理系统">
<router-link to="/" slot="left">
<mt-button icon="back">back</mt-button>
</router-link>
<mt-button icon="more" slot="right"></mt-button>
</mt-header>
<router-view/>
<ul class="footer">
<router-link class="icons" to="/home/user">我的中心</router-link>
<router-link class="icons" to="/home/contact">通信录</router-link>
</ul>
</div>
</template>
<script> export default { name: 'home', }; </script>
<style scoped lang="scss"> li { list-style: none; } .footer { position: fixed; width: 100%; height: 60px; line-height: 60px; left: 0px; bottom: 0px; display: flex; flex-flow: row nowrap; justify-content: space-around; } .icons { font-size: 16px; flex: 1; text-align: center; border-top: 1px solid #42b983; } a { color: #42b983; &.active { color: #fff; background: #42b983; } } </style>
定义了两个子路由，并用secc语法定义了样式。例如样式 a 里面的&.active 会被解析为 a.active,&表明当前选择器。 scoped 表明默认的css做用域是当前页面，若是不写会影响全局css样式，通常为当前页面。
views/Uer.vue
<template> <div class="user"> 我的中心。欢迎您: {{getLoginUsername()}} </div> </template> <script> import store from '@/store'; export default { name: 'User', store, methods: { getLoginUsername() { return store.state.username }, }, }; </script>
views/Contact.vue:
<template>
<div class="user"> 通信录 </div>
</template>
3.最终效果：
(1)登陆：
(2)登陆以后主页面：
4.引入axios实现先后端分离的注册、登陆效果
1.安装axios
cnpm install --save axios
2.目录结构
3.重要代码解释
src/axios/index.js内容以下：
import axios from "axios"; import { MessageBox } from 'mint-ui'; // 引入常量模块 import Constants from '@/Constants.vue'; // 修改axios请求的默认配置(配置会以一个优先顺序进行合并。这个顺序是：在 lib/defaults.js 找到的库的默认值，而后是实例的 defaults 属性，最后是请求的 config 参数。) //` baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。 axios.defaults.baseURL = Constants.projectBaseAddress; // 添加请求拦截器 axios.interceptors.request.use(function(config) { // 模拟处理前增长token return config; }, function(error) { // 对请求错误作些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(function(response) { // 对响应数据作点什么 if(response.data.success) { // 若是是成功返回信息以后提取出来返回以供后面的调用链使用(后台返回的JSON数据) return response.data; } else { MessageBox.alert(response.data.msg); return new Promise(function(resolve, reject) { // resolve('success1'); // reject('error'); }); } }, function(error) { // 对响应错误作点什么 return Promise.reject(error); }); export default axios;
对axios进行改造以后从新发布对象。全部的请求前面增长一个baseURL，其值是Constants模块的projectBaseAddress。增长拦截器同一对后台返回false的结果进行弹窗，返回为true的提取返回的数据。
src/Constants.vue：
<script> export default { name: 'Constants', projectBaseAddress: '/api' }; </script>
做为一个全局JS工具类发布，使用的方式参考上面axios/index.js中使用。
vue.config.js中使用代理对全部/api/访问进行代理，解决跨域问题。固然跨域也能够后台设置容许跨域。这个参考express跨域设置规则就能够。
module.exports = { publicPath: './', lintOnSave: false, devServer: { proxy: { '/api': { target: 'http://localhost:8088', ws: true, changeOrigin: true, pathRewrite: { '^/api': '' } } } } }
Login.vue进行修改：登陆注册采用同步的方式进行登陆注册。async关键字+await。登陆成功将username、fullname传回前台存入localStorage。
<template>
<div class="login">
<form v-if="!isReg">
<h1>欢迎来到XXX系统</h1>
<br/>
<mt-field label="用户名" placeholder="Input username" v-model="username"></mt-field>
<mt-field label="密 码" placeholder="Input password" type="password" v-model="password"></mt-field>
<mt-button size="large" type="primary" @click.prevent="login()" key="login">登陆</mt-button>
<br/>
<mt-button size="large" type="default" @click.prevent="reg()" key="reg" plain>注册</mt-button>
<br/>
</form>
<div v-else>
<h1>注册</h1>
<mt-field label="用户名" placeholder="Input username" v-model="username"></mt-field>
<mt-field label="用户姓名" placeholder="Input userfullname" v-model="userfullname"></mt-field>
<mt-field label="密 码" placeholder="Input password" type="password" v-model="password"></mt-field>
<mt-field label="电 话" placeholder="Input phone" v-model="phone"></mt-field>
<mt-radio title="性 别" v-model="sex" :options="sexOptions" align="right">
</mt-radio>
<mt-button size="large" type="primary" @click="addUser()" key="doReg">注册</mt-button>
<br/>
<mt-button size="large" type="default" @click="cancel()" key="cancel" plain>取消</mt-button>
</div>
</div>
</template>
<script> import store from '@/store'; import { MessageBox } from 'mint-ui'; import { Toast } from 'mint-ui'; import axios from "@/axios"; var login = { name: 'login', store, data() { return { isReg: false, username: '', userfullname: '', password: '', phone: '', sex: '', sexOptions: [{ label: '男性', value: '男' }, { label: '女性', value: '女' } ] }; }, methods: { async login() { this.isReg = false; if(this.username == "" || this.password == "") { MessageBox.alert("帐号密码必须输入"); return; }
var response = await axios.post('/doLoginJSON.html', { username: this.username, password: this.password }); if(response.success) { Toast("登陆成功"); // 将用户存入localStorage
localStorage.setItem("username", response.data.username); localStorage.setItem("userfullname", response.data.userfullname); // 跳转路由
this.$router.replace("/home"); } }, reg() { this.username = ''; this.password = ''; this.isReg = true; }, async addUser() { if(this.username == '' || this.password == '' || this.userfullname == '' || this.phone == '' || this.sex == '') { MessageBox.alert("请检查必填字段!!!"); return; }
var response = await axios.post('/user/addUserJSON.html', { username: this.username, userfullname: this.userfullname, password: this.password, phone: this.phone, sex: this.sex, }); if(response.success) { this.isReg = false; Toast("注册成功"); } }, cancel() { this.isReg = false; } } } export default login; </script>
User.vue进行修改：（从localStorage获取当前登陆的用户信息）
<template>
<div class="user"> 我的中心。欢迎您: {{getLoginUsername()}} </div>
</template>
<script> import store from '@/store'; export default { name: 'User', store, methods: { getLoginUsername() { var username = localStorage.getItem("username"); var userfullname = localStorage.getItem("userfullname"); return userfullname; }, }, }; </script>
5.引入Vux
vux官网：https://vux.li/
查看了vux官网发现git上star的人数也很多，组件也知足本身的使用需求，因而选择了vux。并且vux提供了树形插件、图表统计插件以及经常使用的md5等工具函数。
1.简介
VUX（读音 [v’ju:z]，同 views）是基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面。
基于webpack + vue-loader + vux能够快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制须要的样式。
vux-loader保证了组件按需使用，所以不用担忧最终打包了整个vux的组件库代码。
VUX并不彻底依赖于WeUI，VUX 在 WeUI 的基础上扩展了多个经常使用组件，可是尽可能保持总体UI样式接近WeUI的设计规范。
几个名词解释：
vue-loader：用于编译 .vue 文件，官方模板已经帮你配置好。
vux-loader：VUX 组件库的 webpack loader，实现按需加载等功能。它不是替代 vue-loader 而是配合 vue-loader 使用。若是你使用 vux2 模板，暂不须要手动使用它。
官网的建议
VUX 必须配合 vux-loader 使用，若是不使用 vux2 模板请按照文档正确配置。less@3.x 有严重的兼容问题，请暂时使用 less@^2.7.3。暂未适配 vue-cli@3.x。
2.安装
(1)安装vux
npm install vux --save
(2)安装less、less-loader (//安装less，vux使用的是less)
npm install less less-loader --save-dev
(3)安装vux-loader：vux是基于vux-loader的，因此必需要安装这个，不然会报一大堆错
npm install vux-loader --save-dev
(4)安装vue-loader：我没安装的时候报错，因此安装了该模块
npm install vue-loader@14.2.2 -D
(5)修改配置：vue.config.js：增长以下配置(vue-cli3.x版本的配置方式)
configureWebpack: config => { require('vux-loader').merge(config, { options: {}, plugins: ['vux-ui'] }) }
3.组件的使用：这里使用x-button组件
(1)安装组件，也能够称为注册组件：
局部注册：在模块中引入：
import { XButton } from 'vux' export default { components: { XButton } }
全局注册：在main.js中(有点相似于mintui的按需注册组件)
import { XButton } from 'vux' Vue.component('x-button', XButton)
(2)使用组件：
<x-button type="warn">vux按钮</x-button>
至此简单的引入了vux，接下来在使用的时候参考文档使用所需组件便可。
补充：关于vux的不同的地方
(1)@click 绑定事件不生效。按照Vue文档，在组件上绑定原生点击事件请使用@click.native。
6.错误小记载
(1)npm run build的时候报错：
Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema.
- options has an unknown property 'minimize'
在css-loader1.0版本的时候移除了该属性，我没有找到替代办法，因此我选择了下降css-loader版本解决：
npm install css-loader@0.28.11
总结：
0.@表明的是src目录
1.vue中引入全局JS变量和JS方法有两种：
(1)将全局的东西提取到单独的模块中，好比：抽到Constants.vue中，内容以下
<script> export default { name: 'Constants', projectBaseAddress: '/api', method1() { return "method1"; } }; </script>
其余模块使用的方法：引入模块，使用便可：
import Constants from '@/Constants.vue'; console.log(Constants.projectBaseAddress); console.log(Constants.method1());
(2)经过Vue.prototype挂载到Vue实例中。能够挂载对象、函数、变量等，也能够是从模块中引入的对象。
var Constants = { name: 'Constants', projectBaseAddress: '/api', method1() { return "method1"; } }; Vue.prototype.Constants = Constants;
组件中调用便可：
console.log(this.Constants);
2.axios是基于Promise的ajax库，能够用async+await实现同步请求，其拦截器也能够作一些统一处理。
3.axios跨域请求能够在后台设置容许跨域+携带cookie，以后设置axios携带cookie。也可使用代理，上面是使用了代理。
相关文章
- 1. vue - mintui + elementUI vux（三）
- 2. vue中引入vux
- 3. vue 中引入vux
- 4. vue项目中vux的使用
- 5. vue项目引入vux-ui框架详解（快速入门）
- 6. 轻松用vux构建vue项目
- 7. vux 项目的构建
- 8. vue项目中 引入bootstrap
- 9. Vue+Vux项目实践
- 10. vue项目中安装使用vux
- 更多相关文章...
- • Eclipse 重构菜单 - Eclipse 教程
- • Maven 构建 Java 项目 - Maven教程
- • C# 中 foreach 遍历的用法
- • Github 简明教程
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. vue - mintui + elementUI vux（三）
- 2. vue中引入vux
- 3. vue 中引入vux
- 4. vue项目中vux的使用
- 5. vue项目引入vux-ui框架详解（快速入门）
- 6. 轻松用vux构建vue项目
- 7. vux 项目的构建
- 8. vue项目中 引入bootstrap
- 9. Vue+Vux项目实践
- 10. vue项目中安装使用vux