用Vue Cli4搭建Vue3 TSX移动端项目（二）

Vue Cli4搭建Vue3 TSX移动端项目（二）

在上一篇教程中，我们已经完成了Vue3 TSX移动端项目的初始化和基础配置。在这篇教程中，我们将继续深入探讨如何进行移动端自适应，使用HardSource来加速开发构建，通过babel-plugin-import实现按需引入，以及如何配置eslint和stylelint。

移动端自适应

为了让我们的项目能够适应不同尺寸的移动设备，我们需要进行移动端自适应。我们可以使用viewport meta标签来控制视口的大小和缩放比例。在index.html文件中，添加以下代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

这样，我们的项目就可以适应不同尺寸的移动设备了。

HardSource开发构建加速

HardSource是一个webpack插件，可以缓存webpack的编译结果，从而加速开发构建。在package.json文件中，添加以下依赖：

"hard-source-webpack-plugin": "^2.0.0"

然后在webpack.config.js文件中，添加以下配置：

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  plugins: [
    new HardSourceWebpackPlugin()
  ]
};

babel-plugin-import按需引入

babel-plugin-import是一个babel插件，可以实现按需引入。在package.json文件中，添加以下依赖：

"babel-plugin-import": "^1.13.8"

然后在.babelrc文件中，添加以下配置：

{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

这样，我们就可以在代码中按需引入vant组件了。

eslint和stylelint配置

eslint和stylelint是两个代码检查工具，可以帮助我们发现代码中的错误和不规范之处。在package.json文件中，添加以下依赖：

"eslint": "^8.10.0",
"stylelint": "^14.5.0",
"eslint-plugin-vue": "^8.0.1",
"stylelint-config-standard": "^26.0.0"

然后在.eslintrc.js文件中，添加以下配置：

module.exports = {
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  rules: {
    // ...
  }
};

在.stylelintrc.js文件中，添加以下配置：

module.exports = {
  extends: ['stylelint-config-standard'],
  rules: {
    // ...
  }
};

这样，我们就可以使用eslint和stylelint来检查代码了。

总结

在这篇教程中，我们介绍了如何进行移动端自适应，使用HardSource来加速开发构建，通过babel-plugin-import实现按需引入，以及如何配置eslint和stylelint。这些配置可以帮助我们搭建一个更加完善的Vue3 TSX移动端项目。