本文正在参与「金石方案 . 瓜分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 装置，然后便是对项目一些装备的选择：

vite3+vue3+ts+pinia + Naive UI 项目实战 —— 项目创立与初始装备

装备结束后就会主动开始构建项目。由于生成的项目并没有帮咱们装置依靠，所以第一次发动项目时需求先履行 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 这两个插件：

vite3+vue3+ts+pinia + Naive UI 项目实战 —— 项目创立与初始装备

增加 .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 的相关装备。

vite3+vue3+ts+pinia + Naive UI 项目实战 —— 项目创立与初始装备

装备 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 插件：

vite3+vue3+ts+pinia + Naive UI 项目实战 —— 项目创立与初始装备

eslint

由于咱们在构建时选择了装置 eslint，所以无需做过多的设置，只需求注意两点：

  • 为了避免与 prettier 产生冲突，需求在 .eslintrc.cjs 增加如下装备，装备完后假如发现还有冲突报错能够重启下 vs code：
module.exports = {
  extends: [
    // ... 省掉
    'plugin:prettier/recommended'
  ]
}
  • 假如想在顺手保存时就进行代码查看，需求装置插件：

vite3+vue3+ts+pinia + Naive UI 项目实战 —— 项目创立与初始装备

装备 husky

现在装置 husky 来帮助咱们对提交到 git 仓库的代码做语法查看。依据其文档的引荐，直接履行如下指令能够主动完结相关装备与装置：

npx husky-init && npm install

之后，咱们需求将主动生成的 .huskypre-commit 文件中的指令改成如下指令，也便是在提交前履行下 eslint 的语法查看，并做主动的修正：

npm run lint

重置款式

为了使不同的阅读器在渲染网页元素的时候方式更一致，咱们最好装置下 normalize.css：

npm install --save normalize.css

然后在 main.ts 引进让其收效：

// srcmain.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 个文件：

vite3+vue3+ts+pinia + Naive UI 项目实战 —— 项目创立与初始装备

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

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

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

vite3+vue3+ts+pinia + Naive UI 项目实战 —— 项目创立与初始装备

vite3+vue3+ts+pinia + Naive UI 项目实战 —— 项目创立与初始装备

本文正在参与「金石方案 . 瓜分6万现金大奖」