去哪儿移动端项目开发流程

最新推荐文章于 2022-08-20 10:53:37 发布

一个跳街舞的程序员airenC

最新推荐文章于 2022-08-20 10:53:37 发布

阅读量250

点赞数

本文链接：https://blog.youkuaiyun.com/BBOY_airenC/article/details/117510966

版权

本文详细介绍了移动端项目开发的整个流程，包括确定技术栈、手动和模板搭建项目、多环境变量配置、路由管理、组件化开发以及webpack配置打包优化。重点讲解了如何配置Vue项目，如使用Vue CLI创建项目，设置UI框架，处理多环境变量，路由懒加载，以及通过CDN加速优化项目。此外，还提到了如何去除console.log()和注释，以及配置externals以减少包大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.确定整体的项目技术栈

vue	vue.js	2 .0
vue-cli	vue脚手架	3/4
vue-router	vue路由
vuex	vue状态管理工具
axios	异步请求数据
vant	移动端框架
rem	自适应布局
scss	CSS 扩展语言
webpack	打包工具

二.搭建项目

我们可以通过使用NPM或者yarn两个包的管理工具去下载插件和依赖

yarn 通过add来实现下载单个插件

npm通过install来下载单个插件

-S -save-dev 是我们生产环境所需要的依赖

-D-dev 是开发环境的依赖

1.手动搭建：

先通过指令vue create来创建我们的VUE项目

然后通过安装不同的UI优化页面进行配置，安装插件

2.使用模板

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

3.多环境变量

我们在开发的时候通常需要去操作三个服务器去确保我们开发的质量，开发环境为一个服务器。测试一个服务器，上线时又需要一个服务器。多环境变量问题就是为了解决这个问题的。

4.路由

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

5.组件化开发组件

vue就是通过组件化的开发去方便我们使用的

通过组件通信，封装适当的公共组件，合理的对组件进行拆分，组件之前相互传值来进行封装

6.webpack配置打包优化

我们需要在根目录新建一个vue.config.js

1.在里面设置静态资源路径'./',否则打包后项目无法运行

publicPath：'./'

因为我们的路径默认是‘/’ 是无法准确获取到我们的路径的

2.关闭生产环境下的SourceMap映射文件，包的大小会减小80％；

productionSourceMap: false

3.配置跨域

module.exports = {
devServer: {
open: false, // 自动启动浏览器
host: '0.0.0.0', // localhost
port: 6060, // 端口号
hotOnly: false, // 热更新
overlay: {
// 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
warnings: false,
errors: true
},
proxy: {
//配置跨域
'/api': {
target: 'https://www.test.com', // 接口的域名
// ws: true, // 是否启用websockets
changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
pathRewrite: {
'^/api': '/'
}
}
}
}

配置alias别名
const path = require('path')
//加载path模块
const resolve = dir => path.join(__dirname, dir)
//定义resolve方法，把相对路径转换成绝对路径
module.exports = {
chainWebpack: config => {

config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('api', resolve('src/api'))
.set('views', resolve('src/views'))
.set('components', resolve('src/components'))
// 添加别名
}
}

配置完成后的使用

//之前这么写
import Home from '../views/Home.vue'
//配置alias别名后
import Home from 'views/Home.vue'
//也可以这么写
import Home from '@/views/Home.vue'

使用CDN加速优化
cdn优化是指把第三方库比如（vue，vue-router，axios）通过cdn的方式引入项目中，这样vendor.js会显著减少，并且大大提升项目的首页加载速度，下面是具体操作：
注意：我们引入的版本库尽量根我们使用的版本一致
const isProduction = process.env.NODE_ENV === 'production';
// externals
const externals = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
vant: 'vant',
axios: 'axios'
}
// CDN外链，会插入到index.html中
const cdn = {
// 开发环境
dev: {
css: [],
js: []
},
// 生产环境
build: {
css: ['https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css'],
js: [
'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js'
]
}
}
module.exports = {
configureWebpack: config => {
// 为生产环境修改配置...
if (isProduction) {
// externals
config.externals = externals
}
},
chainWebpack: config => {
/**
* 添加CDN参数到htmlWebpackPlugin配置中
*/
config.plugin('html').tap(args => {
if (isProduction) {
args[0].cdn = cdn.build
} else {
args[0].cdn = cdn.dev
}
return args
})
}
}

然后在pubilc/index.html文件中添加：

<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>

<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>

去除console.log()打印以及注释
使用插件：
cnpm install uglifyjs-webpack-plugin --save-dev

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production';

configureWebpack: config => {
const plugins = [];
if (isProduction) {
plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false, // 去掉注释
},
warnings: false,
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log']//移除console
}
}
})
)
}
},

完整文件配置