# ls-web **Repository Path**: imjohn/ls-web ## Basic Information - **Project Name**: ls-web - **Description**: No description available - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-04-29 - **Last Updated**: 2022-05-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # @csii/vx-web 基于Vue.js 2 的WEB端组件库 ### 1、使用科蓝npm镜像,安装组件库 科蓝npm镜像包含公共工具库@csii/vx-util、WEB端组件库@csii/vx-web、移动端组件库@csii/vx-mobile、图形组件库@csii/vx-clay #### 1.1、设置科蓝镜像 ```bash npm config set registry http://registry.npm.csii.com.cn # 可以通过,npm config get registry 查看是否配置成功 # npm config list 查看npm当前配置 ``` #### 1.2、在线安装@csii/vx-web依赖包 ```bash npm install @csii/vx-web --save ``` #### 1.3、离线安装@csii/vx-web依赖包 在外网环境下,下载组件库[vx-web-0.0.1-alpha.4.tgz](http://registry.npm.csii.com.cn/@csii/vx-web/download/@csii/vx-web-0.0.1-alpha.4.tgz)包;网页右上角Tarball链接也能提供下载。 ```bash npm install #此时会报错找不到@csii/vx-web,再执行离线安装命令 npm install ./vx-web-0.0.1-alpha.4.tgz ``` 也可直接在外网执行npm install 再将node_modules目录拷贝到内网。 ### 2、引入 @csii/vx-web 你可以引入整个 @csii/vx-web,或根据需要仅引入部分组件。先介绍如何引入完整的 @csii/vx-web。 #### 2.1、完整引入 在 main.js 中写入以下内容: ```javascript import Vue from 'vue'; import CSIIVxWeb from '@csii/vx-web'; import '@csii/vx-web/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(CSIIVxWeb); new Vue({ el: '#app', render: h => h(App) }); ``` 以上代码便完成了 @csii/vx-web 的引入。需要注意的是,样式文件需要单独引入。 #### 2.2、按需引入 借助 [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component),我们可以只引入需要的组件,以达到减小项目体积的目的。 首先,安装 babel-plugin-component: ```bash npm install babel-plugin-component -D ``` 然后,将 .babelrc 修改为: ```json { "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "@csii/vx-web", "styleLibraryName": "theme-chalk" } ] ] } ``` 接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容: ```javascript import Vue from 'vue'; import { Button, Select } from '@csii/vx-web'; import App from './App.vue'; Vue.component(Button.name, Button); Vue.component(Select.name, Select); /* 或写为 * Vue.use(Button) * Vue.use(Select) */ new Vue({ el: '#app', render: h => h(App) }); ``` 完整组件列表和引入方式(完整组件列表以 [components.json]() 为准) ```javascript import Vue from 'vue'; import { Pagination, Dialog, Autocomplete, Dropdown, DropdownMenu, DropdownItem, Menu, Submenu, MenuItem, MenuItemGroup, Input, InputNumber, Radio, RadioGroup, RadioButton, Checkbox, CheckboxButton, CheckboxGroup, Switch, Select, Option, OptionGroup, Button, ButtonGroup, Table, TableColumn, DatePicker, TimeSelect, TimePicker, Popover, Tooltip, Breadcrumb, BreadcrumbItem, Form, FormItem, Tabs, TabPane, Tag, Tree, Alert, Slider, Icon, Row, Col, Upload, Progress, Spinner, Badge, Card, Rate, Steps, Step, Carousel, CarouselItem, Collapse, CollapseItem, Cascader, ColorPicker, Transfer, Container, Header, Aside, Main, Footer, Timeline, TimelineItem, Link, Divider, Image, Calendar, Backtop, PageHeader, CascaderPanel, Loading, MessageBox, Message, Notification } from '@csii/vx-web'; Vue.use(Pagination); Vue.use(Dialog); Vue.use(Autocomplete); Vue.use(Dropdown); Vue.use(DropdownMenu); Vue.use(DropdownItem); Vue.use(Menu); Vue.use(Submenu); Vue.use(MenuItem); Vue.use(MenuItemGroup); Vue.use(Input); Vue.use(InputNumber); Vue.use(Radio); Vue.use(RadioGroup); Vue.use(RadioButton); Vue.use(Checkbox); Vue.use(CheckboxButton); Vue.use(CheckboxGroup); Vue.use(Switch); Vue.use(Select); Vue.use(Option); Vue.use(OptionGroup); Vue.use(Button); Vue.use(ButtonGroup); Vue.use(Table); Vue.use(TableColumn); Vue.use(DatePicker); Vue.use(TimeSelect); Vue.use(TimePicker); Vue.use(Popover); Vue.use(Tooltip); Vue.use(Breadcrumb); Vue.use(BreadcrumbItem); Vue.use(Form); Vue.use(FormItem); Vue.use(Tabs); Vue.use(TabPane); Vue.use(Tag); Vue.use(Tree); Vue.use(Alert); Vue.use(Slider); Vue.use(Icon); Vue.use(Row); Vue.use(Col); Vue.use(Upload); Vue.use(Progress); Vue.use(Spinner); Vue.use(Badge); Vue.use(Card); Vue.use(Rate); Vue.use(Steps); Vue.use(Step); Vue.use(Carousel); Vue.use(CarouselItem); Vue.use(Collapse); Vue.use(CollapseItem); Vue.use(Cascader); Vue.use(ColorPicker); Vue.use(Transfer); Vue.use(Container); Vue.use(Header); Vue.use(Aside); Vue.use(Main); Vue.use(Footer); Vue.use(Timeline); Vue.use(TimelineItem); Vue.use(Link); Vue.use(Divider); Vue.use(Image); Vue.use(Calendar); Vue.use(Backtop); Vue.use(PageHeader); Vue.use(CascaderPanel); Vue.use(Loading.directive); Vue.prototype.$loading = Loading.service; Vue.prototype.$msgbox = MessageBox; Vue.prototype.$alert = MessageBox.alert; Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$prompt = MessageBox.prompt; Vue.prototype.$notify = Notification; Vue.prototype.$message = Message; ``` ### 3、全局配置 在引入 @csii/vx-web 时,可以传入一个全局配置对象。该对象目前支持 `size` 与 `zIndex` 字段。`size` 用于改变组件的默认尺寸,`zIndex` 设置弹框的初始 z-index(默认值:2000)。按照引入 @csii/vx-web 的方式,具体操作如下: 3.1、完整引入 @csii/vx-web: ```js import Vue from 'vue'; import CSIIVxWeb from '@csii/vx-web'; Vue.use(CSIIVxWeb, { size: 'small', zIndex: 3000 }); ``` 3.2、按需引入 @csii/vx-web: ```js import Vue from 'vue'; import { Button } from '@csii/vx-web'; Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 }; Vue.use(Button); ``` 按照以上设置,项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small',弹框的初始 z-index 为 3000。 ### 4、开始使用 至此,一个基于 Vue 和 @csii/vx-web 的开发环境已经搭建完毕,现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。