创建uni-app项目

2023-11-23 22:31:34

创建uni-app项目

1.通过vue-cli命令行创建

1.1 使用正式版（对应HBuilderX最新正式版）

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

1.2 使用alpha版（对应HBuilderX最新alpha版）

alpha版相当于尝鲜版本，比最新正式版本多出许多功能。

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

1.3 选择模板

执行了上面命令之后，会提示选择项目模板，这里选择了默认模板

1.4 运行、发布uni-app

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

%PLATFORM% 可取值如下：这里选取了常用的3种

值	平台
app-plus	app平台生成打包资源（支持npm run build:app-plus，可用于持续集成。不支持run，运行调试仍需在HBuilderX中操作）
h5	H5
mp-weixin	微信小程序

1.4.1 以运行微信小程序为例：

1) 输入命令：npm run dev:mp-weixin

2) 使用微信开发者工具，打开运行编译的代码 dist\dev\mp-weixin

3) 修改uni-app项目代码，微信开发者工具会同步更新

1.4.2 以发布H5项目为例：

1) 输入命令：npm run build:h5

2) 将编译后的项目dist\build\h5，使用node.js http-serve服务运行验证：
在想要启动服务的文件夹下，打开命令行，输入http-server：

在浏览器输入上面显示的ip可端口即可访问：

1.5 uni-app项目目录分析

1).public 下面的 index.html 模板文件

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
            })
            var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
        </script>
        <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
        <link rel="icon" href="./static/favicon.ico">
    </head>
 <div id="app"></div>

BASE_URL:项目根路径。
viewport-fit=cover 兼容iponex刘海。env()和constant()，是IOS11新增特性。
VUE_APP_INDEX_CSS_HASH ，获取文件部分哈希值查看源码：

  const buffer = fs.readFileSync(require.resolve('@dcloudio/uni-h5/dist/index.css'))
  process.env.VUE_APP_INDEX_CSS_HASH = loaderUtils.getHashDigest(buffer, 'md5', 'hex', 8)

Vue.config.productionTip = false

App.mpType = 'app'

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

1) Vue.config.productionTip = false 是提示开发环境信息
2) App.mpType = ‘app’ 是为了与后面要讲的小程序页面组件所区分开来，当注释掉这段代码，会发现报错


chunk-vendors.js:28888 [Vue warn]: Property or method "keepAliveInclude" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in at App.vue)
warn @ chunk-vendors.js:28888
chunk-vendors.js:28888 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'meta')"

分析下报错原因，如Property or method “keepAliveInclude” is not defined ，查看下源码：src\core\service\plugins\index.js

   Vue.mixin({
      beforeCreate () {
        const options = this.$options
        if (options.mpType === 'app') {
          options.data = function () {
            return {
              keepAliveInclude
            }
          }
          const appMixin = createAppMixin(routes, entryRoute)
        .......
    })

3) app.$mount() 如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中，查看源码src\core\service\plugins\app\index.js

 beforeMount: function appBeforeMount () {
      // TODO 平台代码
      this.$el = document.getElementById('app')
    }

4) 初始化h5项目网页标题，修改模板文件，开发环境 server 配置
第一种方法，通过vue.config.js，注意不是vue官方说的config.plugin(‘html’).tap

