web-style文檔

下載

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前引入.

<script src="path/to/vue.js"></script>
<script src="path/to/web-style.js"></script>
<script>
    var app = new Vue({
        el: "body",
        components: {
            alert: VueStrap.alert
        }
    })
</script>

編譯CSS 和 JavaScript 文件

Web-Style 使用 webpack 做爲編譯系統, 而且對外提供了一些方便的方法用於編譯整個框架。

安裝依賴

推薦使用 cnpm 安裝依賴

$ cnpm install

打包公共的樣式

$ npm run static

該指令執行後會把 assets/ 下的文件打包到 static/ 這樣作的目的是在開發的時候無需重複打包公共部分, 提高編譯效率。一旦修改assets/ 必定要第執行該指令

開發模式

$ npm run dev

本地開啓一個服務器, 自動打開瀏覽器訪問index.html文件, 進行開發vue組件

打包文件

$ npm run build

會打包全部組件和公共的樣式生成到dist目錄下。