目录
移动端电影项目
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
项目运行环境：nodev10.x 以上版本（ 后下载nvm；nrm； npm i -gyarn； yrm ）
如果你是小白进了公司 , 给你分配了电脑 和 显示器 ( 询问要一个 ) , 先打开电脑 ,
把开发软件 VSCode 下载安装好
( 下载地址 :Visual Studio Code - Code Editing. Redefined )
然后 把NodeJS下载安装好 ( 下载地址 : Node.js)
NodeJs 内 安装好 (nvm（ node 版本管理工具） / nrm )
Vue 脚手架：vue-cli4.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 是一个轻量、可靠的移动端组件库，于 年开源。
目前 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.jsmodule.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)
