如何搭建小程序项目，uniApp搭建，uView组件库的引入和请求配置

当使用uni-app搭建项目时，不注意就版本出现问题，这里直接保姆式说说

一：uni-app搭建项目

        1.下载 vue-cli 脚手架版本为4的；

 npm install -g @vue/cli@4（下载的话可以忽略）

        2.创建项目（尾部是项目名-自定义即可），选择默认模板；

 vue create -p dcloudio/uni-preset-vue my-project

        3.切换到当前创建的项目并运行即可；

cd my-project

npm run serve   (网页显示)

npm run dev:mp-weixin  （这是微信小程序开发运行）

        4. manifest.json文件中配置自己的appid

"mp-weixin": {

    /* 微信小程序特有相关 */

    "appid": "？？？？？？",

     。。。。。。

  },

二：微信开发工具导入文件

        1.运行了npm run dev:mp-weixin后会出现一个 dist文件；

        2.导入 dist 文件中的 mp-weixin文件（整个文件）；

        3.接下来开发就直接在vscode上进行就可以了；

三： 安装 uView组件库

        1.通过命令直接安装 sass、sass-loader@10、uView-ui@1包，（有可能会没安上，记得重新安装即可）；

npm i sass sass-loader@10 uview-ui@1

        2.页面进行相应的配置（看官方文档配置都可-建议直接看这里-省时间）

         2.1：main.js文件中引入并使用uView的JS库

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

        2.2：uni.scss文件中引入uView的全局SCSS主题文件

@import 'uview-ui/theme.scss';

        3.3：App.vue文件中引入uView基础样式

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

        3.4：pages.json文件中配置easycom技术

"easycom": {
    "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
  },
// 记得在pages前引入

三：使用 uView中的请求方法封装

        1.创建common/http.interceptor.js 文件用来存放封装的方法

// 这里的Vue为Vue对象(非创建出来的实例)，vm为main.js中“Vue.use(httpInterceptor, app)”这一句的第二个参数，
// 为一个Vue的实例，也即每个页面的"this"
// 如果需要了解这个install方法是什么，请移步：https://uviewui.com/components/vueUse.html
const install = (Vue, vm) => {
  // 此为自定义配置参数，具体参数见上方说明
  Vue.prototype.$u.http.setConfig({
    baseUrl: '放置请求根路径',
    loadingText: '努力加载中~',
    loadingTime: 800,
    // 设置自定义头部content-type
    // header: {
    // 	'content-type': 'xxx'
    // }
    // ......
  });
};

export default {
  install,
};

        2.main.js文件中引入（引入必须在const app后面引入）

// http拦截器，此为需要加入的内容，如果不是写在common目录，请自行修改引入路径
import httpInterceptor from '@/common/http.interceptor.js'
// 这里需要写在最后，是为了等Vue创建对象完成，引入"app"对象(也即页面的"this"实例)
Vue.use(httpInterceptor, app)

        3.使用uView发起请求

methods: {
    async name() {
      const { message } = await this.$u.post('url',{id:'111'});
      console.log(message);
    },
  },

总结：以上就是简单的uniap项目搭建，文档也是有详细的操作流程，跟着流程走就可以