app和手机网站的区别,怎样建设公司网站,检测网站是否安全,1网站建设的目标是什么意思一、准备工作
1.确保安装了开发软件 VS Code#xff08;此处可查阅安装 VS Code教程#xff09;#xff0c;确保相关插件安装成功
2.安装Node.js 和创建Vue项目#xff08;此处可查阅安装创建教程#xff09;
3.成功在VS Code运行一个Vue项目#xff08;此处可查阅运行…一、准备工作
1.确保安装了开发软件 VS Code此处可查阅安装 VS Code教程确保相关插件安装成功
2.安装Node.js 和创建Vue项目此处可查阅安装创建教程
3.成功在VS Code运行一个Vue项目此处可查阅运行教程
注意以上均在 Win10环境下进行浏览器为Microsoft EdgeVue2.x
二、Element UI 介绍
Element UI 是一个基于 Vue 2.0 的桌面端组件库主要用于构建快速、简洁的用户界面。它提供一套丰富的组件和工具能够帮助开发者快速构建高质量的 Vue 应用。Element UI 由饿了么前端团队开发并开放源代码。
官网组件 | Element
特点
用法简单Element UI 提供的组件具有统一的风格和用法使得开发者能够快速上手并构建页面。配置灵活多数组件都有多重配置选项允许定制化以满足不同场景的需求。国际化支持支持多语言方便构建国际化应用。响应式虽然是为桌面端优化的但是许多组件在响应式布局上表现良好。良好的文档和社区支持Element UI 有着详尽的文档和活跃的社区可以方便地解答开发中的问题。
组件分类
基础组件如布局Layout、容器Container、颜色Color、字体Typography、图标Icon等。表单组件输入框Input、选择器Select、开关Switch、滑块Slider、时间选择器Time Picker、日期选择器Date Picker、上传Upload等。数据展示组件表格Table、标签Tag、进度条Progress、树形控件Tree、分页Pagination等。导航组件菜单NavMenu、面包屑Breadcrumb、页签Tabs、下拉菜单Dropdown等。反馈组件对话框Dialog、消息提示Message、消息弹窗MessageBox、通知Notification等。其他组件如工具提示Tooltip、Popover、弹出框Popover、轮播Carousel、Collapse 折叠面板等。
注意事项
Vue 版本兼容性Element UI 主要与 Vue 2.x 版本兼容如果你在使用 Vue 3.x可能需要考虑其他 UI 框架或者使用 Element Plus它是 Element UI 的官方 Vue 3 兼容版本。主题定制Element UI 支持 SCSS 变量覆盖和在线主题生成器可以方便地进行主题定制。维护性由于 Element UI 是一个由社区维护的开源项目在使用中可能会出现一些问题或 bug在生产环境中使用时务必要测试所有的用例并关注官方的更新和通知。
三、快速入门使用
3-1 安装Element UI组件
1.确保当前项目已经停止在此页面按下CTRL C然后输入y回车后项目就停止了 2.使用npm在当前项目安装Element UI组件右键当前项目点击在集成终端中打开 3.会跳出这个窗口在里面输入npm install element-ui2.15.3 回车 4.弹出以下则安装成功
5. 查看项目结构Element UI组件都被安装在node_modules下至此Element UI安装成功 3-2 引入Element UI组件库
1.打开main.js添加下面红色内容内容至红色方框
import ElementUI from element-ui; import element-ui/lib/theme-chalk/index.css; Vue.use(ElementUI); 2.新建目录element存放element的组件点击src目录下的views然后点击新建目录 3.名称为element 4.然后再在element目录下创建ElementView.vue文件采用的是驼峰命名法 5.vue组件文件由以下三部分组成所以我们在这里先搭好框架 3-3 访问官网复制组件代码进行调整
官网组件 | Element
1.这里以按钮为示例进入官网后可以看到各种各样的按钮 2.看到合适的按钮之后可以直接复制其代码这里以默认按钮示例 3.复制到ElementView.vue文件中放到一个div里面 4.然后再APP.vue文件中添加红方框内的内容没有自动生成第二步的记得安装Vetur扩展 5.运行查看结果显示按钮成功 结语以上就是Element UI 组件的快速入门使用希望对各位看官有所帮助感谢各位看官的观看谢谢~
