使用vue2开发uni-app项目流程

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、pandas是什么？
• 二、使用步骤
  • 1.引入库
  • 2.读入数据
• 总结

---

前言

记录使用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（推荐）

uview-ui使用文档

2）z-tabs 库

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、运行

六、发布

发布流程参考小程序发布

总结

未完待续。