uni-app开发实记：vue3 + vite + ts + sass + laf云开发

本文正在参加「金石计划」

项目使用uni-app

技术栈：vue3 + vite + ts + sass + laf云开发

由于笔者之前只使用过taro进行跨端开发，参考了网上很多对比文章觉得uni-app也值得尝试下，所以抽时间浅浅尝试了一下，顺便体验了一下最近很火的laf云开发，以下是前端项目的搭建和优化过程尝试过程的分享。

项目开发记录

一、初始化项目

npx degit dcloudio/uni-preset-vue#vite-ts your-vue3-project

npx推荐：不用全局先安装vue cli 工具，直接下载最新工程
www.ruanyifeng.com/blog/2019/0…

国内下载报错的解决方法(直接下载压缩包)：

1. 打开链接github.com/dcloudio/un…
2. 切换至vite-ts分支
3. Download ZIP 到本地解压缩
4. npm i

二、Sass支持

模板默认是没有支持Sass的。安装sass-loader与node-sass,需要指定版本，版本高了无法运行。
node-sass下载太多坑了，改用sass（纯 node.js 实现的 sass 库）

sass 最早是由 ruby 实现的而非 node.js 所以它是直接二进制分发或者需要经过 node-gyp 编译，这是大家觉得它安装很“坑”的根源所在。
建议就是直接用 sass 这个纯 node.js 实现的 sass 库。

yarn add sass-loader sass --dev

之前每次都是参考网上的教程下载的node-sass，每次都有很多坑，以后建议直接使用sass包。

三、代码规范 ESLint + Prettier

无脑执行以下操作，让你在vue3+ts的项目中愉快的使用 eslint 和 prettier。

npm install eslint prettier --save-dev
npm install eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue --save-dev
npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

1. 添加 .eslintrc.js
2. 添加 .prettierrc.js

以下是笔者比较喜欢的配置分享（仅供参考）：

// .eslintrc.js
module.exports = {
  parser: 'vue-eslint-parser',
  extends: ['plugin:vue/recommended', 'plugin:prettier/recommended'],
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'vue/multi-word-component-names': 'off',,
    "vue/valid-v-for": "off",
  },
}

// .prettierrc.js
module.exports = {
  printWidth: 120,
  tabWidth: 2,
  tabs: false,
  semi: false,
  singleQuote: true,
  quoteProps: 'as-needed',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: 'always',
  endOfLine: 'auto',
}

四、Husky + lint-staged + commitlint

工程化怎么能少的了这些利器呢!不过这些配置之后虽然便利，但由于每次提交之前都会检查一遍代码，会损耗一些时间。

husky： 是一个 Git Hook 工具，借助 husky 我们可以在 git 提交的不同生命周期进行一些自动化操作
lint-staged: 用于实现每次提交只检查本次提交所修改的文件
commitlint: 提交时 commit 信息规范校验配置流程，每次提交时就会去检查你的commit-msg是否合规

1. 下载依赖

npm i husky lint-staged @commitlint/cli @commitlint/config-conventional -D

2. package.json 文件中添加 scripts

"scripts": {
    "prepare": "husky install",
    "lint": "eslint src",
    "lint-staged": "lint-staged",
    "commitlint": "commitlint --config commitlint.config.js -e -V"
}

3. 执行 npm run prepare

生成了.husky 文件夹

4. 添加 pre-commit 钩子

npx husky add .husky/pre-commit "npm run lint-staged"

执行完根目录会自动生成一个 .husky/pre-commit  脚本

5. 创建 .lintstagedrc 配置文件

{
    "src/**/*.{js,vue}": "npm run lint"
}

6. 添加 commit-msg 钩子

npx husky add .husky/commit-msg "npm run commitlint"

7. 创建 commitlint.config.js 配置文件

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      // type枚举
      2,
      'always',
      [
        'build', // 编译相关的修改，例如发布版本、对项目构建或者依赖的改动
        'feat', // 新功能
        'fix', // 修补bug
        'docs', // 文档修改
        'style', // 代码格式修改, 注意不是 css 修改
        'refactor', // 重构
        'perf', // 优化相关，比如提升性能、体验
        'test', // 测试用例修改
        'revert', // 代码回滚
        'ci', // 持续集成修改
        'config', // 配置修改
        'chore', // 其他改动
      ],
    ],
    'type-empty': [2, 'never'], // never: type不能为空; always: type必须为空
    'type-case': [0, 'always', 'lower-case'], // type必须小写，upper-case大写，camel-case小驼峰，kebab-case短横线，pascal-case大驼峰，等等
    'scope-empty': [0],
    'scope-case': [0],
    'subject-empty': [2, 'never'], // subject不能为空
    'subject-case': [0],
    'subject-full-stop': [0, 'never', '.'], // subject以.为结束标记
    'header-max-length': [2, 'always', 72], // header最长72
    'body-leading-blank': [0], // body换行
    'footer-leading-blank': [0, 'always'], // footer以空行开头
  },
}

五、推荐：inquirer + shelljs 玩转命令行

由于uni-app的命令有些多，懒得去记住，比较习惯 npm run dev 了，如果你也和我一样，那你就来试试inquirer浅尝一下吧。

inquirer inquirer 是一个常用的交互式终端用户界面集合。 简单来说 inquirer 是可以让我们很方便的做各种终端交互行为的一个库

shelljs node 中使用命令行的工具

1. 下载依赖

npm install inquirer@^8.0.0 shelljs -D

2. 创建脚本文件

// script/dev.js
const inquirer = require('inquirer')
const shell = require('shelljs') // 执行文件操作
const config = [
  {
    name: 'H5',
    value: 'npm run dev:h5',
  },
  {
    name: '微信小程序',
    value: 'npm run dev:mp-weixin',
  },
  ...
]

inquirer
  .prompt([
    {
      type: 'list',
      name: 'buildScript',
      message: '请选择你要编译的环境',
      choices: config,
    },
  ])
  .then((answers) => {
    if (!answers.buildScript) return
    shell.exec(answers.buildScript)
  })

3. Package.json 加入命令

"scripts": {
    "dev": "node scripts/dev.js",
}

4. 执行 npm run dev 即可进行环境选择编译

回车即可开始编译

六、vant-weapp组件库接入

1. 进入github:vant-weapp，下载zip文件，解压缩

2. 将解压缩之后的dist包改名为vant放入在src下新建的wxcomponents文件夹下

3. 全局使用组件

pages.json中加入如下代码

"usingComponents": {
  "van-cell-group": "/wxcomponents/vant/cell-group/index",
  "van-field": "/wxcomponents/vant/field/index",
  "van-button": "/wxcomponents/vant/button/index"
  // ...
}

4. 局部使用组件（略）

laf云开发

laf官网

laf是开源的云开发平台，提供云函数、云数据库、云存储等开箱即用的应用资源。
对于我们前端开发者而言，想要独立做自己的项目练手，又不想去弄服务器环境等等，我们可以使用下laf这个平台，免费版的对我们来说也足够了。

这次的项目也是使用的laf来编写云函数，很方便就可以出接口直接调用。在此不赘述了，感兴趣的可以进官网看看尝试下。

源码地址

github.com/strugglingl…

以上就是我整个开发尝试过程的实记啦，感谢各位朋友的观看，有兴趣的话你也可以凭借云开发来搭建一个小程序玩玩吧。