Vue组件库 View UI快速入门环境配置_view ui 4.7.0 版本的组件库-程序员宅基地

前言

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

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

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

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

一、下载安装包

1.1 nodejs

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

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

1.2 VsCode

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

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

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/[email protected]

三、运行项目

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

cd c:\java\vue

创建项目 test

vue create test

创建完成后进入项目目录

cd test

安装View UI 相关依赖

npm install view-design --save

Vue项目引入依赖

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

import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';

Vue.use(ViewUI);

前端使用View UI组件

<template>
  <div>
    <Button type="primary">Primary</Button>
  </div>
</template>

运行项目

npm run dev

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

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

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  // 省略更多
}

运行结果

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

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

附：main.js完整代码

import Vue from 'vue'
import App from './App.vue'
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';

Vue.use(ViewUI);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

本文链接：https://blog.csdn.net/qq_41464123/article/details/115490056

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

linux定时删除文件或文件夹_linux定时删除文件命令每天-程序员宅基地

文章浏览阅读1w次，点赞8次，收藏16次。本文转载自：https://blog.csdn.net/jiangnan8710/article/details/51849748linux新人，个人记录以后备用一、常用的命令 1、查询命令 find 在删除日志前，首先要做的是查找日志所在的目录。命令常用格式：find 目录path -name "需要匹配的文件" ..._linux定时删除文件命令每天

初识HTML5新增（部分新增）-程序员宅基地

文章浏览阅读70次。关于article和sectionarticalsectionsectionsectionarticlesectionarticle。

武大94年博士年薪201万入职华为！学霸日程表曝光，简直降维打击！-程序员宅基地

文章浏览阅读130次。点击上方“码农突围”，马上关注这里是码农充电第一站，回复“666”，获取一份专属大礼包真爱，请设置“星标”或点个“在看程序员求职面试（ID:CoderJob）整理内容综合自：湖北日报、I...

软件设计师考点内容分析(一)_软件设计师 cfg解析-程序员宅基地

文章浏览阅读129次。1、CPU构成程序计数器(PC)：存放执行指令的地方，计算之前要用到累加器(AC)：暂时存放算数逻辑运算部件ALU运算的结果信息指令寄存器(IR)：保存当前正在执行的一条指令地址寄存器(AR)：保存当前CPU所要访问的内存单元的地址###2、DMA(Direct Memory Access，直接内存存取)DMA工作方式，是在DMA控制硬件的控制下，实现内存与外设间数据的直接传送，..._软件设计师 cfg解析

flask+mysql影响电影票房因素的数据分析及可视化系统-计算机毕业设计源码19201_电影票房数据可视化分析-程序员宅基地

文章浏览阅读1.1k次。1、电影评分在一定程度上反映电影的质量和口碑，观众非常关注电影产品的质量，观众选看电影时大部分会去考虑电影的评分。2、上映档期：电影具有很强的季节性，一般会把电影分为暑期档、国庆档等黄金档期，热门档期成为电影制作商的必争时期。3、影片类型：不同的电影类型拥有不同的观影群体，观众会根据自己偏好的电影类型来选择电影，因此不同电影类型的电影票房也会有所差异。4、关注度：关注度可以有效地反映这部电影的热度。关注度越高，说明电影越有吸引力，潜在的消费组和经济效应越大。_电影票房数据可视化分析

随便推点

CCC数字钥匙设计【NFC】--NFC卡相关基础知识_type b卡与a卡-程序员宅基地

文章浏览阅读1.8k次，点赞2次，收藏16次。CCC3.0的NFC技术中，除车端，手机端需包含NFC功能外，另外一般还会配置一个NFC卡，用于备份使用。本文主要介绍NFC卡相关的基础知识。_type b卡与a卡

uniapp修改h5导航栏标题_uniapph5页面微信导航栏没有title-程序员宅基地

文章浏览阅读777次。注意：如果需要在页面进入时设置标题，可以在onReady内执行，以避免被框架内的修改所覆盖。如果必须在onShow内执行需要延迟一小段时间。2、在pages.json-globalStyle节点设置navigationBarTitleText属性值也无效。在应用的标题页面通过uni.setNavigationBarTitle设置。：用户微信小程序嵌入开发的h5后，上方导航标题需要自定义。1、直接在如下图在编包时修改标题无法生效。_uniapph5页面微信导航栏没有title

Netty中的bytebuf无符号读取方法_bytebuf.readshort()-程序员宅基地

文章浏览阅读1.9k次。ByteBuf读操作我们常用的有一下几种：ByteBuf.readByte() 读一个字节，有符号ByteBuf.readUnsignedByte() 读一个字节，无符号 ByteBuf.readShort()读连续的两个字节，有符号ByteBuf.readUnsignedShort()读连续的两个字节，无符号 ByteBuf.readInt() 读连续的四个字节，有符号 ByteBuf.readU..._bytebuf.readshort()

【零基础学Java】—Java中的＞＞，＞＞＞_java中>>>0-程序员宅基地

文章浏览阅读1.3k次，点赞11次，收藏6次。【Java基础】Java中的 >>，>>>前言（做题时遇到了，记录一下2022 4 27）我们都知道对于有符号数据类型，二进制最左端的数字为符号位，0代表正，1代表负，这里先介绍几个概念逻辑左移=算术左移：高位溢出，低位补0逻辑右移：低位溢出，高位补0算术右移：低位溢出，高位用符号位的值补比如一个有符号位的8位二进制数10101010，[]是添加的数字逻辑左移一位：0101010[0]逻辑左移两位：101010[00]算术左移一位：0101010[0]算术_java中>>>0

手机有一个时钟的标志_各式各样的时钟，总有一款会适合你的家-程序员宅基地

文章浏览阅读1k次。完美的配件，把任何中世纪的现代客厅、卧室、办公室、餐厅或书房结合在一起。现代时钟凭借其无与伦比的风格和永恒的设计，可以说是你和你的家居装饰都不想错过的一件装饰配件。因此，无论您是在寻找现代蓝牙音响时钟还是经典的乔治尼尔森球钟，这里都有给你介绍！颜色的突兀搭配大胆的形状告诉我们，这些一定来自乔治·纳尔逊的维特拉陶瓷钟的收藏。一个有趣而前卫的线条，被认为是现代美国设计的标志。这款日晒挂钟以其色彩斑斓的..._设计一款独一独二的时钟说一说这个时钟

塔罗牌之命运之轮，正义，倒吊者的解读-程序员宅基地

文章浏览阅读757次，点赞21次，收藏19次。正位释义：关键性的事件，有新的机会，环境的变化，幸运的开端，状况好转，问题解决，幸运之神降临。命运之轮正转到了你人生最低迷的时刻，也许你有些无法接受，但是若能以平常心来看待，这无疑是你成长的最好时机，需要认真面对。当牌面正立时，你的事业会有短暂的停顿，但你很清楚其中的原因，再次确认自己的目标，做好出发的准备。这就是命运之轮的解析。忍耐眼前的厄运，接受命运的安排，好好反省过去的得失，为将来的再度崛起储备力量，才是最重要的。逆位释义：边疆的不行，挫折，计划泡汤，障碍，无法修正方向，往坏处发展，恶性循环，中断。