vant-ui 引入

vant引入方式

一. vant ui 完整引入方式

1. 安装依赖包

   yarn add vant -S

2. 在main.js中引入依赖样式

   import Vue from 'vue';
   import Vant from 'vant';
   import 'vant/lib/index.css'
   Vue.use(vant)

3. 直接使用组件

   默认按钮(白色)
   主要按钮(绿色)
   信息按钮(蓝色)
   警告按钮(黄色)
   危险按钮(红色)

二. vant ui 的按需引入方式

1. 安装依赖包

   yarn add vant -S

2. 按需引入依赖包

   yarn add babel-plugin-import -D

3. 在babel.config.js里配置

   plugins: [
   ['import', {
   libraryName: 'vant',
   libraryDirectory: 'es',
   style: true
   }, 'vant']
   ]

4. 再main.js里引入

   import { Button, NavBar } from 'vant';​
   Vue.use(Button).use(NavBar)

5. 在需要的地方直接引入 vant组件库

   www.w3cschool.cn/vantlesson/…

vue-router 路由

1. 使用import引入vue-router

2. 使用vue.use(VueRouter)

3. 引入.vue类型的组件

4. 实例化路由的对象

5. 配置路由的规则

6. 挂载路由

7. 占坑

在index.html页面里, 把script引入改成 App.vue

main.js打包的时候会自动引入到index.html中

  1. router/index.js----页面之间的跳转
  2. plugins/ vant.js ---- 做组件引入
  3. api/index.js ---- 路径地址 '127.0.0.1:8080' 引入后台数据地址
  4. page/hone.vue ---- 组件配置存放位置

axios 常见的使用方式

1. 哪里使用放哪里

2. 配置根路径并挂载在对象的原型上

   // api.js文件中 import axios from 'axios' import Vue from 'vue' axios.defaults.baseURL = "http://127.0.0.1:8888" Vue.prototype.Api = { // 轮播图 getLunbo(params) { return axios.get('/api/getlunbo', params) }, }

   // home.vue文件中 export default { data: () => ({ lunbolist: [] }), created() { this.getLunbo() }, methods: { async getLunbo() { try { const { data: { message }, } = await this.Api.getLunbo(); this.lunbolist = message; } catch (error) { this.$Toast("轮播图请求失败..."); } } } };