认识下载elementUI,mintUI.认识mint组件学习。报错处理

最新推荐文章于 2024-08-07 10:05:17 发布

百变小樱桃~

最新推荐文章于 2024-08-07 10:05:17 发布

阅读量299

点赞数

CC 4.0 BY-SA版权

文章标签： webpack 组件化

本文链接：https://blog.csdn.net/qq_57112870/article/details/117875091

本文介绍了如何使用脚手架搭建项目，并学习了elementUI和mintUI中的组件，如header、button和input。通过配置路由实现了经典布局和嵌套路由。在实际操作中遇到了unknown custom element错误和npm run serve时的文件找不到问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现`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）

# 在ele_project目录下 执行命令
npm install --save mint-ui

在脚手架项目main.js中，配置使用MintUI。

// main.js
import MintUI from 'mint-ui';
import 'mint-ui/lib/style.min.css';
Vue.use(MintUI)

编写页面内容。

`MintUI`常用组件

`Header`组件

Header组件用于定义移动端界面头部标题栏。其基本结构：

<template>
	<div>
        <mt-header title="标题" fixed></mt-header>
    </div>
</template>

案例：

新建页面：src/testing/Header.vue，编写Header内容。
配置路由。/header时看到Header.vue。

`Button`组件

Button组件用于显示按钮。其基本结构：

<mt-button type="按钮类型"
           size="按钮尺寸"
           icon="图标"
           disabled
           plain>
    确认注册
</mt-button>

按钮类型：default, primary, danger

按钮尺寸：small normal large

图标类型：back more

案例：

新建testing/Button.vue，编写页面内容。
配置路由。访问/button时，看到这个页面。

`Field`组件

Field组件用于实现表单编辑器，其基本语法：

<mt-field type="输入框的类型"
          label="输入框左侧的文本"
          placeholder="占位内容"
          readonly
          disabled
          disableClear
          state="输入框的状态"
          :attr="{maxlength:15, autocomplete:'off'}">
</mt-field>