vue2+uniapp+uview 搭建项目

最新推荐文章于 2025-10-10 09:37:34 发布

原创

最新推荐文章于 2025-10-10 09:37:34 发布 · 2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #前端 #前端框架

该文介绍了如何使用Vue2和Uniapp框架结合UviewUI库来创建项目，包括安装配置Uview，设置全局SCSS，以及在main.js中配置默认单位。此外，文章详细讲解了HTTP请求的封装，包括全局配置、请求和响应拦截器的定义，以及错误处理。最后提到了.gitignore文件的创建，以忽略特定的项目文件。

vue2+uniapp+uview 搭建项目

一、uniapp创建项目

在这里插入图片描述

二、安装uView

1、Hbuilder X方式

下载地址：https://ext.dcloud.net.cn/plugin?id=1593
在这里插入图片描述

2、下载安装方式配置

1、安装scss

// 安装sass
	npm i sass -D

// 安装sass-loader
	npm i sass-loader -D

2、引入uView主JS库

// 在项目根目录中的main.js中
	import uView from '@/uni_modules/uview-ui'
	Vue.use(uView)

3、在引入uView的全局SCSS主题文件

// 在项目根目录的uni.scss中引入此文件。
	@import '@/uni_modules/uview-ui/theme.scss';

4、引入uView基础样式

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "@/uni_modules/uview-ui/index.scss";
</style>

5、默认单位配置

// main.js，注意要在use方法之后执行
	import uView from 'uview-ui'
	Vue.use(uView)
// 如此配置即可
	uni.$u.config.unit = 'rpx'

3、Http请求封装

1、全局配置，以及请求，响应拦截器定义

// 在/config/request.js中
// 此vm参数为页面的实例，可以通过它引用vuex中的变量
module.exports = (vm) => {
   
   
	// 初始化请求配置
	uni.$u.http.setConfig((config) => {
   
   
		/* config 为默认全局配置*/
		config