Vue 搭建移动端 h5 项目步骤

简介

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

准备阶段

确定项目 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 项目步骤

简介

准备阶段

样式和适配

工具插件的添加

项目 eslint，stylelint ，prettier 的配置

项目命令和环境变量配置

vue.config.js（webpack） 的配置

猜你喜欢

vue.config.js（webpack）的配置