uni-app搭建小程序

古城微笑少年丶 2023-01-07 08:56 256阅读 0赞

一、uni-app脚手架搭建  
1、全局安装（只需要安装一次）

npm install -g @vue/cli

2、创建项目

vue create -p dcloudio/uni-preset-vue my-project（my-project为你的项目名称）

3、启动项目（微信小程序）

npm run dev:mp-weixin

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70]  
创建完成后的项目结构如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 1]  
微信小程序项目目录结构  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 2]

4、微信小程序开发者工具导入项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 3]

二、搭建过程可能出现的问题  
1、容易出现vue和vue-templage-complier版本不一致的问题  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 4]  
此时根据提示重新安装对应的vue版本即可

npm install vue@2.6.10   或  npm i vue-template-compiler@2.6.10(你的vue版本号)

然后再重新运行项目

npm run dev:mp-weixin

2、vue不是内部或外部的命令  
首先确定是否安装了node.js 和 全局vue-cli

2.1安装node.js，在Node.js官网（https://nodejs.org/en/download/）进行安装包下载，安装完成后可以打开命令行，直接使用node -v命令， 可以查看安装成功后的版本号

2.2安装 全局vue-cli 命令：npm install -g vue-cli,然后 查看 vue -V 是否可以执行 ，如果还是显示 vue不是内部或外部命令 ,然后配置一个Path系统变量就可以解决  
配置步骤如下：

*  首先 在计算机中全局搜索 vue.cmd  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 5]
 *  搜索结果![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 6]
 *  将vue.cmd的路径加入Path环境变量中 即可。如我的路径是“C:\\Users\\Lenovo\\Program Files\\nodejs\\node\_global”。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 7]
 *  打开Path环境 的步骤![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 8]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 9]  
    这样就OK了  
    继续测试 输入vue -V

命令： vue -V ,切记 -V 必须大写  
![在这里插入图片描述][20210116164119678.png]  
3、npm install -g @vue/cli出现 ERR!

先用npm uninstall vue-cli -g 卸载脚手架 ，安装淘宝镜像

使用淘宝镜像:

1>.官方网址：http://npm.taobao.org；

2>.安装：npm install cnpm -g --registry=https://registry.npm.taobao.org； 注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；

3>.注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm）。

4> 如何更新npm的方法： 可以使用 npm install -g npm 来更新版本

然后cnpm install vue-cli -g安装，安装完成后使用vue -V测试是否安装成功 ，然后创建项目的npm命令变成cnpm

三、项目目录

官方文档：https://uniapp.dcloud.io  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 10]  
| App.vue 应用配置，用来配置App全局样式以及监听  
| main.js Vue初始化入口文件  
| mainfest.json 配置应用名称、appid、logo/版本等打包信息  
| pages.json 配置页面路由、导航条、选项卡等页面类信息  
| uni.scss 内置的sass变量，可以直接使用

四、样式和sass

1、支持小程序的rpx和h5的vw、vh  
2、内置有sass的配置，只需要安装对应的依赖即可

npm  install sass-loader node-sass

3、vue组件中，在style标签上加入属性

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70]: /images/20221119/ca17b2e2f8fd4ff4817cf615c665eabc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 1]: /images/20221119/60a85f3ba5504217924580793115585f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 2]: /images/20221119/7252728582c441cd98db3ba65d2d9bf2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 3]: /images/20221119/14178c3b4386404299d5c2a3fb5ccbf8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 4]: /images/20221119/7ba62a35f8234aec91abedf6dff46937.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 5]: /images/20221119/5ada14ec40664978841707705d835ce0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 6]: /images/20221119/83f291646f2248848f2b45d635aa2d95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 7]: /images/20221119/74b1e76b89a442bf861d6ad08e72c011.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 8]: /images/20221119/d0ff5779a07348e5ba2746cfaa5baad1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 9]: /images/20221119/3dfee61d55b949b7bc42d1fe3484d0da.png
[20210116164119678.png]: /images/20221119/2243d7344bf749d8aa7c4db931049ebb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5Mzk5OTY2_size_16_color_FFFFFF_t_70 10]: /images/20221119/8e4b3498587145a5aec3bc2eb804f277.png