web-style文档

WilsonLiu95 发布于2019-08-21 14:07 / 1848人阅读

摘要：下载推荐使用下载或者访问内容说明编译文件是通过进行打包编译。一旦修改一定要第执行该指令开发模式本地开启一个服务器自动打开浏览器访问文件进行开发组件打包文件会打包所有组件和公共的样式生成到目录下。

下载 npm

Web-Style 推荐使用 npm 下载或者访问 Web-Style

$ npm install web-style  --save

内容说明 编译文件

Web-Style 是通过 webpack 进行打包编译。采用了 ESLint 规范。编译文件都在dist目录下, 目录结构:

dist/
├── css/
│   └─ web-style.css
├── js/
│   └─ web-style.js
└── fonts/
    ├─ iconfont.eot
    ├─ iconfont.svg
    ├─ iconfont.ttf
    └─ iconfont.woff

上面展示的就是Web-Style编译文件, 编译文件可以直接使用到任何web项目中. 提供了编译好的css文件, 包括基础样式和组件的样式。提供了编译好的vue组件同时还提供了一套 iconfont 的图标字体

源文件

Web-Style 源文件目录结构:

src/
├── assets/
│   ├─ sass/
│   └─ fonts/
└── components/

assets 下存放公共的样式和字体文件, 采用 sass 预编译以及采用 autoprefixer 添加兼容性的前缀

使用方法 ES6

import Vue from "vue"
import { Message } from "Web-style"

new Vue({
    el: "body",
    components:{
       "v-message": Message
    }
})

浏览器使用

Web-Style 依赖 vue , 必须在 web-style前引入.

编译CSS 和 JavaScript 文件

Web-Style 使用 webpack 作为编译系统, 并且对外提供了一些方便的方法用于编译整个框架。

安装依赖

推荐使用 cnpm 安装依赖

$ cnpm install

打包公共的样式

$ npm run static

该指令执行后会把 assets/ 下的文件打包到 static/ 这样做的目的是在开发的时候无需重复打包公共部分, 提升编译效率。一旦修改assets/ 一定要第执行该指令

开发模式

$ npm run dev

本地开启一个服务器, 自动打开浏览器访问index.html文件, 进行开发vue组件

打包文件

$ npm run build

会打包所有组件和公共的样式生成到dist目录下。

云服务器 GPU云服务器文档办公存储文档软件文档文档服务

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87803.html

web-style文档

摘要：下载推荐使用下载或者访问内容说明编译文件是通过进行打包编译。一旦修改一定要第执行该指令开发模式本地开启一个服务器自动打开浏览器访问文件进行开发组件打包文件会打包所有组件和公共的样式生成到目录下。下载 npm Web-Style 推荐使用 npm 下载或者访问 Web-Style $ npm install web-style --save 内容说明编译文件 Web-Style 是...

mj 2019-08-29 11:02 评论0 收藏0
vue组件系列－气泡卡片

摘要：但是在用来展示小体量的信息时我认为它是过于庞大的，我们可以采用更优雅的气泡卡片来展示那些小体量的信息。其他都是子组件的自身数据，用于控制气泡卡片的显示隐藏和位置。从模态弹框讲起前端攻城?️对模态弹框肯定很熟悉，不管是套用bootstrap的还是自己写的，它常用来完成与用户的展示交互和处理一些数理逻辑。但是在用来展示小体量的信息时我认为它是过于庞大的，我们可以采用更优雅的气泡卡片来展...

sanyang 2019-08-19 18:38 评论0 收藏0
vue一步步实现alert功能。

摘要：原生框样式丑陋。有一定自适应的设计。在内部是一个垂直居中的框大小可以固定。在小屏上屏幕宽度小于取消了固定宽度。不希望每次都一个实例。是默认的模版标记。接受一个的参数配置。代码这一段代码作用是一开始就把实例插入到底部方便直接调用。原生alert的缺点会阻塞一切操作，影响用户体验很多浏览器会默认静止alert，例如微信。原生alert框样式丑陋。 showImg(https:/...

BDEEFE 2019-08-19 18:30 评论0 收藏0
vue组件系列－Tags input

摘要：前言最近做后台系统的组件化开发，借机和二胖手同学一起开发了一个基于的开源组件库，方便后期使用，目前该项目正在持续开发中。前言最近做后台系统的组件化开发，借机和@二胖手同学一起开发了一个基于vue的开源组件库，方便后期使用，目前该项目正在持续开发中。介绍大家可能遇到过一种需求，让用户输入以某个特殊字符分隔的字符串，如java,php就是以西文逗号分隔，这种输入需要用户自行添加内容...

newtrek 2019-08-19 18:36 评论0 收藏0
Wizard 开源文档管理系统1.0发布啦

摘要：总结如果你在为公司寻找一款开源免费的开发文档文档管理工具，不妨考虑一下项目，一定不会让你失望的。 Wizard 是一款开源文档管理系统，项目地址为 https://github.com/mylxsw/wizard。这个项目是我在2017年就开始开发的，起初只是想做一款能够在公司内部把Swagger文档管理起来的工具，但在这近两年的时间里，一直断断续续的为其添加各种功能，现在终于下决...

cod7ce 2019-07-01 12:44 评论0 收藏0