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);
});
}