uni-app开发小程序

uni-app开发小程序

准备阶段命令

创建项目

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

vue-cli版本号@4.5.15

按需引入组件

• npm i sass -D

• npm i sass-loader@10.1.1 -D

• 如：uni-app导入uni-ui

  • npm i @dcloudio/uni-ui

• 在项目根目录下的 pages.json 并添加 easycom 节点

  • // pages.json
    {
    “easycom”: {
    “autoscan”: true,
    “custom”: {
    // uni-ui 规则如下配置
    “^uni-(.*)”: “@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue”
    }
    },

  // 其他内容
  pages:[
  // …
  ]
  }

• 在根目录创建 vue.config.js 文件，并配置如下

  • module.exports = {
    transpileDependencies: [‘@dcloudio/uni-ui’]
    }

• 在.vue文件中可直接引用无需注册

项目结构

ptmini(默认模板)

• public(公共、静态资源)

• src（开发目录）

  • components(存放自定义组件)
  • pages（存放开发页面、组件）
  • static(存放静态资源)
  • app.vue(项目的主组件，即页面入口文件)
  • mian.js(项目入口文件 存储全局变量)
  • pages.json(对 uni-app 进行全局配置)
  • manifest.json(用于提供应用程序相关描述的文件（名称，作者，图标和描述）)

• package.json(项目依赖及版本号)

• package-lock.json(锁定npm install时项目依赖的版本号)

• babel.config.js(向后兼容 ES6转ES5)

• jsconfig.json(VScode js上下文支持)

• postcss.config.js（CSS处理和移动端适配方案）

• vue.config.js（自建）

注意事项

以按需导入导入第三方插件（推荐）

打包时讲uni.scss文件改名为uni_.scss文件在app.vue中重新导入，防止超微信小程序每个分包限制2Mb的傻逼条件