
使用vue2开发uni-app项目流程
记录使用vue2开发uni-app项目点的前期工作,包括环境工具的准备等。提示:以下是本篇文章正文内容,下面案例可供参考未完待续。
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
记录使用vue2开发uni-app项目点的前期工作,包括环境工具的准备等。
提示:以下是本篇文章正文内容,下面案例可供参考
一、环境准备
常规vue环境配置网上很多,这里就不细说,可以参考基于VScode的vue环境搭建。
需要注意的是,vue-cli脚手架需要全局安装,且版本不能太低,此次安装的般般是5.0.8。
二、工具准备
1. 开发工具:VS Code
官方推荐使用的是HBuilderX,但个人习惯使用vscode,所以本文介绍的也是基于vscode的开发
(1)插件
Vetur Vue语法提示插件
vue-helper 又一款Vue语法插件,和Vetur 结合使用
uni-create-view 一键快速创建页面、组件、分包
Auto Close Tag 标签自闭合插件,在使用外部组件的时候非常有用
Auto Rename Tag 标签重命名插件,当需要更改标签名称的时候非常有用
(2)依赖
1)scss
① 版本
注意node与node-sass、sass-loader的版本对应关系,版本不匹配会出现一些意外问题
NodeJS | node-sass | sass-loader |
---|---|---|
Node 20 | 9.0+ | 115 |
Node 19 | 8.0+ | 111 |
Node 18 | 8.0+ | 108 |
Node 17 | 7.0+,<8.0 | 102 |
Node 16 | 6.0+ | ^10.0.1 |
Node 15 | 5.0+, <7.0 | 88 |
Node 14 | 4.14+, <9.0 | 83 |
Node 13 | 4.13+,<5.0 | 79 |
Node 12 | 4.12+, <8.0 | 72 |
Node 11 | 4.10+,<5.0 | 67 |
Node 10 | 4.9+,<6.0 | 64 |
Node 8 | 4.5.3+, <5.0 | 57 |
Node <8 | <5.0 | <57 |
②安装
我这边的node版本是14.16.0,所以安装的是4.14.1的node-sass和7.3.1的sass-loader
npm install node-sass@4.14.1 --save-dev
npm install sass-loader@7.3.1 --save-dev
2)autoprefixer版本
autoprefixer版本如果过高,在运行醒目时会报 Error: PostCSS plugin autoprefixer requires PostCSS 8错误,降低版本即可。如:
npm i postcss-loader autoprefixer@8.0.0
(3)第三方组件库
1)uview-ui(推荐)
2)z-tabs 库
2、微信开发者工具
三、创建项目
1、通过指令创建项目
(1)创建项目:my-app为项目名称
vue create -p dcloudio/uni-preset-vue my-app
(2)选择目标,一般选择默认模板
(3)创建成功
(4)vscode打开项目
2、拉取git上的项目
(1)下载项目zip包,此处是在微信开发者.代码管理上拉取的代码
(2)将zip包保存到目标区域后解压用vscode打开
(3)安装微信子女开发者.代码管理上的指令执行依赖安装、运行(代码仓下方)
(4)本地配置相应的远程代码仓
四、项目运行
五、调试
因为使用的是VSCode,与Hbuilder x 不同,所以需要把代码导入到“微信开发者工具”里面进行调试、发布等操作
1、manifest.json配置appid
在manifest.json文件中找到mp-weixin/appid,配置注册微信小程序appid。没有注册的可以到
微信小程序官网 进行注册,或者使用测试账号。
注册流程可参考 使用vue2开发uni-app项目的准备工作--注册微信小程序
2、打包
打包方式有两种:
1)直接使用打包指令
打包命令在package.json中,自行查看。
npm run build:%PLATFORM%
2)使用脚本
3、导入到微信开发者工具运行
微信开发者工具调试方法
4、运行
六、发布
发布流程参考小程序发布
总结
未完待续。
更多推荐
所有评论(0)