devServer: {
    host: '10.1.2.55',
    port: 8002, //端口号
    proxy: {
      '/api': {
        target: 'http://localhost:3000/', // 后端地址
        secure: false, // 如果是https接口，需要配置这个参数
        ws: true, // 是否代理websockets
        changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  chainWebpack: config => {
    config
      .plugin('html-index')
      .tap(args => {
        args[0].title = '你想设置的title名字'
        //  修改模板文件
        args[0].template = './public/index2.html'
        return args
      })
  }

第2种方法，通过manifest.json配置，注意vue-cli创建的uni-app项目manifest.json是在src文件夹下面的。uni-app官网manifest配置h5

"h5": {
      "title": "hello-title",
      "template":"../public/index2.html",
      "devServer": {
        "host": "10.1.2.55",
        "port" : 8000, // 端口号
        "disableHostCheck" : true,
        "proxy" : {
            "/api" : {
                "target" : "http://localhost:3000/", // 目标接口
                "ws": true, // 是否代理websockets
                "secure" : false, // 设置支持https协议的代理
                "changeOrigin" : true, //是否跨域
                "pathRewrite" : {
                    "^/api" : ""
                }

            }
        }
			}
    }

vue.config.js 有许多配置在vue里面支持，但是在uni-app里面不支持如：publicPath 不支持，如果需要配置，请在 manifest.json->h5->router->base 中配置，参考文档：h5-router；outputDir 不支持；assetsDir 固定 static。uni-app官网vue.config.js

2.通过HBuilderX可视化界面

2.1 创建uni-app

在点击工具栏里的文件 -> 新建 -> 项目：

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建

2.2 运行uni-app

1）运行h5

2）运行微信小程序

3.使用cli创建项目和使用HBuilderX可视化界面创建项目有什么区别

问题引入：当运行环境版本和编译环境版本两个版本不一致。提示如下：

出现这个问题原因：HBuilderX版本很老，或cli编译器一直没升级，而云打包服务器已经升级，此时编译环境版本低，而运行环境版本高，就会报错

如何解决这个问题：如果项目是HBuilderX创建的，则是HBuilderX的版本号，更新HBuilderX会改变；如果是cli创建的项目，即根目录是package.json，那么编译环境版本号是创建cli时生成的，或者上一次执行npm update生成的。不管HBuilderX如何升级，cli项目的编译器并不会跟随HBuilderX升级而升级，需手动升级

解决这个问题需要知道：HBuilderX 版本，HBuilderX 对应的 NPM 依赖版本，以及两者关系。例如：版本号 2.0.0- 后面是与 HBuilderX 对应的版本号且小版本不会超过9，比如 HBuilderX 2.7.5.20200518 对应的版本号 2.0.0-27520200518001，2.0.0-271420200618 对应的为 2.0.0-27920200618002。(HBuilderX所有NPM版本记录 )

本地HBuilderX版本为例：

1）对应编译器版本(HBuilderX安装目录plugin目录下)：

2）本地HBuilderX版本对应NPM版本记录：

cli项目的编译器版本降级案例
1）找到cli项目package.json，^2.0.0-32320210825001 全部替换为2.0.0-31920210609001

2）删除cli项目下的node_modules，package-lock.json
3）执行npm install

4）执行npm run dev:h5 访问正常显示

3.1编译器的区别

cli创建的项目，编译器安装在项目下。并且不会跟随HBuilderX升级。如需升级编译器，执行 npm update，或者手动修改package.json 中的 uni 相关依赖版本后执行 npm install。更新后可能会有新增的依赖并不会自动安装，手动安装缺少的依赖即可。
HBuilderX可视化界面创建的项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。
已经使用cli创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。
cli版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目

npm install sass-loader@10  node-sass@4 --save-dev

sass-loader@11 以上需要是 webpack5，这里示例的uni-app项目是通过vue-cli4生成的(webpack4)。所以这里指定10版本

3.2开发工具的区别

cli创建的项目，内置了d.ts，同其他常规npm库一样，可在vscode、webstorm等支持d.ts的开发工具里正常开发并有语法提示。
使用HBuilderX创建的项目不带d.ts，HBuilderX内置了uni-app语法提示库。如需把HBuilderX创建的项目在其他编辑器打开并且补充d.ts，可以在项目下先执行
npm init，然后npm i @types/uni-app -D，来补充d.ts。但vscode等其他开发工具，在vue或uni-app领域，开发效率比不过HBuilderX。详见：https://ask.dcloud.net.cn/article/35451
发布App时，仍然需要使用HBuilderX。其他开发工具无法发布App，但可以发布H5、各种小程序。如需开发App，可以先在HBuilderX里运行起来，然后在其他编辑器里修改保存代码，代码修改后会自动同步到手机基座。
如果使用cli创建项目，那下载HBuilderX时只需下载10M的标准版即可。因为编译器已经安装到项目下了。

码农公寓