Vue 搭建移动端 h5 项目步骤

简介

最近团队里的其他前端小伙伴需要自己搭建移动端 h5 项目，没有整体的思路，于是我就写了这个步骤。

提示：(2022-10-28更新)

vue-cli 和vuex官方已经不再更新。
vue-cli建议用 create-vue 即 npm init vue 替代，或者直接使用vite 创建项目。
vuex建议用pinia替代。

create-vue链接
pinia链接
vite链接

已经搭建好的模板github地址

新版用vite + vue3 + vue-router 4 + pinia + ts +vant 搭建的

准备阶段

确定项目 ui 框架

现阶段比较好的 Vue 移动端 ui 框架：vant ， vux， cube-ui，Mint-UI，Muse UI，NutUI 等。
选择css预处理样式语言，（vue-cli 里选择）

less，sass，stylus都可以，vue-cli 3 后的版本对应的webpack 的loader都是配置好的，只需下载对应的包就好了。使用建议：一般选择的css预处理语言和 ui 框架的预处理语言一致为好，类如vant使用的是less，则项目中优先使用less。
是否需要集成 eslint，stylelint，prettier，git hooks，lint-staged，一般建议eslint是必要的，其他不做强制要求，这些都是后面可以自己手动添加的。

使用 Vue-cli 生成的项目，集成 vuex ， vue-router，css预处理语言，eslint等。

项目目录

├── babel.config.js
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src├── App.vue├── assets├── components├── main.js├── router├── store└── views

样式和适配

重置样式

一般是需要加载reset.css 或者normalize.css，用来重置和保护各大浏览器的样式。一般建议使用normalize.css。
安装并导入准备阶段选择好的 ui 框架
选择移动端适配方案

现在主流的适配方案是rem和vw，老项目用的rem比较多，随着时间的推移，vw的适配方案会占优势。一般建议新项目直接上vw适配方案。

适配方案链接：

rem 实现移动端适配

vw 实现移动端适配
全局样式定义。全局样式变量定义：颜色，字号，宽度等

工具插件的添加

请求工具的添加（配合环境变量 .env 配置设置 baseUrl，后文有提到）

主流的请求库：

axios（支持 React Native，Node，浏览器）

fly.js（支持 Node.js 、微信小程序、Weex 、React Native 、Quick App 和浏览器）。

一般需要自己根据项目封装，常见的需要封装请求拦截器和响应拦截器。
vuex全局状态的添加，涉及到登陆，全局 ui 状态管理等。
Vue插件的添加，过滤器，混入，钩子等。
添加vue-router 的导航守卫。可选
fastclick 解决移动端 300 毫秒延迟问题
vconsole 方便移动端 debug
其他工具的添加，时间处理，深拷贝，函数节流防抖等。

项目 eslint，stylelint ，prettier 的配置

配置.eslintrc.js

一般继承@vue/eslint-config-standard这个插件的，具体的规则需要在rules字段定义
配置.stylelintrc，可选

一般继承stylelint-config-standard这个插件的，具体的规则需要在rules字段定义

配置.prettierrc.js

一般配置

module.exports = {trailingComma: 'none',tabWidth: 2,semi: false,singleQuote: true,jsxSingleQuote: true,bracketSpacing: true,arrowParens: 'avoid'
}

项目命令和环境变量配置

根据 webpack 的模式定义环境变量文件，模式可以自己定义

.env.dev  #测试环境变量文件，不打包的话不用配置
.env.development #开发环境变量文件
.env.production #生产环境变量文件

Vue 项目环境变量以VUE_APP开头，特殊项目变量除外。例如：

.env.development文件

NODE_ENV=development
VUE_APP_BASE_API=https://api.ex.com
VUE_CLI_BABEL_TRANSPILE_MODULES=true

根据上面定义的模式配置 npm 脚本

package.json 文件

"scripts": {"serve": "vue-cli-service serve","dev": "vue-cli-service serve","lint": "vue-cli-service lint","build:prod": "vue-cli-service build --mode production","build:dev": "vue-cli-service build --mode dev"
}

