去哪儿小程序开发过程
作者:互联网
文章目录
一、确定项目技术栈
技术栈 | 描述 | 版本 |
---|---|---|
vue | vue.js | 2.0 |
vue-cli | vue脚手架 | 3/4 |
vue-router | vue路由 | |
vuex | vue状态管理工具 | |
axios | 异步请求数据 | |
vant | 移动端框架 | |
rem | 自适应布局 | |
scss | CSS 扩展语言 | |
webpack | 打包工具 |
二、搭建项目
yarn,npm(cnpm)包管理工具
yarn add aioxs -S 使用yarm下载单个插件
cnpm install axios -S 使用cnpm下载单个插件
-S --save-dev 生产环境的依赖 (dependencies)
-D -dev 开发环境的依赖 (devDependencies)
搭建项目有2种方式:
1、手动搭建
使用指令:
vue create projectname
使用UI可视化界面安装、配置、安装插件、启动项目
vue ui
2、使用模板
好处:找到我们项目相应的模板就不用我们手动配置文件,且不易出错。
- 多环境变量配置(开发、测试、生产)
- axios 请求拦截,响应拦截 (API统一管理)
- sass 预编译
- rem移动端适配方案
- vant-ui 按需导入
- 本地跨域
- vuex
- 300毫秒延迟问题 (较老设备点击事件有300ms延迟问题)
- 1px 边框像素问题
- 初始化样式问题 (reset.css引入项目)
- js工具文件 (防抖、节流、日期处理、数据类型检测)
- 字体图标引入
三、路由
路由的嵌套
路由传参
路由守卫
keep-alive
使用路由懒加载
使用封装路由
四、组件化开发
- 封装一些公共的组件
- 合理化的拆分组件
- 组件开发
- 组件之间的传值
五、webpack配置打包优化 (vue.config.js)
/路径替换为./
解决跨域
标签:插件,哪儿,项目,程序开发,vue,组件,过程,路由,搭建 来源: https://blog.csdn.net/weixin_57994974/article/details/117459159