uni-app学习笔记--浏览vue-cli创建uni-app模板的文件结构

悠悠 2024-04-19 09:06 15阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xydWl4dWFu_size_16_color_FFFFFF_t_70]  
在学习uni-app之前最好有vue和微信小程序的基础，因为uni-app是一个跨平台的开发框架，它里面不少语法是结合vue和小程序中的语法来写的。  
因为本人在学习之前有使用过vue-cli来创建项目，在这里直接使用vue-cli3来快速创建项目的目录框架，选用的模板使用uni-app，目录结构如下所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xydWl4dWFu_size_16_color_FFFFFF_t_70 1]  
这里重点浏览src文件，其他文件在用过vue开发项目的同志来说基本都知道。以下是src里面展开的文件，改目录结构还是跟vue-cli搭建的目录结构还是有点类似的，在uni-app中路由文件pages.json作用好比vue中router.js文件  
![在这里插入图片描述][20190916145808359.png]  
在这里先在项目文件夹上用终端运行npm run serve，看到的界面是如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xydWl4dWFu_size_16_color_FFFFFF_t_70 2]  
在src中找到pages.js,里面全都是各个页面的路由，其实该路由的写法就是微信小程序中路由的写法，在这里用户首次浏览的页面就是排在pages.js数组里面第一个路由的文件，这里就是内置组件的页面，所以如果用户需要在首次浏览展示的页面是登录页面，那么这里就是把登录页面的路由写在第一位

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xydWl4dWFu_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0e6d989622954b738651d31a363a856a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xydWl4dWFu_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4100ee2ce6e542679359270b653886ec.png
[20190916145808359.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4471b6ecc76949d0acf4982362f347ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xydWl4dWFu_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f6f3085d82814835af6ed310fb1ce21c.png