uniapp学习（遇到的坑）

~林十一

已于 2022-08-11 12:02:50 修改

阅读量2.1k

点赞数 5

分类专栏： uniapp 文章标签：学习

于 2022-07-28 16:42:19 首次发布

本文链接：https://blog.csdn.net/weixin_58896221/article/details/126038069

版权

uni.chooseImage(OBJECT)

uniapp适配不同端的写法

使用vant组件库

初步引用之疯狂报错vue2版本

之前使用原生写的uniapp,组件也是uniapp提供的内外部组件，突然想用一下组件写个项目，结果刚开始引入的时候就疯狂的报错

vant官网Vant 2 - Mobile UI Components built on Vue

原文是这样写的

# Vue 2 项目，安装 Vant 2：

npm i vant@latest-v2 -S

// main.js中

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

Vue.use(Vant);

结果报错就开始了

然后搜了一下有说在app.vue中引入vant.css文件的有说找文件在url前面加逗号，结果都没解决问题，然后捣鼓了一下又报了一个

require is not defined

就是报错不断，最后找了半天才发现

首先是vant的版本问题

下载2.10版本，都是踩坑过来的，你要是想踩一遍不拦着，

// main.js

import Vant from 'vant';

Vue.use(Vant);

// app.vue

@import 'vant/lib/index.css';

在css样式中引入

就可以没有报错，组件可以正常显示。

关于vant直接使用Toast组件

直接引用Toast会报

只要这样就可以解决

this.$toast.fail('登录失败');

使用axios

npm install axios --save

// main.js

import axios from 'axios'

Vue.prototype.$axios = axios

使用mockjs

npm install mockjs --save-dev

// 新建文件夹mock新建文件index.js
测试数据
let mock = require('mockjs')
let a = {
	status: 200,
	data: [
		{
			a: 1
		}
	]
}
mock.mock('/user/list','get',a)

// 测试

async demo(){

const res = await this.$axios.get('/user/list')

console.log(res)

}

正常请求

使用vuex

uniapp本身应该就带有vuex，所以我们不需要像开发vue项目那样还需要下载包，可以直接引用

在根目录下创建store文件夹，然后创建index.js文件，之后就是跟vue 那种引入

// 在index.js中写（个人比较懒，自己的项目所以vue都是小写，有需要的可以改为大写）
import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex)
const store = new vuex.Store({
	state: {
		num: 'vuex的数据'
	},
	mutations: {
		// login(state,val){}
	},
	actions: {}
})
export default store

// 然后就是在main.js中引入
import store from './store'

Vue.prototype.$store = store

import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app,
	store
  }
}