#vue #vue-cli #移动端适配

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 搭建的

准备阶段

  1. 确定项目 ui 框架

    现阶段比较好的 Vue 移动端 ui 框架：vant ， vux， cube-ui，Mint-UI，Muse UI，NutUI 等。

  2. 选择css预处理样式语言，（vue-cli 里选择）

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

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

  4. 使用 Vue-cli 生成的项目，集成 vuex ， vue-router，css预处理语言，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. 选择移动端适配方案

    现在主流的适配方案是rem和vw，老项目用的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 的配置

    一般需要配置gzip和drop_console等。

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

    一般需要配置@:src

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

    1
    2
    3
    4
    5
    publicPath: './',
    outputDir: 'dist',
    assetsDir: 'static',
    productionSourceMap: false,
    lintOnSave: true
#vue #vue-cli #移动端适配