移动端电影项目

1、项目效果

2、开发项目流程

3、开发环境

4、初始化项目

5、vant 移动端组件库

介绍

5.5.1、安装

5.5.2、自动按需引入组件 (推荐)

5.5.3、移动端样式设置（适配）

6、路由规划

7、网络请求

实战案例 :

移动端电影项目

1、项目效果

2、开发项目流程

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

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

项目开发 ( 前端与后端 )

项目测试

项目上线 ( 后端，运维，测试来负责上线，前端一般只需要打个包就 OK 了)

3、开发环境

开发工具：Vscode ( 开源 ) / Webstorm ( 收费 )

开发环境：Window / Linux / Mac

项目运行环境：node v10.x 以上版本（后下载 nvm ；nrm ； npm i -g yarn ； yrm ）

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

把开发软件 VSCode 下载安装好

( 下载地址 : Visual Studio Code - Code Editing. Redefined )

然后把 NodeJS 下载安装好 ( 下载地址 : Node.js )

NodeJs 内安装好 ( nvm （ node 版本管理工具） / nrm )

Vue 脚手架： vue-cli 4.x

代码版本工具：Git

图形工具 :

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

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

4、初始化项目

Vue 工程化 :

使用 vue 脚手架创建项目

使用 命令行 创建项目 => 选择手动模式 :

安装 vue 扩展

路由模式

css 预处理

每个配置都用单文件设置

不保存刚刚的安装配置

创建完成后，cd进入到项目中

图形界面 创建项目 => 使用 vue 的客户端 ui 来完成项目的创建和管理 :
vue ui
( 1 ) + 创建 => ( 2 ) 选择到你需要创建项目的目录文件夹下 => ( 3 ) 点击 + 在此创建新项目

等待项目创建成功 loading ... ...

项目配置 : 关于项目的一些配置 , 可以进行二次设置

5、vant 移动端组件库

网址： Vant 2 - Mobile UI Components built on Vue

此组件是针对于 移动站点 所用，不要用它到 pc 站点中

介绍

Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

5.5.1、安装

( 项目生产依赖环境 ) 安装指令 :

# Vue 2 项目，安装 Vant 2： npm i vant@latest-v2 -S

"dependencies": {

"vant": "^2.12.49",

}

手动引入样式 : ( 太麻烦了 , 不推荐 )

5.5.2、自动按需引入组件 (推荐)

第一步 : ( 项目开发依赖环境 ) 安装按需打包的插件工具指令 :

$ npm i babel-plugin-import -D

第二步 : 在 Vue 项目 根目录 下面有一个 babel.config.js 文件，在此文件中进行如下操作

修改 babel.config.js 文件后，一定要重启 vue 项目
module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [// 按需加载对应的 vant 组件库中的 css['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]
}
升级版写法：在 main.js 文件中以插件的方式引入 vant 组件库

vant 插件写法 :

使用 vant 组件库 :

5.5.3、移动端样式设置（适配）

在移动端布局推荐使用 rem 或 / vw / vh 最好不要用 px 固定单位

如果需要使用 rem 单位进行适配，推荐使用以下两个工具：

postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位

amfe-flexible 帮你去设置 html 中的 font-size 值

npm i postcss-pxtorem@5 -D

"postcss-pxtorem": "^5.1.1"

npm i -S amfe-flexible

"amfe-flexible": "^2.2.1"

进行对项目配置

在 main.js 中引入 amfe-flexible 类库

在项目根目录下面创建一个 postcss.config.js 文件

// 修改此文件一定要重启 vue 项目
// postcss.config.js
module.exports = {// px 自动转为 rem 插件// 需要安装，一定要注意和 vue2.x 版本兼容  我们用的是 @5版本plugins: {'postcss-pxtorem': {// 1rem = 37.5pxrootValue: 37.5,// 所有写在 class 类样式中的尺寸单位的属性中的 px 都会帮你转换为 rem// style 中的 px 不会转换  所以建议少用 stylepropList: ['*'],},},
};

在 main.js 中引入计算基准值类库 :

6、路由规划

如果项目中所有的路由都写在入口文件中，那么将不便于编写项目和后期维护。因此路由需要进行 模块化 处理。

可以先行添加以下几个空的路由模块：

电影模块
影院模块
电影资讯
个人中心模块

请求相关拆分 => 推荐借鉴文章：

axios 数据请求二次封装及实战案例_雨季mo浅忆的博客-CSDN博客

7、网络请求

项目中使用 axios 进行网络请求，vue 脚手架默认没有安装，需要自行安装才能使用。

安装 ( 生产环境依赖 ) "axios": "^0.24.0"

npm i -S axios

设置统一请求域名

反向代理 可以进行跨域解决

