likes
comments
collection
share

vue3+vite搭建企业级工程环境配置

作者站长头像
站长
· 阅读数 84

环境准备:

  • node > 12.0.0
  • pnpm
  • vscode

pnpm介绍

为什么选择它？

  • 快：pnpm 是同类⼯具速度的将近 2 倍
  • ⾼效：node_modules 中的所有⽂件均链接⾃单⼀存储位置
  • ⽀持单体仓库：monorepo，单个源码仓库中包含多个软件 包的⽀持
  • 权限严格：pnpm 创建的 node_modules 默认并⾮扁平结 构，因此代码⽆法对任意软件包进⾏访问

更多了解pnpm优势

vite介绍

  • 极速的服务启动，使⽤原⽣ ESM ⽂件，⽆需打包! （原来整 个项⽬的代码打包在⼀起，然后才能启动服务）
  • 轻量快速的热重载 ⽆论应⽤程序⼤⼩如何，都始终极快的模块热替换（HMR）
  • 丰富的功能 对 TypeScript、JSX、CSS 等⽀持开箱即⽤。
  • 优化的构建 可选 “多⻚应⽤” 或 “库” 模式的预配置 Rollup 构建通⽤的插件 在开发和构建之间共享 Rollup-superset 插件接⼝。
  • 完全类型化的 API 灵活的 API 和完整 TypeScript

推荐阅读前端模块化简史

项目初始化

pnpm init  // 初始化package.json
pnpm install vite -D // 安装vite

1. package.json增添启动命令

"scripts": {
	"dev": "vite",
	"build": "vite build"
}

2. 入口 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vite-start</title>
  </head>
  <body>
    <!-- 根组件挂载 -->
    <div id="app">
      <!-- 采用esm的模式加载 -->
      <script type="module" src="./src/main.ts"></script>
    </div>
  </body>
</html>

3. main.ts

pnpm install vue // 安装vue
import { createApp } from "vue"
import App from "./App.vue" // 这⾥会报错，不⽀持.vue
createApp(App).mount("#app")

4. env.d.ts

//  声明文件  告诉引入.vue 文件的类型是什么
declare module "*.vue" {
  import type { DefineComponent } from "vue"
  const component: DefineComponent<{}, {}, any>
  export default component
}

5. vite.config.ts

我们需要让 vite ⽀持.vue ⽂件的解析

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
export default defineConfig({
	plugins: [vue()]
})

此时运行 pnpm dev 项目就能启动了

6. vue-tsc

  • Vite 仅执⾏ .ts ⽂件的转译⼯作，并 不 执⾏任何类型检 查。vue-tsc可以对 Vue3 进⾏ Typescript 类型较验

安装依赖

pnpm install typescript vue-tsc -D

创建tsconfig.json

{
  "compilerOptions": {
  "target": "esnext",
  "module": "esnext",
  "moduleResolution": "node",
  "strict": true,
  "sourceMap": true,
  "jsx": "preserve",
  "esModuleInterop": true,
  "lib": ["esnext", "dom"]
 },
"include": ["src/**/*.ts", "src/**/*.d.ts",
"src/**/*.tsx", "src/**/*.vue"] }

package.json配置:

"scripts": {
  "dev": "vite",
  "build": "vue-tsc --noEmit &&vite build" //--noEmit表示只做校验, 不做其他处理
},

此时再次运⾏ pnpm build则会对⽂件内容进⾏ts检测

Eslint配置

开发项⽬需要安装 vscode 插件 volar

npx eslint --init

1. 校验语法并提示错误⾏数

? How would you like to use ESLint? ...
 To check syntax only
> To check syntax and find problems
 To check syntax, find problems, and enforce
code style

2. 采⽤js-module

? What type of modules does your project use?
...
> JavaScript modules (import/export)
 CommonJS (require/exports)
 None of these

3. 项⽬采⽤vue语法

? Which framework does your project use? ...
 React
> Vue.js
 None of these

pnpm i eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest -D

支持vue中ts eslint 配置

pnpm i @vue/eslint-config-typescript -D

4. .eslintrc.js

module.exports = {
env: {
	browser: true,
  es2021: true,
	node: true
},
extends: [
  "eslint:recommended",
  "plugin:vue/vue3-essential", // vue3解析
  https://eslint.vuejs.org/
  "plugin:@typescript-eslint/recommended"
],
  parser: "vue-eslint-parser", // 解析 .vue⽂件
  parserOptions: {
    parser: "@typescript-eslint/parser", // 解析
    .ts ⽂件
    ecmaVersion: "latest",
    sourceType: "module"
   },
  plugins: ["vue", "@typescript-eslint"],
  rules: {}
}

5. .eslintignore配置

