创建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的标准版即可。因为编译器已经安装到项目下了。
18万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
