Vue2移动端项目开发流程

目录

移动端电影项目

1、项目效果

2、开发项目流程

3、开发环境

4、初始化项目 

@4.5.19 版本Vue脚手架创建项目

UI 图形界面 创建项目

Mac 电脑使用 Vue.cli4.X 搭建项目流程

5、Vant 移动端组件库

5-1、安装 Vant

5-2、自动按需引入组件 ( 推荐 ！)

5-3、移动端样式设置（适配）

6、路由规划

7、网络请求

实战案例 : 

---

移动端电影项目

1、项目效果

---

2、开发项目流程

产品立项  ( 需求分析、技术选型、项目人员确定 )

产品原型  ( 设计产品原型图 —— UI 设计师 进行 UI 设计 )

项目开发  ( 前端开发人员 + 后端开发人员 )

项目测试（ 比如 ：UI 进行样式走查、测试人员测试项目功能有无 bug 问题 ）

项目上线（ 后端 ，运维 或者 测试 人员， 来负责上线 ， 前端 一般只需要自己 打个 test 测试包给项目经理 就 OK 了 ；再或者公司内部有自己的项目集成工具，前端人员可以自己通过工具来一键部署项目进行上线 )

---

3、开发环境

前端开发工具：VS Code ( 开源 )  /  Webstorm ( 收费 )

前端开发环境：Window / Mac / Linux

      项目运行环境 ：node v10.x 以上版本

（  下载 yarn ： $  npm i -g yarn ；）

    如果你是小白初入公司 , 给你分配了电脑 和 显示器 ( 可以询问要一个 ) , 先打开电脑 ,

  把前端开发工具： VS Code 下载安装好 ：

【 下载地址 :  Visual Studio Code - Code Editing. Redefined  】

    然后 把 NodeJS 下载安装好  【 下载地址 :  Node.js  】

  NodeJs 内 ：  ( 下载  nvm（ node 版本管理工具 ）  和   下载 nrm：

修改 npm 工具的下载地址（镜像源地址） $ npm i -g nrm ； nrm use taobao    )

---

Mac 电脑的相关安装教程 ：

本文链接：新入手Mac配置前端环境教程_xcode前端

Vue 脚手架： vue-cli  4.x 【 下载 vue-cli 脚手架工具 ： { $  npm i -g @vue/cli@4 } 】

检查是否安装成功 ： { $  vue --version }   =>   @vue/cli  4.5.19

或者 vue/cli 5.x  =>  @vue/cli 5.0.8 

【 个人喜欢使用新版本，不过新手不推荐使用（容易出现很多问题） 】

卸载当前 @5.x 版本 ：

$  npm uninstall @vue/cli -g

重新下载 @4.x 版本 ：

$  npm install -g @vue/cli@4   =>   @vue/cli  4.5.19

      代码版本工具：Git

      图形工具 :

TortoiseGit – Windows Shell Interface to Git    ( 小乌龟 )  只支持  window

Sourcetree | Free Git GUI for Mac and Windows    支持 :  window / mac

---

4、初始化项目 

Vue 工程化 :