uni-app从入门到一（二）uni-app脚手架搭建项目

谁借莪１个温暖的怀抱￠ 2023-02-22 05:20 5阅读 0赞

## uni-app两种开发方式 ##

第一种：使用DCloud公司提供的HbuilderX编辑工具，我们只需要点击基本的创建按钮，就可以创建一个初步项目了  
第二种：就是使用uni-app脚手架开快速搭建项目与开发，该方式是使用传统的node脚手架方式来开发，使用脚手架搭建项目是一名前端工程师的基本功，那么接下来就让我们一起来学习uni-app脚手架的项目搭建吧！

## 第一步 配置全局安装工具 ##

1、首先安装node，进入node官网下载相应的版本，我这里使用的是稳定版；下载完成后解压到指定的目录即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aHVpMjEwMA_size_16_color_FFFFFF_t_70]  
2、打开cmd输入： npm install -g @vue/cli  
![在这里插入图片描述][20200702220513648.png]  
出现如下错误，可换取淘宝的源  
（1）npm install --registry=https://registry.npm.taobao.org --loglevel=silly  
（2） npm cache clean --force  
（3） npm install  
![在这里插入图片描述][20200702223835137.png]  
成功如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aHVpMjEwMA_size_16_color_FFFFFF_t_70 1]  
当启动vue -V时报没有下载vue  
![在这里插入图片描述][2020070223201526.png]  
接下来就是检查npm是否安装成功  
![在这里插入图片描述][20200702232337310.png]  
检查安装node安装成功后输入：  
1、npm install -g vue  
2、npm install -g vue-cli  
![在这里插入图片描述][20200702232532503.png]  
此时输入vue -V能正常显示则安装vue-cli脚手架成功  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aHVpMjEwMA_size_16_color_FFFFFF_t_70 2]  
但是呢还没完，这里先看看版本2.9.6，没有到达3.0以上版本不能运行vue create 命令；那么我们只能：  
1、npm uninstall -g vue-cli将其卸载  
2、npm install -g cnpm --registry=http://registry.npm.taobao.org 安装淘宝的cnpm  
3、cnpm install -g @vue/cli 再次安装@vue-cli  
安装完成输入vue -V，此时会看见版本已经变成4.4.6  
![在这里插入图片描述][20200703000120759.png]

## 创建项目 ##

经过上面无伤大雅的安装之后，那么我们接下来就是在面向窗口cmd中输入：vue create -p dcloudio/uni-preset-vue 项目名称；创建项目  
首次创建会提示，我们选择默认即可  
![在这里插入图片描述][20200703000333571.png]  
![在这里插入图片描述][20200703000445709.png]  
此时创建uni-app项目成功  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aHVpMjEwMA_size_16_color_FFFFFF_t_70 3]  
接下来就是运行项目了，首先进入项目目录并输入：npm run dev:mp-weixin；出现如下则项目启动成功  
![在这里插入图片描述][20200703001155309.png]

## 在微信开发者工具中导入项目 ##

最后就是打开微信开发者工具、选择导入项目school\\dist\\dev\\mp-weixin（这个才是小程序的根目录），输入自己在微信小程序中注册的appid（也可以不输入），点击导入即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aHVpMjEwMA_size_16_color_FFFFFF_t_70 4]  
最后成功导入小程序如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aHVpMjEwMA_size_16_color_FFFFFF_t_70 5]

最累的时候，家人是你最好的归宿！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aHVpMjEwMA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200702084049846.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aHVpMjEwMA==,size_16,color_FFFFFF,t_70
[20200702220513648.png]: https://img-blog.csdnimg.cn/20200702220513648.png
[20200702223835137.png]: https://img-blog.csdnimg.cn/20200702223835137.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aHVpMjEwMA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200702230750520.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aHVpMjEwMA==,size_16,color_FFFFFF,t_70
[2020070223201526.png]: https://img-blog.csdnimg.cn/2020070223201526.png
[20200702232337310.png]: https://img-blog.csdnimg.cn/20200702232337310.png
[20200702232532503.png]: https://img-blog.csdnimg.cn/20200702232532503.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aHVpMjEwMA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200702234337390.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aHVpMjEwMA==,size_16,color_FFFFFF,t_70
[20200703000120759.png]: https://img-blog.csdnimg.cn/20200703000120759.png
[20200703000333571.png]: https://img-blog.csdnimg.cn/20200703000333571.png
[20200703000445709.png]: https://img-blog.csdnimg.cn/20200703000445709.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aHVpMjEwMA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200703000644146.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aHVpMjEwMA==,size_16,color_FFFFFF,t_70
[20200703001155309.png]: https://img-blog.csdnimg.cn/20200703001155309.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aHVpMjEwMA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200703001844146.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aHVpMjEwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aHVpMjEwMA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200703002036515.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1aHVpMjEwMA==,size_16,color_FFFFFF,t_70