使用vue-cli创建uni-app项目_vuecli创建uniapp项目

1.全局安装vue-cli

npm install -g @vue/cli

2.创建uni-app

vue create -p dcloudio/uni-preset-vue my-project
通过键盘箭头上下键选择模板,建议选择默认模板

项目结构如图所示

3.封装项目请求

import base from './base'

//发送数据
 const sendRequest = (url,options)=>{
    return new Promise((resolve,reject) =>{
      uni.request({
          url:base.baseUrl + url,
          method: options.method,
          data:options.method === 'GET' ? options.data : JSON.stringify(options.data),
          header: {
              'content-type':'application/json;charset=UTF-8',
               "Authorization": uni.getStorageSync('userId') ? uni.getStorageSync('userId') : "",
          },
          success: (res) => {
              if (res.statusCode === 200) {
				  if(res.data.returnCode === "0000000" || res.data.returnCode === "9990000" || res.data.returnCode === "0038802"|| res.data.returnCode === "0038803"){
					  resolve( res.data)
				  }else if(res.data.returnCode === "0030000"){
                      // token失效
                      // uni.showToast({
                      // 	title:"登录过期，请重新登录",
                      //   icon:'none',
                      //   duration:1500
                      // })
                      uni.showModal({
                          title: '提示',
                          content: '登录过期，请重新登录',
                          success: function (res) {
                              if (res.confirm) {
                                  uni.redirectTo({url: "/pages/login/index"});
                              } else if (res.cancel) {
                                  uni.switchTab({url: "/pages/work/index"});
                              }
                          }
                      });
                      resolve(res.data);
                  }else{
					  uni.showToast({
					  	title:res.data.returnMessage,
						icon:'none',
						duration:1500
					  })
					  reject(res.data)
				  }
              }
          },
          fail: () => {
              console.log("请求失败,请稍候重试")
              uni.hideLoading();
              uni.showToast({
                  title: 'net error!',
                  icon: 'none',
                  duration: 1500
              });
          }
      });
        
   })
}

const get = (url, options = {}) => {
    return sendRequest(url, { method: 'GET', data: options })
}

const post = (url, options) => {
    return sendRequest(url, { method: 'POST', data: options })
}

const del = (url, options) => {
    return sendRequest(url, { method: 'DELETE', data: options })
}
  
const put = (url, options) => {
    return sendRequest(url, { method: 'PUT', data: options })
}

module.exports =  {
	get,
    post,
    del,
    put
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

4.引用UI框架——uView

如果使用HBuilder X编辑器，请在HBuilder X菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装， 如不生效，重启HX即可。因为项目采用vue-cli创建的，所以须通过以下命令安装对sass(scss)的支持。

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

// 安装sass-loader
npm i sass-loader -D
1
2
3
4
5

安装uview

//安装方式：npm安装
npm install uview-ui
1
2

配置uview：
1、入口文件main.js中，引入并使用uView的JS库

import uView from "uview-ui";
Vue.use(uView);
1
2

2、 引入uView的全局SCSS主题文件，在根目录uni.scss文件中引入

/* uni.scss */
@import 'uview-ui/theme.scss';
1
2

3、引入uView基础样式，在App.vue首行引入

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

4、在pages.json中 配置easycom组件模式

"easycom": {
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
1
2
3

可用于微信小程序、安卓app等应用开发。