Vue2+Vant2 项目初学

Vant 2 - Mobile UI Components built on Vue
Vue.js 安装 | 菜鸟教程

// 通过脚手架安装

// 在新项目中使用 Vant 时，推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目并安装 Vant。

// # 安装 Vue Cli

// npm install -g @vue/cli

// # 创建一个项目

// vue create hello-world

import Vue from 'vue'

import App from './App.vue'

// 在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：

// # Vue 3 项目，安装最新版 Vant：

// npm i vant -S

// # Vue 2 项目，安装 Vant 2：

// npm i vant@latest-v2 -S

import Vant from 'vant'

import 'vant/lib/index.css'

//根据vue的版本安装vue-router ,比如 ：vue 2.6.14，安装插件 Fitten Code,后直接问 Fitten Code：vue 2.6.14 怎么安装vue-router，会给出相应的方法

//npm install vue-router@3.5.1

import Router from 'vue-router'

import axios from 'axios'

Vue.prototype.$axios = axios

axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '/' : '/api' //http://stqmf.fzdcit.cn/

axios.defaults.timeout = 30000,

//import { Toast } from 'vant'; // 按需引入组件

Vue.config.productionTip = false

Vue.use(Vant);

Vue.use(Router);

const routes = [

  {

    name: 'btn',

    path: '/btn',

    component: () => import('./components/ButtonVant.vue'),

    // meta: {

    //   title: 'APP管理',

    //   login: true,

    // }

  },  

  {

    name: 'cell',

    path: '/cell',

    component: () => import('./components/CellTest.vue'),

    // meta: {

    //   title: 'WIFI设置',

    //   login: false,

    // }

  }

   

];

const router = new Router({ routes });

new Vue({

  router,

  render: h => h(App),

}).$mount('#app')