新建 uni-app项目

新建 uni-app项目

备忘录，记录下创建uni项目步骤

1.安装手动创建 uniapp项目

vue3、vite、ts

npx degit dcloudio/uni-preset-vue#vite-ts my-uni-app

cd 进入项目

2.下载依赖

npm i

或者

pnpm install

3.下@dcloudio/uni-ui

pnpm i @dcloudio/uni-ui

4.下载uni的TS相关的辅助提示包

pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types

5. 基本项目创建完成，预览看下效果

pnpm dev:mp-weixin

执行完成以后命令行中会提示，打开微信开发者工具，将项目中的dist\dev\[项目名] 文件导入，完成以上步骤以后可以在微信开发者工具中看到uni 的logo.

6.下载Less

 pnpm i less

下载完成后，在项目中测试下，在src下新建common文件夹，继续在common下新建css文件，在css文件中新建global.less全局文件。

然后再less文件中随便写点样式，例如一下示例：

//这些都是less的自定义变量,都在可以全局使用
@data-color-cyan: #70FFE1;
@data-color-green: #00D08F;
@data-color-orange: #FA6400;
@user-state-orange: #FE824C;

@big-size: 30px;
@large-size: 25px;
@default-size: 20px;
@small-size: 15px;
@mini-size: 10px;

.cursor-pointer {
    cursor: pointer;
}

然后找到src/pages/index/index.vue文件添加标签和样式，查看页面效果

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png" />
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <span class="cursor-pointer">测试</span>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const title = ref('Hello');

</script>

<style lang="less">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: @data-color-cyan;
}
</style>

在vite.config.ts中添加全局样式

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [uni()],
  css: {
    // css预处理器
    preprocessorOptions: {
      less: {
        charset: false,
        additionalData: '@import "./src/common/css/global.less";',
      },
    },
  },
});

在页面中查看效果，不想用命令行，就下载HBuilder X，然后再HBuilder X里启动项目。

 pnpm dev:h5

运行正常，控制台中也可以看到less样式加载正常。

7.配置tsconfig.ts

前面下载了@types/wechat-miniprogram，@uni-helper/uni-app-types两个插件，需要在tsconfig里配置下，要不然不生效。

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "ignoreDeprecations": "5.0",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": ["@dcloudio/types",
    "@types/wechat-miniprogram", // 配置1
    "@uni-helper/uni-app-types" // 配置2 
    ]
  },
  "vueCompilerOptions": {
    "nativeTags": ["block", "component", "template", "slot"] // 配置3
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/stores/count.ts", "src/request/index.js"]
}

8.pinia下载

pnpm install pinia

下载完成后，在src目录下新建stores文件夹文件夹中新建两个文件，简单写下内容：

1.count.ts

import {    defineStore  } from 'pinia';
  
  // 定义并导出容器
  // 参数1：store id
  // 参数2：选项对象
  const useCounter = defineStore('count', {
    state: () => { 
      return {
        count: 100,
        age: 20,
        books: ['vue', 'react', 'svelte',121212],
        obj:{
          "key":111,
          "name":"xiaoming",
          "color":[11111],
        },
      }
    },
    getters: {
      // NOTE getters 使用了 this，需要手动声明返回值类型
      booksStr(state): string {
        console.log(state.books)
        return this.books.join('--')
      },
    },
    actions: {
      complexChange(step: number) {
        this.age += step
        this.books.push('solidjs', 'lit')
      },
    },
  });

  
export default useCounter;

2.index.ts

import { createPinia } from "pinia"; //引入pinia
 
const stores = createPinia(); //创建pinia实例
 
export default stores; //导出pinia用于main.js注册

3.引入到main.ts中

import { createApp } from 'vue';
import App from './App.vue';
import stores from './stores';  //引入
const app = createApp(App);

app.use(stores); 
app.mount('#app');

然后回到index.vue中测试是否生效

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png" />
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <span class="cursor-pointer">测试</span>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import useCounter from "@/stores/count"; //引入仓库;
import { storeToRefs } from "pinia"; //引入pinia转换


const useCount = useCounter();
const {age,books,booksStr } = storeToRefs(useCount); // 响应式

const title = ref('Hello');

console.log(
  age.value,
  books.value,
  booksStr.value
);

</script>

<style lang="less">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: @data-color-cyan;
}
</style>

在浏览中查看是否打印生效

9.配置接口

关于请求接口的封装从网上一搜一大堆，这里自己就记录下自己从网上找的用的。

在src下新建reques文件，接着新建一下两个文件：

1.api.js

// 全局请求封装
import { BASE_URL } from "@/common/js/config";
// 请求超出时间
const timeout = 5000;

// 需要修改token，和根据实际修改请求头
export default (params) => {
    let url = params.url;
    let method = params.method || "get";
    let data = params.data || {};
    let header = {
        'Content-Type': 'application/json;charset=UTF-8',
        'Authorization': 'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
        ...params.header
    }
    if (method == "post") {
        header = {
            'Content-Type': 'multipart/form-data' // 自定义，跟后台约定好传什么格式的
        };
    }
    return new Promise((resolve, reject) => {
        uni.request({
            url: BASE_URL + url,
            method: method,
            header: header,
            data: data,
            timeout,
            success(response) {
                const res = response
                // 根据返回的状态码做出对应的操作
                //获取成功
                if (res.statusCode == 200) {
                    resolve(res.data);
                } else {
                    uni.clearStorageSync()
                    switch (res.statusCode) {
                        case 401:
                            uni.showModal({
                                title: "提示",
                                content: "请登录",
                                showCancel: false,
                                success() {
                                    // setTimeout(() => {
                                    //     uni.navigateTo({
                                    //         url: "/pages/login/index",
                                    //     })
                                    // }, 1000);
                                },
                            });
                            break;
                        case 404:
                            uni.showToast({
                                title: '请求地址不存在...',
                                duration: 2000,
                            })
                            break;
                        default:
                            uni.showToast({
                                title: '请重试...',
                                duration: 2000,
                            })
                            break;
                    }
                }
            },
            fail(err) {
                console.log(err)
                if (err.errMsg.indexOf('request:fail') !== -1) {
                    uni.showToast({
                        title: '网络异常',
                        icon: "error",
                        duration: 2000
                    })
                } else {
                    uni.showToast({
                        title: '服务器错误',
                        duration: 2000
                    })
                }
                reject(err);
            },
            complete() {
                // 不管成功还是失败都会执行
                uni.hideLoading();
                uni.hideToast();
            }
        });
    }).catch(() => {

    });
};

2.index.js

// 引入 request 文件
import request from './index.js';
 
// 分页查询学习列表
export const pageStudyInfo = (params) => {
    return request({
        url: '/study/studyInfo/page',
        method: 'get',
        data: params,
        header: {} // 自定义
    })
}


// 获取学习列表详细信息
export const studyInfoById = (id) => {
    return request({
        url: `/study/studyInfo/${id}`,
        method: 'get',
    })
}

到这里就创建完成。。。。。。好记性真不如烂笔头

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 220,884评论 6赞 513
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 94,212评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 167,351评论 0赞 360
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,412评论 1赞 294
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,438评论 6赞 397
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 52,127评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,714评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,636评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 46,173评论 1赞 319
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,264评论 3赞 339
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,402评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 36,073评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,763评论 3赞 332
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,253评论 0赞 23
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,382评论 1赞 271
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,749评论 3赞 375
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,403评论 2赞 358