Vue组件库 View UI快速入门 环境配置

简介: Vue组件库 View UI快速入门 环境配置

前言

Vue是国内最流行的前端框架之一,View UI是基于Vue的组件库

有了它,可以快速搭建Vue系统,并保证系统的UI质量。

View UI 和 Element UI 一样,都是Vue组件库的佼佼者

作者也是使用View UI组件库搭建了公司的OA系统,最近特地回顾下研发期间学过的内容。

 

一、下载安装包

1.1 nodejs

 

nodejs是Vue开发必备的开发环境,下载安装包正常安装即可

nodejs下载 : http://nodejs.cn/download/

nodejs 下载

 

 

1.2 VsCode

VsCode是Vue的开发工具,当然也可以使用 HbuilderX。

VsCode下载:https://code.visualstudio.com/

VsCode 下载

VsCode安装后默认为英文界面,需要设置为简体中文

1. 按下键盘快捷键 【Ctrl+Shift+P】

2.输入lang

设置简体中文

 

 

二、安装脚手架

 

安装淘宝镜像(可选)

npm install -g cnpm --registry=http://registry.npm.taobao.org

卸载现有脚手架(可选)

npm uninstall -g @vue/cli

安装脚手架,我使用的是3.0.4版本

npm install -g @vue/cli@3.0.4

 

三、运行项目

 

命令行(cmd) cd 到指定的目录

cd c:\java\vue

创建项目 test

vue create test

创建完成后 进入项目目录

cd test

安装View UI 相关依赖

npm install view-design --save

Vue项目引入依赖

main.js文件添加View UI,完整代码见底部

1. import ViewUI from 'view-design';
2. import 'view-design/dist/styles/iview.css';
3. 
4. Vue.use(ViewUI);

前端使用View UI组件

1. <template>
2. <div>
3. <Button type="primary">Primary</Button>
4. </div>
5. </template>

 

运行项目

npm run dev

其中dev还是serve由 package.json 配置决定

比如我的配置是dev,那就是dev

1. {
2. "name": "test",
3. "version": "0.1.0",
4. "private": true,
5. "scripts": {
6. "dev": "vue-cli-service serve",
7. "build": "vue-cli-service build",
8. "lint": "vue-cli-service lint"
9.   },
10. // 省略更多
11. }

 

运行结果

VsCode 控制台

 

运行结果图

 

 

想写的有很多,一步一步来,先把最基础的环境搭建写明白。

搭建了基本的开发环境,才可以进一步测试View UI的各大组件。


附:main.js完整代码

1. import Vue from 'vue'
2. import App from './App.vue'
3. import ViewUI from 'view-design';
4. import 'view-design/dist/styles/iview.css';
5. 
6. Vue.use(ViewUI);
7. Vue.config.productionTip = false
8. 
9. new Vue({
10. render: h => h(App),
11. }).$mount('#app')

 


相关文章
|
21天前
|
缓存 测试技术 C#
使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
【10月更文挑战第20天】本文介绍了使用 Radzen Blazor 组件库开发基于 ABP 框架的炫酷 UI 主题的步骤。从准备工作、引入组件库、设计主题、集成到 ABP 框架,再到优化和调试,详细讲解了每个环节的关键点和注意事项。通过这些步骤,你可以打造出高性能、高颜值的应用程序界面。
|
2月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
3月前
|
JavaScript
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
223 49
|
21天前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
82 0
|
3月前
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
|
3月前
|
JavaScript 开发者 UED
Vue.js组件库大对决:Element UI与Vuetify,开发者的罗密欧与朱丽叶!
【8月更文挑战第30天】Element UI和Vuetify是Vue.js开发中的热门组件库,前者简洁高效,后者遵循Material Design,国际化程度高。两者均提供丰富的组件支持,但Vuetify组件更多样,设计更灵活;Element UI在性能和中文支持上更优。文档方面,Element UI更直观易懂,而Vuetify配置灵活但学习成本稍高。选择时需综合考虑项目需求、团队背景及设计风格,以达到最佳开发效果。
164 0
|
3月前
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
65 0
|
10天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
2天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
2天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex