import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { 
  Button, 
  Search, 
  NavBar, 
  Icon, 
  Cell, 
  CellGroup, 
  Image as VanImage, 
  Grid, 
  GridItem,
  Toast,
  Dialog,
  Tag,
  Divider,
  Field
} from 'vant'

// 导入自定义组件
import AppImage from './components/AppImage.vue'

// 引入样式
import 'vant/lib/index.css'
// 引入全局样式
import './assets/styles.css'

// 注册Vant组件
Vue.use(Button)
Vue.use(Search)
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(VanImage)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Toast)
Vue.use(Dialog)
Vue.use(Tag)
Vue.use(Divider)
Vue.use(Field)

// 注册全局组件
Vue.component('AppImage', AppImage)

Vue.config.productionTip = false

// 移动端适配
function setRem() {
  const html = document.documentElement
  const width = html.clientWidth
  const fontSize = width / 10
  html.style.fontSize = fontSize + 'px'
}

window.onresize = setRem
setRem()

new Vue({
  router,
  render: h => h(App)
}).$mount('#app') 