vue 模拟商城 vant的使用

新建vue项目

 main.js

import Vue from 'vue'
import App from './App.vue'
import store from "@/store";
import router from "@/router";
import '@/utils/vant-ui';

Vue.config.productionTip = false;

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

app.vue

<template>
  <div id="app">
    <router-view></router-view>
<!--    <van-button type="primary">主要按钮</van-button>-->
<!--    <van-button type="info">信息按钮</van-button>-->
    <van-switch v-model="checked"></van-switch>
    <van-rate v-model="score"></van-rate>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      checked:true,
      score: 5
    }
  }
}
</script>

<style>

</style>

vant-ui.js

import Vue from 'vue'

//Vant组件库，全部导入方式
// npm i vant@latest-v2 -s
// import Vant from 'vant'
// import 'vant/lib/index.css'
// Vue.use(Vant);

//按需导入
import { Button, Switch, Rate } from 'vant'
//注册使用
Vue.use(Button);
Vue.use(Switch);
Vue.use(Rate);

store index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
    modules:{

    }
});

export default store;

router index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

const router = new VueRouter({
    routes:[

    ]
});

export default router;