vux ui框架 尤雨溪 推荐的 它是由腾讯内部的开发人员创建的(已经创业了)
https://vux.li/#/zh-CN/components
vux 默认不支持全局添加
ui样式来自于weui
----------安装步骤------------
npm install vue-cli -g // 如果还没安装
vue init airyland/vux2 projectPath
cd projectPath
npm install --registry=https://registry.npm.taobao.org
npm run dev
- 查找组件是顶部的组件选项开始--->全部组件
-
- 每个被选择的组件标题下面都有
-
- 四个小标题:选择进入demo页面复制所需要的组件demo代码
-
- 在HelloFromVux.vue中添加并展示到页面当中HelloFrom.vue是展示页面组件的集合页,需要在这里面引入并注册
-
- 默认会有返回按钮需要在首页将他隐藏,此时可以查看文档给的组件属性信息进行修改showBack:false
-
- 这些属性又从全部组件--->Xheader---》Props中查看
-
- 这是esl-ink的报错,如果出现就将es-link在【build】--->webpack.base.config.js--->module--->ruels--->loader:eslint-loader注释掉
-
- 添加列表cell cell-box是表格集合 全部组件--->cell-box--->进入demo页面:
-
- vux的动态获取信息 路由和请求:(可以直接使用link属性在任意进行跳转,前提实在路由中进行设置)
-
- 页面的跳转,在main.js中进行路由的配置这里添加了detail页面
-
-
- 先引入: import Detail from "./components/Detail"
-
-
-
const routes = [{
path: '/',
component: Info
},{
path: '/detail',
component: Detail
}]
- vux中提供了数据请求的方法,是以插件的形式引入的,在main.js中全局引入Vue.user(AjaxPlugin):
-
-
-
引入ajax插件之后语法和vue-resource一样($http),但也有区别
-
<
script
>
import
{CellBox,Group}
from
'vux'
export default
{
name
:
"info"
,
components
:
{CellBox,Group},
data
(){
return
{
list
:
[]用来遍历时存放的数组
}
},
mounted
(){
var
that
=
this 更改this指向
this
.$http({
method
:
"get"
,
url
:
"http://datainfo.duapp.com/shopdata/getGoods.php?callback="
,
params
:
{
"classID"
:
1
},
}).then((data)
=>
{
console
.log(data)此时打印出来的是名为data的数组对象所以需要解析data.data
let
datas
=
eval(data.data);把值赋给data中的list:[]
that.list
=
datas
})
}
}
script
>
- 然后在组件中遍历 <cell-box is-link link='/detail' v-for="data in
- 把路由跳转后的显示区进行限制就需要router-view的位置变更,想要组件在哪里显示就把router-view引入到哪里
- 先将方法放到helloFromVux.vue中
-
- 原本rouuter-virew实在App.vue中的,所以将helloFromVux引入到App.vue中
-
-
-
-
<
template
>
<
div
id
=
"app"
>
<
Hello
>
Hello
>
div
>
template
>
<
script
>
import
Hello
from
'@/components/HelloFromVux'
export default
{
name
:
'app'
,
components
:
{Hello}
}
script
>
- 那么默认的初始页就改为了Info.vue
- 添加切换页面的过渡效果,需要引入模板
-
- 它定义了一个主的路由用来包裹我们以后在项目中任意调用的router-view;需要把下面的代码复制到main.js当中替代当前的路由配置
-
- import PageTransition from "..."
-
//重写后退样式
VueRouter.prototype.
goBack
=
function
() {
this
.isBack
=
true
window
.
history
.go(
-
1
)
}
- 引入新的路由配置
-
const
routes
=
[{
path:
'/'
,
name:
'PageTransition'
,
component: PageTransition,
children: [{
path:
''
,
component: Info
}, {
path:
'/detail'
,
component: Detail
}]
}]
- 给header添加事件返回首页时,回退按钮消失 改变文本内容
-
-
<
template
>
<
div
>
<
x
-
header
:
left-options
=
"{showBack: istrue}"
@
click
.
native
=
"getHome"
>Mr Au
x
-
header
>
<
router
-
view
@
to-parent
=
"getChild"
>
router
-
view
>
<
Footers
>
Footers
>
div
>
template
>
<
script
>
import
{ XHeader }
from
'vux'
import
Info
from
'./Info'
import
Footers
from
'./Footers'
export default
{
components
:
{XHeader,Info,Footers},
data
() {
return
{
// note: changing this line won't causes changes
// with hot-reload because the reloaded component
// preserves its current state and we are modifying
// its initial state.
msg
:
'Hello World!'
,
istrue
:
false
}
},
methods
:
{
getChild
(msg){
this
.msg
=
msg,
this
.istrue
=
true
},
getHome
(){
this
.msg
=
msg;
this
.istrue
:
false
}
}
}
script
>
<
style
>
.vux-demo
{
text-align
:
center;
}
.logo
{
width
:
100
px
;
height
:
100
px
}
style
>
- 添加底部:tabbar,在展示页HelloFromVux中注册并展示
-
-
-
import
Footers
from
'./Footers'
-
components
:
{XHeader,Info,Footers},
-
<
template
>
<
tabbar
>
<
tabbar
-
item
>
<
img
slot
=
"icon"
src
=
"../assets/demo/icon_nav_button.png"
>
<
span
slot
=
"label"
>Wechat
span
>
tabbar
-
item
>
<
tabbar
-
item show-dot
>
<
img
slot
=
"icon"
src
=
"../assets/demo/icon_nav_msg.png"
>
<
span
slot
=
"label"
>Message
span
>
tabbar
-
item
>
<
tabbar
-
item selected link
=
"/component/demo"
>
<
img
slot
=
"icon"
src
=
"../assets/demo/icon_nav_article.png"
>
<
span
slot
=
"label"
>Explore
span
>
tabbar
-
item
>
<
tabbar
-
item badge
=
"2"
>
<
img
slot
=
"icon"
src
=
"../assets/demo/icon_nav_cell.png"
>
<
span
slot
=
"label"
>News
span
>
tabbar
-
item
>
tabbar
>
template
>
<
script
>
import
{ Tabbar, TabbarItem, Group, Cell }
from
'vux'
export default
{
name
:
"foot"
,
componets
:
{Tabbar, TabbarItem}
}
script
>
<
style
>
style
>