本文正在参加「金石计划 . 瓜分6万现金大奖」

最近公司打算上一个新项目，是提供给国外一些快递自提站使用的后台，主要功能是当货物送达时他们使用该后台进行入库操作，等待客人上门提货。之前公司的前后台项目一直使用的都是 vue2 + js ，我还写过一些使用 nuxt2 的文章。这次打算推陈出新，使用 vue3 + ts 来书写，采用 vite3 构建，选用 pinia 作为状态管理库，并以 Naive UI 作为 ui 框架。

创建项目

请注意，使用 vite3 构建时，node 版本号至少需要 16.0，否则会遇到些报错，比如安装 sass 会构建失败等。我们在命令行工具输入：

npm init vue@latest

随后会如下图提示说需要安装 create-vue，也就是 vue 官方基于 vite 的项目脚手架工具。输入 y 安装，然后就是对项目一些配置的选择：

配置完毕后就会自动开始构建项目。因为生成的项目并没有帮我们安装依赖，所以第一次启动项目时需要先执行 npm install 安装依赖。

服务器配置

为了方便开发，我对默认的一些开发服务器配置进行了如下修改：

• 让服务器启动后自动打开浏览器；
• 设置 host 为 true，方便在手机上查看移动端效果。
  • 如果手机上输入 ip 地址和端口号后还是打不开项目，可以尝试关闭电脑安全软件的防火墙；
  • 如果可以打开页面但是内容为空白，可以尝试运行 npm run build 打包项目，然后运行 npm run preview 进行预览，通过预览地址浏览页面。
• 将项目默认运行的 5173 端口改成了后端要求的 9547。

export default defineConfig({
  // ...省略其它
  server: {
    open: true,
    host: true,
    port: 9547
  }
})

之后就可以运行 npm run dev 把项目跑起来了。

初始配置

接下来就是对项目进行一些其它的初始配置，让项目更加规范。

添加推荐的插件

我是使用 vs code 开发的，在 vite 帮我们生成的项目目录里可以看到有个 .vscode 目录，里面的 extensions.json 内容如下：

{
  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}

意思是建议安装 volar 和 vscode-typescript-vue-plugin 这两个插件：

添加 .editorconfig

root = true

[*] # 针对所有文件
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md] # 仅针对 md 文件
insert_final_newline = false
trim_trailing_whitespace = false

.editorconfig 文件的作用在于让使用不同操作系统或不同开发工具的人在编写代码时保持风格的一致。
比如 charset = utf-8 就是规定了采用哪种字符编码； indent_style = space 是让缩进风格为空格，而不是 tab；
end_of_line = lf 是让换行符为 lf，windows 系统换行符默认都是用 crlf，而 mac 电脑用的是 cr，linux 用的是 lf，如果不统一就容易导致在提交 git 的时候发现看起来啥都没改，但却有一堆文件更新。
请注意，需要安装 EditorConfig for VS Code 插件，让 .editorconfig 里的配置生效，以覆盖原本 vs code 的相关配置。

配置 prettier 与 eslint

我们在构建项目时选择了安装 prettier 与 eslint，但生成后的项目还会有些问题，比如 prettier 的配置会与 eslint 的产生冲突，需要进行些额外的配置。

prettier

配置 .prettierrc.json

默认生成的 .prettierrc.json 里的规则太少了，于是进行了些补充，最终代码如下：

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 80,
  "useTabs": false,
  "tabWidth": 2,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "trailingComma": "none",
  "endOfLine": "auto"
}

每条规则的意思想必大家几乎都看得懂，这里稍稍介绍下两个：

• "bracketSpacing": true：规定对象、数组的括号与文字间需要加上空格；
• "arrowParens": "avoid"：规定当箭头函数只有一个参数的时候禁止使用括号。

添加脚本

可以在 package.json 添加如下脚本：

{
  "scripts": {
    "prettier": "prettier --write ."
  },
}

之后只需执行 npm run prettier 就能对整个项目进行格式化。

添加 .prettierignore

当我们执行上面添加的脚本命令来进行格式化时，告诉 prettier 哪些文件是不需要对其进行格式化的：

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

如果想让代码在保存时就自动运用 prettier 进行格式化，还需要安装 Prettier – Code formatter 插件：

eslint

因为我们在构建时选择了安装 eslint，所以无需做过多的设置，只需要注意两点：

• 为了避免与 prettier 产生冲突，需要在 .eslintrc.cjs 添加如下配置，配置完后如果发现还有冲突报错可以重启下 vs code：

module.exports = {
  extends: [
    // ... 省略
    'plugin:prettier/recommended'
  ]
}

• 如果想在随手保存时就进行代码检查，需要安装插件：

配置 husky

现在安装 husky 来帮助我们对提交到 git 仓库的代码做语法检查。根据其文档的推荐，直接执行如下命令可以自动完成相关配置与安装：

npx husky-init && npm install

之后，我们需要将自动生成的 .husky\pre-commit 文件中的指令改成如下命令，也就是在提交前执行下 eslint 的语法检查，并做自动的修复：

npm run lint

重置样式

为了使不同的浏览器在渲染网页元素的时候形式更统一，我们最好安装下 normalize.css：

npm install --save normalize.css

然后在 main.ts 引入让其生效：

// src\main.ts
import 'normalize.css'

使用 Naive UI

naive ui 相对而言还是比较新的框架，文档里有些内容的示例也还没用上 <script setup> 语法糖，但尝试一阵子后感觉整体还是挺好用的。

安装

除了要安装 naive-ui 本身，还需要安装下字体 vfonts：

npm i -D naive-ui
npm i -D vfonts

安装成功后在 main.ts 进行引入：

// 通用字体
import 'vfonts/Lato.css'
// 等宽字体
import 'vfonts/FiraCode.css'

自动按需引入组件

想要直接在 .vue 文件中使用 naive ui 的组件，并且用到哪个就会自动帮我们安装与引入，需要安装下面 2 个插件：

npm i unplugin-auto-import -D
npm i unplugin-vue-components -D

之后在 vite.config.ts 进行配置：

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    // ...省略其它
    AutoImport({
      imports: [
        'vue',
        {
          'naive-ui': [
            'useDialog',
            'useMessage',
            'useNotification',
            'useLoadingBar'
          ]
        }
      ]
    }),
    Components({
      resolvers: [NaiveUiResolver()]
    })
  ],
})

其实像 Element Plus 也可以使用这两个插件来做组件的自动按需引入， AutoImport 是做自动导入的，Components 是解决组件问题的，然后 NaiveUiResolver 是说明使用的是 naive ui。

现在就可以在项目里尝试直接使用 naive ui 的组件了，并且你会发现项目里多出了2 个文件：

里面都是一些类型声明，如果在 tsconfig.json 中的 include 内添加上 "components.d.ts"：

{
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "components.d.ts"],
}

当把鼠标放在 naive ui 组件上的时候就会有类型提示了：

本文正在参加「金石计划 . 瓜分6万现金大奖」