Vue 搭建移动端 h5 项目步骤

简介

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

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

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

create-vue 链接
pinia 链接
vite 链接

已经搭建好的模板 github 地址

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

准备阶段

  1. 确定项目 ui 框架

    现阶段比较好的 Vue 移动端 ui 框架:vantvuxcube-uiMint-UIMuse UINutUI 等。

  2. 选择css预处理样式语言,(vue-cli 里选择)

    lesssassstylus都可以,vue-cli 3 后的版本对应的webpackloader都是配置好的,只需下载对应的包就好了。使用建议:一般选择的css预处理语言和 ui 框架的预处理语言一致为好,类如vant使用的是less,则项目中优先使用less

  3. 是否需要集成 eslintstylelintprettiergit hookslint-staged,一般建议eslint是必要的,其他不做强制要求,这些都是后面可以自己手动添加的。

  4. 使用 Vue-cli 生成的项目,集成 vuexvue-routercss预处理语言eslint等。

    项目目录

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    ├── babel.config.js
    ├── package.json
    ├── public
    │ ├── favicon.ico
    │ └── index.html
    └── src
    ├── App.vue
    ├── assets
    ├── components
    ├── main.js
    ├── router
    ├── store
    └── views

样式和适配

  1. 重置样式

    一般是需要加载reset.css 或者normalize.css,用来重置和保护各大浏览器的样式。一般建议使用normalize.css

  2. 安装并导入准备阶段选择好的 ui 框架

  3. 选择移动端适配方案

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

    适配方案链接:

    rem 实现移动端适配

    vw 实现移动端适配

  4. 全局样式定义。全局样式变量定义:颜色,字号,宽度等

工具插件的添加

  1. 请求工具的添加(配合环境变量 .env 配置设置 baseUrl,后文有提到)

    主流的请求库:

    axios(支持 React Native,Node,浏览器)

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

    一般需要自己根据项目封装,常见的需要封装请求拦截器和响应拦截器。

  2. vuex全局状态的添加,涉及到登陆,全局 ui 状态管理等。

  3. Vue插件的添加,过滤器,混入,钩子等。

  4. 添加vue-router 的导航守卫。 可选

  5. fastclick 解决移动端 300 毫秒延迟问题

  6. vconsole 方便移动端 debug

  7. 其他工具的添加,时间处理,深拷贝,函数节流防抖等。

项目 eslint,stylelint ,prettier 的配置

  1. 配置.eslintrc.js

    一般继承@vue/eslint-config-standard这个插件的,具体的规则需要在rules字段定义

  2. 配置.stylelintrc可选

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

  3. 配置.prettierrc.js

    一般配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    module.exports = {
    trailingComma: 'none',
    tabWidth: 2,
    semi: false,
    singleQuote: true,
    jsxSingleQuote: true,
    bracketSpacing: true,
    arrowParens: 'avoid'
    }

项目命令和环境变量配置

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

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

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

    .env.development文件

    1
    2
    3
    NODE_ENV=development
    VUE_APP_BASE_API=https://api.ex.com
    VUE_CLI_BABEL_TRANSPILE_MODULES=true
  2. 根据上面定义的模式配置 npm 脚本

    package.json 文件

    1
    2
    3
    4
    5
    6
    7
    "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"
    }
  3. gitHooks lint-staged 的配置, 可选

vue.config.js(webpack) 的配置

  1. deServer 的配置,

    常见的端口,代理,是否打开浏览器等。

  2. webpack 的配置

    一般需要配置gzipdrop_console等。

  3. alias 的配置,项目一般会默认设置, 可选

    一般需要配置@:src

  4. 其余的常见配置,可选

    1
    2
    3
    4
    5
    publicPath: './',
    outputDir: 'dist',
    assetsDir: 'static',
    productionSourceMap: false,
    lintOnSave: true