在项目根目录下面创建一个 vue.config.js 文件，写下如下代码
module.exports = {devServer: {overlay: false,// vue 项目代理请求proxy: {// 规则// axios 中相对地址开头的字符串'/api': {// 把相对地址中的域名 映射到 目标地址中// localhost:8080 => localhost:3000target: 'http://localhost:3000',// 修改 host 请求的域名为目标域名changeOrigin: true,// 请求 uri 和目标 uri 有一个对应关系// 请求 /api/login ==> 目标 /v1/api/loginpathRewrite: {'^/api': '/v1/api'}}}}
}
代理配置 :

这里 , 此处配置反向代理文件内会有一个小坑 :

因为匹配的规则为 express.use 模糊匹配 , 匹配成功后就会停止向下匹配了 ,

所以匹配的 请求前缀 尽量 不要一样 ,

比如你写的 ' / api ' , 只要你的请求地址内存在 / api , 它在匹配上之后就会走对象内的程序代码了 , 就不会再向下执行 ,

所以为了预防此问题 , 所以最好是把你的请求前缀改成 ' ^/api ' ( 以 /api 开头的 )

这样的写法会更严谨 , 防止模糊匹配钻了漏洞

否则即使你下面再怎么写的 pathRewrite ( 路径重写 ) , 也会失去效果 , 将你的重写路径依旧会带在你的请求地址里 , 并没有给过滤掉 , 导致请求一直 404 失败

所以 , 就是最后我们一是要注意咱们的 请求前缀不要一样 ,

二就是我们最好将前缀的写法写的更加严谨一些

网络请求模块化 :

让 Vue 中的 @ 路径有代码提示 :

在项目根目录下面创建一个 jsconfig.json 文件

{"compilerOptions": {"baseUrl": ".","paths": {"@/*": ["./src/*"]}}
}

实战案例 :

web 移动端电影项目 (Vue)

跳转链接 => web 移动端电影项目 (Vue)

Vue 移动端项目开发流程相关推荐

移动端电商项目开发流程
目录项目介绍项目页面介绍项目开发流程首页介绍: 搜索页: 搜索页: 项目打包优化上线: 这是我自己写的一个电商开发流程,欢迎大家来补充! 项目介绍我的项目叫✖✖✖✖,是B2C模式,也就是商家 ...
web前端不用怕，外卖平台的项目开发流程，大全！！
项目开发流程 1. 创建客户端项目 1.1 使用 vue-cli(脚手架)搭建项目 #在Github新建Vue-MintShop项目,然后clone到本地 git clone git@github.c ...
Vue 移动端项目创建
前言移动端我们一般通过Vue脚手架手动自定义创建项目, 只需要Node环境我们就可以通过npm下载Vue脚手架,通过命令创建项目. npm下载脚手架 npm install -g @vue/cli ...
对 VR 项目开发流程的调研
0. 参考资料学习参考自以下资料: 一个 VR 游戏 DEMO 的开发历程是怎样的 http://tech.163.com/16/0726/08/BSSSPPT600097U7U.html 虚拟现实 ...
java项目_好程序员Java分享从入门到服务端项目开发的过程
好程序员Java分享从入门到服务端项目开发的过程,对于打算入门或者刚刚入门学习Java的人来说,刚开始接触这门学科,往往会觉得不知所措,也会觉得很迷茫.结合前人经验,就从入门到进阶对于Java的学习而 ...
技术总监之路——App项目开发流程
App项目开发流程一. 需求阶段 1. 初期由leader或者项目责任人和PM沟通下阶段开发计划,确认需求的可行性和优先级等初步达成共识 2. 接下来PM提供详细UE文档(需求颗粒感尽可能小)发起三 ...
项目开发流程及开发模式
项目开发阶段整体阶段:需求分析.设计.编码.测试.维护. 需求阶段:通常定义系统的需求,明白系统的目标. 设计阶段:通常确定系统使用什么数据库,系统模块的划分,各个模块的功能. 编码阶段:用编程语言 ...
软件项目开发流程及人员职责
一软件项目开发流程概括来说分为一共分了6个过程项目启动阶段->需求分析阶段->设计阶段->开发阶段->测试阶段->常规文档 1.1 项目启动阶段 A. 产品经理和项 ...
产品经理技能,岗位职责,项目开发流程
产品经理技能,岗位职责,项目开发流程 1.0 产品经理具备哪些技能 1.必须掌握的工具软件上述使用的脑图工具也是我们需要掌握的一项技能,Axure是以后在工作中使用频率最高的,也是我们必须掌握的原型 ...

Vue 移动端项目开发流程

移动端电影项目

1、项目效果

2、开发项目流程

3、开发环境

4、初始化项目

5、vant 移动端组件库

介绍

5.5.1、安装

5.5.2、自动按需引入组件 (推荐)

5.5.3、移动端样式设置（适配）

6、路由规划

7、网络请求

实战案例 :

Vue 移动端项目开发流程相关推荐

最新文章

热门文章