Vue2+Vant2 项目初学

发布于:2025-03-16 ⋅ 阅读:(28) ⋅ 点赞:(0)

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')


网站公告

今日签到

点亮在社区的每一天
去签到