uni-app 开发

Vue2

参考

注 Vue2 创建的项目，脚手架版本要用@4 的版本，用@5 的版本运行项目会报错，这里推荐 @4.5.15

查看 vue-cli 版本

$ vue --version

@vue/cli 4.5.15

安装依赖

npm install -g @vue/cli@4.5.15

创建项目

vue create -p dcloudio/uni-preset-vue 项目名称

等待自动安装依赖包

选择模板

选择默认模板

json 文件可写注释

注: 不要在 package.json 添加注释, 否则编译会出错
配置 jsonc 防止文件警告, 在设置中打开 settings.json ，添加：

1
2
3
4
5
6
7
{
  "files.associations": {
    "pages.json":"jsonc",
    "manifest.json":"jsonc",
    "jsconfig.json":"jsonc",
  }
}

插件

语法提示和高亮

  • uni-app-schemas检验插件

校验 uni-app 中的 androidPrivacy.json 、 pages.json 和 manifest.json 格式`

  • uni-app-snippets提示插件

一键创建页面、组件、分包

  • uni-create-view插件

uni-app + Vue3 + TS 搭建

教程二

创建 vue3 项目

npx degit dcloudio/uni-preset-vue#vite-ts 目录名 // 安装项目
npm install //安装依赖

uni-app 有新版本发布更新@dcloudio 依赖包

npx @dcloudio/uvm alpha

教程一

[(https://www.jianshu.com/p/8cf806f974c3)]

npm install -g @vue/cli 安装更新 vue 脚手架
vue create -p dcloudio/uni-preset-vue#vue3 uni-app-vue3 安装 uni-app 默认模板 (选择 typeScript)

hello-uniapp 示例工程

官方更多版本选择命令 ( vue create -p dcloudio/uni-preset-vue my-project )

可以卸载 > npm uninstall vue-class-component vue-property-decorator 依赖包(非必须)

vue-class-component

配置

更新下版本包

npm install vue@3.2.20 vuex@4.0.2 typescript@4.4.4

报错处理
Cannot find module ‘vue-loader-v16/package.json’ 重新安装下 vue-loader-v16

yarn remove vue-loader-v16 > yarn add vue-loader-v16 选择 2.0.1-alpha-35420220810001版本

error in ./src/main.ts

Syntax Error: TypeError: loaderContext.getOptions is not a function
@ multi (webpack)-dev-server/client?http://192.168.1.208:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

配置 SASS
npm install node-sass@4.0.0 sass-loader@7.3.1 --save-dev

// 如遇到安装问题可手动在 package.json devDependencies 手动中添加
// 删除 node_modules 然后 重新安装 npm install
复制代码

eslint + prettier

配置 eslint + prettier 自动格式化代码

1

配置路径

npm install @types/node --save-dev 安装依赖

在 tsconfig.json 配置 compilerOptions 中增加 "paths": { "@/*": ["src/*"] }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "noImplicitAny": false,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["@dcloudio/types"],
    "baseUrl": ".",
    "paths": {
      //这里配置路径
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

pages.json

pages.json 页面路由
官网说明

页面

官网

页面跳转

1
2
3
uni.navigateTo({
  url: "/pages/QR-code/index"
})

api

依赖包

二维码

vue3 引入

TS

引入报错

tsconfig.json 添加 "noImplicitAny": false ，或者 “strict”: true改为false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": false, //非严格模式
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["@dcloudio/types"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

require 报错

require is not defined

处理跨域

处理一

设置请求头会解决跨域问题

1
2
3
4
5
6
7
8
9
10
11
12
uni.request({
  method: 'POST',
  url: 'api/url',
  header: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  data: params
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

处理二

在 manifest.json 的代码视图中 根节点中配置 h5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"devServer" : {
    // "port" : 8080, //浏览器运行端口
    "https" : false,
    "proxy" : {
        "/baseUrlTest" : {
            "target" : "http://192.168.1.34:8084",
            "changeOrigin" : true,
            "secure" : false,
            "pathRewrite" : {
                "^/baseUrlTest" : ""
            }
        },
        "/baseUrlBuild" : {
            "target" : "http://zhbz-test.xxx.com",
            "changeOrigin" : true,
            "secure" : false,
            "pathRewrite" : {
                "^/baseUrlBuild" : "" //路径重写，将接口路径中以/api开头的部分替换掉
            }
        }
    }
}

开发版配置生产环境配置

1
2
3
4
5
6
7
'cors'=>[
  'Origin' => ['*'], // 允许跨域的请求源
  'Access-Control-Request-Method' => ['*'], // 接收的请求方法
  'Access-Control-Request-Headers' => ['*'], // 请求头接收类型
  'Access-Control-Allow-Credentials' => false,  // 是否允许请求携带 cookie，注意这里如果设置为true，则会报错
  'Access-Control-Max-Age' => 3600 // 缓存，可不设置
]