admin管理员组文章数量:1534619
目录
移动端电影项目
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 工程化 :
@4.5.19 版本Vue脚手架创建项目
【0】、新建文件夹用于存放此前端项目
选择一个盘符，新建一个文件夹（ PROJECT ）：用于存放此各类项目
Mac 电脑 ：
首先打开终端，输入 cd（ 空格 ）然后拖动文件，到终端
然后就能读取文件的路径了，回车即切换到了该目录
jimmy@zhangxiengdeMBP PROJECT %
一般一个完整的项目是 PC 端 和 移动端 都会有的 ，
所以初期的时候一定要做好规划 ， 比如一个 git 库 下直接分好两种端的代码 ：
PROJECT 文件下再新建一个文件 ： 如 ： xxx-web
使用 命令行 （ vue create 项目名 ） 创建项目 ：【 PC 端 和 移动端 创建流程一样 】
vue create xxx-web-pc
vue create xxx-web-mobile
【（ 项目文件名称的创建示例 ：
project-web / project-web-pc ( PC端项目 ) 和 project-web-mobile ( 移动端项目 )
或者是 ： project-web / pc ( PC端项目 ) 和 mobile ( 移动端项目 ) 】
这里需要注意的是 项目名称 不能大写。
**（ 1 ）Please pick a preset => 选择手动模式 ：
（ Manually select features ：手动选择功能 ）=> 回车
版权声明：本文标题：Vue2移动端项目开发流程 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1725023924a1002774.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论