web-style文檔

mj 發布于2019-08-29 11:02 / 1631人閱讀

摘要：下載推薦使用下載或者訪問內容說明編譯文件是通過進行打包編譯。一旦修改一定要第執行該指令開發模式本地開啟一個服務器自動打開瀏覽器訪問文件進行開發組件打包文件會打包所有組件和公共的樣式生成到目錄下。

下載 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云服務器云服務器文檔辦公存儲文檔軟件文檔文檔服務

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111375.html

web-style文檔

摘要：下載推薦使用下載或者訪問內容說明編譯文件是通過進行打包編譯。一旦修改一定要第執行該指令開發模式本地開啟一個服務器自動打開瀏覽器訪問文件進行開發組件打包文件會打包所有組件和公共的樣式生成到目錄下。下載 npm Web-Style 推薦使用 npm 下載或者訪問 Web-Style $ npm install web-style --save 內容說明編譯文件 Web-Style 是...

WilsonLiu95 2019-08-21 14:07 評論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