下载

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目次下。