swan-ui需要与phoenix-styles样式库配合使用,分别引入组件和样式。
推荐组件用按需引入的方式,样式可根据需要选择合适的方式。
<!-- 引入样式 --> <link rel="stylesheet" href="http://future-team.github.io/phoenix-styles/dist/phoenix-styles.min.css" /> <!-- 移动端适配 --> <script type="text/javascript" src="https://www.dpfile.com/app/gfs-viewport/gfs-viewport.js"></script> <!-- 引入Vue --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- 引入组件库 --> <script src="http://future-team.github.io/swan-ui/lib/index.js"></script>
<template> <div id="app"> <sw-button @click="visible = true" block>按钮</sw-button> <sw-dialog v-model="visible" title="Hello world"> <p>欢迎使用 Swan UI</p> </sw-dialog> </div> <template> <script> new Vue({ el: '#app', data: function(){ return { visible: false } } }) </script>
$ npm install swan-ui --save
$ npm install phoenix-styles --save
import Vue from 'vue' import SwanUI from 'swan-ui' Vue.use(SwanUI)
import Vue from 'vue' import { Button, Star} from 'swan-ui' //import Button from 'swan-ui/lib/Button' //import Star from 'swan-ui/lib/Star' Vue.component(Button.name,Button) Vue.component(Star.name,Star)
<!-- html引入 --> <link rel="stylesheet" href="http://future-team.github.io/phoenix-styles/dist/phoenix-styles.min.css" />
<style lang="less" src="phoenix-styles/less/phoenix-styles.less">或者在js文件中引入
<!-- 全部引入 --> import 'phoenix-styles/dist/phoenix-styles.min.css' <!-- 按需引入 --> import 'phoenix-styles/less/modules/buttons.less' <!-- 全部引入 --> import 'phoenix-styles/less/phoenix-styles.less'另外,如果要换成ios主题的皮肤,可引入
import 'phoenix-styles/dist/ios-skin.min.css'