node_modules
dist
*.css
*.jpg
*.jpeg
*.png
*.gif
*.d.ts

最终安装vscode中eslint插件：eslint只是检测代码规范package.json中添加一下脚本命令

"lint": "eslint --fix --ext .ts,.tsx,.vue src --quiet"

prettier配置

1. eslint中进行配置

在eslint中集成prettier配置

pnpm install prettier eslint-plugin-prettier
@vue/eslint-config-prettier -D

.eslintrc.js文件中添加

module.exports = {
 "env": {
 "browser": true,
    "es2021": true,
 "node": true
 },
 "extends": [
 "eslint:recommended",
 "plugin:vue/vue3-essential", // vue3解析
https://eslint.vuejs.org/
 "plugin:@typescript-eslint/recommended",
+ "@vue/prettier"
 ],
 "parser": "vue-eslint-parser", // 解析 .vue⽂ 件
 "parserOptions": {
 "parser": '@typescript-eslint/parser',
// 解析 .ts ⽂件
 "ecmaVersion": "latest",
 "sourceType": "module"
 },
 "plugins": [
 "vue",
 "@typescript-eslint"
 ],
+ rules: {
+ "prettier/prettier": [
+ "error",
+ {
+ singleQuote: false, //使⽤单引号
+ semi: false, ////末尾添加分号
+ tabWidth: 2,
+ trailingComma: "none",
+ useTabs: false,
+ endOfLine: "auto"
+ }
+ ]
 }
}

2. prettierrc.js

module.exports = {
  singleQuote: false, //使⽤单引号
  semi: false, ////末尾添加分号
  tabWidth: 2,
  trailingComma: "none",
  useTabs: false,
  endOfLine: "auto"
}

.prettierignore

node_modules
dist

最终安装vscode中Prettier插件：prettier只是⽤来格 式化代码 这⾥需要配置Format On Save 为启⽤，保存时⾃动格式 化 Default Formatter选择Prettier - Code formattervue3+vite搭建企业级工程环境配置vue3+vite搭建企业级工程环境配置

3. .editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf

此时到这里就可以自动校验格式和相关语法了

husky

git init
pnpm install husky -D
husky install  // 启动husky && 创建目录
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "pnpm lint"

commitlint

类型描述
build主要⽬的是修改项⽬构建系统(例如glup， webpack， rollup 的配置等)的提交
chore不属于以上类型的其他类型
ci主要⽬的是修改项⽬继续集成流程(例如 Travis， Jenkins， GitLab CI， Circle 等)的提交
docs⽂档更新
feat新功能、新特性；
fix修改 bug；
perf更改代码，以提⾼性能；
refactor代码重构(重构，在不影响代码内部⾏为、功能 下的代码修改)；
revert恢复上⼀次提交；
style不影响程序逻辑的代码修改(修改空⽩字符，格式 缩进，补全缺失的分号等，没有改变代码逻辑)
test测试⽤例新增、修改；
pnpm install @commitlint/cli @commitlint/configconventional -D
npx husky add .husky/commit-msg "npx --noinstall commitlint --edit $1"

commitlint.config.js配置

module.exports = {
	extends: ["@commitlint/config-conventional"]
}

提交试试: git commit -m"feat: 初始化⼯程"

路由配置

创建文件目录/src/views/home.vue

<template>关于</template>

/src/views/about.vue

<template>首页</template>

/src/App.vue

<template>
  <router-link to="/home">首页</router-link>
  <router-link to="/about">关于页面</router-link>

  <router-view></router-view>
</template>

/router/index.ts

import { createRouter, createWebHistory } from "vue-router"
const getRoutes = () => {
// 简单格式化
const files =
import.meta.glob("../views/*.vue")
const routes =
Object.entries(files).map(([file, module]) => {
const name =
file.match(/\.\.\/views\/([^/]+?)\.vue/i)?.[1]
return {
	path: "/" + name,
  component: module
 }
 })
return routes
}
// 创建路由配置
const router = createRouter({
  history: createWebHistory(),
  routes: getRoutes()
})
export default router

.env.d.ts中添加配置

// 需要引⼊vite/client得到 ts ⽀持
/// <reference types="vite/client" />

main.ts

import router from "./router"
createApp(App).use(router).mount("#app")

此时基本的配置都完了,代码已经上传到github

总结:

  • vite在开发环境运用浏览器对原生ESM的支持, 去按需解析资源, 跳过了打包的概念;
  • vite内部并没有实现对ts的类型校验, 需要借助tsc来完成类型校验
  • eslint只做类型的校验, prettier做格式化
  • husky提供了git hook相关钩子触发之前需要做的处理, 比如代码的eslint校验, 修复等
转载自:https://juejin.cn/post/7142473814989864973
评论
请登录