shmily-drag-image 项目教程

shmily-drag-image 项目教程

shmily-drag-image 项目地址: https://gitcode.com/gh_mirrors/sh/shmily-drag-image

1. 项目目录结构及介绍

shmily-drag-image/
├── pages/
│   └── index/
│       ├── index.vue
├── static/
├── uni_modules/
│   └── shmily-drag-image/
│       ├── components/
│       │   └── shmily-drag-image.vue
│       ├── index.js
│       ├── package.json
├── .gitignore
├── App.vue
├── main.js
├── manifest.json
├── pages.json
├── uni.scss
└── README.md

目录结构说明

• pages/: 存放项目的页面文件，index 目录下是首页的 Vue 文件。
• static/: 存放静态资源文件，如图片等。
• uni_modules/: 存放 uni-app 模块，shmily-drag-image 是本项目的核心模块，包含组件和相关配置文件。
• .gitignore: Git 忽略文件配置。
• App.vue: 项目的根组件。
• main.js: 项目的入口文件。
• manifest.json: 项目的配置文件，包含应用的基本信息、图标、启动页面等。
• pages.json: 页面路由配置文件。
• uni.scss: 项目的全局样式文件。
• README.md: 项目的说明文档。

2. 项目启动文件介绍

main.js

main.js 是项目的入口文件，负责初始化 Vue 实例并挂载到 DOM 上。以下是 main.js 的基本结构：

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})

app.$mount()

文件说明

• Vue.config.productionTip: 设置为 false 以关闭生产环境提示。
• App.mpType: 设置为 'app'，表示这是一个 uni-app 项目。
• app.$mount(): 挂载 Vue 实例到 DOM 上。

3. 项目的配置文件介绍

manifest.json

manifest.json 是 uni-app 项目的配置文件，包含应用的基本信息、图标、启动页面等。以下是 manifest.json 的基本结构：

{
  "name": "shmily-drag-image",
  "appid": "__UNI__XXXXXX",
  "description": "uni-app 图片拖拽排序插件",
  "versionName": "1.0.0",
  "versionCode": "100",
  "transformPx": false,
  "app-plus": {
    "modules": {},
    "distribute": {
      "android": {},
      "ios": {}
    }
  },
  "quickapp": {},
  "mp-weixin": {
    "appid": "wxXXXXXXXX",
    "setting": {
      "urlCheck": true
    }
  }
}

配置说明

• name: 应用名称。
• appid: 应用的唯一标识符。
• description: 应用描述。
• versionName: 版本名称。
• versionCode: 版本号。
• transformPx: 是否转换 px 为 rpx。
• app-plus: 配置应用的模块和分发信息。
• mp-weixin: 微信小程序的配置，包括 appid 和 setting。

通过以上配置，可以确保项目在不同平台上的正常运行和分发。

shmily-drag-image 项目地址: https://gitcode.com/gh_mirrors/sh/shmily-drag-image