去哪儿小程序开发过程

文章目录

• • 一、确定项目技术栈
  • 二、搭建项目
  • • 1、手动搭建
    • 2、使用模板
  • 三、路由
  • 四、组件化开发
  • 五、webpack配置打包优化 （vue.config.js）

一、确定项目技术栈

技术栈	描述	版本
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、使用模板

好处：找到我们项目相应的模板就不用我们手动配置文件，且不易出错。

1. 多环境变量配置（开发、测试、生产）
2. axios 请求拦截，响应拦截 (API统一管理)
3. sass 预编译
4. rem移动端适配方案
5. vant-ui 按需导入
6. 本地跨域
7. vuex
8. 300毫秒延迟问题 （较老设备点击事件有300ms延迟问题）
9. 1px 边框像素问题
10. 初始化样式问题 (reset.css引入项目)
11. js工具文件 （防抖、节流、日期处理、数据类型检测）
12. 字体图标引入

三、路由

路由的嵌套
路由传参
路由守卫
keep-alive
使用路由懒加载
使用封装路由

四、组件化开发

1. 封装一些公共的组件
2. 合理化的拆分组件
3. 组件开发
4. 组件之间的传值

五、webpack配置打包优化 （vue.config.js）

/路径替换为./
解决跨域

标签：插件,哪儿,项目,程序开发,vue,组件,过程,路由,搭建
来源： https://blog.csdn.net/weixin_57994974/article/details/117459159