当前位置: 首页 > article >正文

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://xxxxx/

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

跨域请求,在vue.config.js里添加

module.exports = {

  devServer: {

    // host: 'localhost', // 你可以设置为你想要的主机地址,例如 '0.0.0.0' 来允许外部访问

    // port: 8081, // 设置开发服务器的端口号

    // open: true ,// 设置为 true 可以在启动开发服务器后自动打开浏览器

    proxy: {

      '/api': {

        target: 'https://xxxx.xx.cn', // 目标服务器

        changeOrigin: true, // 是否改变请求的源头

        pathRewrite: { '^/api': '' } // 重写路径

      }

    }

  }

};

fetchData() {

      this.$axios.get('/api/User/heartBeat')

        .then(response => {

          console.log(response.data);

        })

        .catch(error => {

          console.error(error);

        });

    }


http://www.kler.cn/a/587715.html

相关文章:

  • 故障诊断——neo4j入门
  • centos7通过yum安装redis
  • golang算法回溯
  • spring boot 发送邮件验证码
  • 解锁健康密码:拥抱养生,重塑生活
  • python笔记2
  • Ubuntu 18,04 LTS 通过APT安装mips64el的交叉编译器。
  • TCP/IP四层网络模型
  • 玩转github
  • c#Winform也可以跨平台了GTK框架GTKSystem.Windows.Forms
  • 跳跃游戏 (leetcode 55
  • 012---状态机的基本知识
  • 《从零手写Linux Shell:详解进程控制、环境变量与内建命令实现 --- 持续更新》
  • 解决Windows版Redis无法远程连接的问题
  • Dify Docker 私有化部署遇到的问题
  • STM32步进电机S型与T型加减速算法
  • Profinet转Profinet以创新网关模块为核心搭建西门子和欧姆龙PLC稳定通讯架构案例​
  • 玩转python:通俗易懂掌握高级数据结构-collections模块之ChainMap
  • 2Android中的AIDL是什么以及如何使用它
  • 【数学基础】线性代数#1向量和矩阵初步