gitHooks lint-staged 的配置，可选

vue.config.js（webpack）的配置

deServer 的配置,

常见的端口，代理，是否打开浏览器等。
webpack 的配置

一般需要配置gzip和drop_console等。
alias 的配置，项目一般会默认设置，可选

一般需要配置@:src

其余的常见配置，可选

publicPath: './',
outputDir: 'dist',
assetsDir: 'static',
productionSourceMap: false,
lintOnSave: true

Vue 搭建移动端 h5 项目步骤相关推荐

vue实现移动端H5页面截图
vue实现移动端H5页面截图 1.vue使用html2canvas实现移动端H5页面截图并下载. 2.html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏.这个html2canva ...
移动端H5项目开发遇到的问题
第一类:架构问题 (1)移动端H5项目可能涉及到微应用等的项目上传的大小限制,视情而定选择较小的依赖包,做好代码压缩混淆,图片处理,用打包工具处理掉依赖包中不需要的代码等. 第二类:兼容性问题 (1) ...
vue+vant 移动端H5 商城项目_01
文章目录一.·Rem 布局适配 1. 安装 amfe-flexible 2. px转化rem 3. 全局配置 4. 重置样式表 5. 引入重置样式表二.组件安装和配置与封装 2.1. 安装less ...
vue+vant 移动端H5 商城项目_04
文章目录一.专题页 1. 效果图 2. 专题api 2.Topic.vue 组件 3. 专题源码二.分类页 2.1. 效果图 2.2. 分类api 2.3. Category.vue 组件三.购 ...
vue+vant 移动端H5 商城项目_03
文章目录一.·首页搜索功能 1. 搜索页面 2. 历史记录和热门搜索组件 3. 搜索框提示列表组件 4. 综合-价格-分类 5. 搜索出的产品展示 6. 异常修复 7. 路由拦截/路由守卫二.详情 ...
vue+vant 移动端H5 商城项目_02
文章目录一.路由规划 1. 新建路由配置 2. 下载vue-router 3. 路由注册 4. 路由基础配置 5. 路由挂载 6. AppTabBar 7. 二.移动端首页 2.1.首页效果 2.2 ...
vue多页面开发_使用VUE进行移动端H5页面开发前准备
在正式使用Vue进行移动端页面开发前,需要做一些前置工作,以此保证用户在访问页面时看到的东西不会因设备的差异而出现各种不同的效果,比如一个页面在iphone7 plus上显示的很正常,然后切换到了Ip ...
为element ui+Vue搭建的后台管理项目添加图标
问题:使用element UI 及Vue 2.0搭建一个后台管理项目,想要在页面中为其添加对勾及叉的图标. 解决方案:问题涉及到为页面添加图标.有两种解决方案. (1)Element官网提供了Icon ...
vue cli创建vue3.0项目步骤
1.安装node.js(node.js下载地址) 2. 全局安装vue-cli最新版本 npm install -g @vue/cli 安装成功后,可以通过 vue -V 查看下载的@vue/cli版 ...

Vue 搭建移动端 h5 项目步骤

Vue 搭建移动端 h5 项目步骤

简介

已经搭建好的模板github地址

准备阶段

样式和适配

工具插件的添加

项目 eslint，stylelint ，prettier 的配置

项目命令和环境变量配置

vue.config.js（webpack）的配置

Vue 搭建移动端 h5 项目步骤相关推荐

最新文章

热门文章

Vue 搭建移动端 h5 项目步骤

Vue 搭建移动端 h5 项目步骤

简介

已经搭建好的模板github地址

准备阶段

样式和适配

工具插件的添加

项目 eslint，stylelint ，prettier 的配置

项目命令和环境变量配置

vue.config.js（webpack） 的配置

Vue 搭建移动端 h5 项目步骤相关推荐

最新文章

热门文章

vue.config.js（webpack）的配置