还没有正式写过uniapp项目,动手自己创建个,平时练手用。
1.全局安装vue-cli脚手架
npm install -g @vue/cli
2. 创建uni-app项目
vue create -p dcloudio/uni-preset-vue learn-uniapp(项目名称)
3.选择模版
初次创建可以选择默认模版
4.安装组件语法提示
npm i @dcloudio/uni-helper-json
启动命令
小程序为例
npm run dev:mp-weixin
在项目目录dist-->dev文件夹找到mp-weixin,使用微信开发中工具打开运行
运行遇到的问题:
** 编译报错**
[ app.json 文件内容错误] app.json: app.json 未找到
- 由于project.config.json文件的miniprogramRoot小程序根目录属性找不到app.json的路径(可能是错误的路径,也可能是没有这一行代码)
"miniprogramRoot": "./dist/dev/mp-weixin"
在project.config.json文件的最后一行,添加时上面路径配置
//启动项目(微信小程序)
npm run dev:mp-weixin
//启动项目(h5)
npm run dev:h5
//启动项目(app平台)
npm run build:app-plus (也就是App平台运行调试不支持cli方式,需在HBuilderX中运行调试)
//启动项目(支付宝小程序)
npm run dev:mp-alipay
//启动项目(百度小程序)
npm run dev:mp-baidu
//启动项目(字节跳动小程序)
npm run dev:mp-toutiao
//启动项目(qq 小程序)
npm run dev:mp-qq
//启动项目(快应用)
npm run dev:quickapp-webview