实现ElementUI
的经典布局
- 新建
views/Components.vue
,搭建页面布局结构。 - 配置路由: 访问
/components
,看到页面内容。
Vue
的嵌套路由
根据当前需求:
- 当访问:
/components/border
组件页面的main
部分显示border
- 当访问:
/components/icon
组件页面的main
部分显示icon
- 当访问:
/components/color
组件页面的main
部分显示color
发现需要在compoents
页面中还有需要动态更新的部分,这个时候就可以选择使用嵌套路由来实现。
案例:嵌套路由实现页面main
部分内容的动态更新。
- 新建3个
vue
页面。Border.vue
.Color.vue
.Icon.vue
. - 在
router index.js
中配置嵌套路由,定义路由与组件的映射关系。 - 使用特定的
url
路径访问页面即可。
MintUI
MintUI
是饿了么团队开发的基于vue
的移动端组件库。
Vant
是有赞团队开发的移动端组件库。
基于脚手架安装MintUI
-
新建脚手架项目。
# 找一个空目录 例如: day01/demo vue create scaffolding # 依次选择: Manually select features Choose Vue version + Babel + Router + Vuex 2.x 问: Use history mode for router? 答: yes In package.json 是否将当前配置作为预设配置下次直接使用? n
-
在新项目中安装
MintUI
。(npm install
)<