Vite + Vue + TypeScript搭建前端项目

编程 · 2023-10-19 · 234 人浏览

工具官网

项目初始化

pnpm全称是“performant npm”,即高性能的npm。pnpm由npm/yarn衍生而来,解决了npm/yarn内部潜在的bug,极大的优化了性能,扩展了使用场景,被誉为“最先进的包管理工具”。

安装pnpm:npm i -g pnpm

项目初始化:pnpm create vite
√ Project name: ... vite-project
√ Select a framework: » Vue
√ Select a variant: » TypeScript

安装依赖:

cd vite-project
pnpm i

运行项目:pnpm run dev。想要运行项目后浏览器自动打开,可修改配置文件package.json下的"scripts" -> "dev"为:"vite --open"。

删除默认文件:

  • 删除src\style.css文件,对应的删除src\main.ts里面的import './style.css'
  • 删除src\App.vue文件里面的代码,替换为自己的代码
  • 删除src\components\HelloWorld.vue文件
  • 删除src\assets\vue.svg文件

项目配置

ESLint配置

ESLint的目标是提供一个插件化的JavaScript代码检测工具,ESLint中文网:https://eslint.nodejs.cn/

首先安装eslint:pnpm i eslint -D

生成配置文件:.eslint.cjs:npx eslint --init
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:
@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
√ Would you like to install them now? · Yes
√ Which package manager do you want to use? · pnpm

.eslint.cjs文件配置项含义:

  • "env":eslint工作环境
  • "extends":规则继承
  • "overrides":为特定类型文件指定处理器
  • "parserOptions":指定解析器选项
  • "plugins":给eslint安装的插件
  • "rules":eslint规则

Vue3环境代码校验插件:pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node @babel/eslint-parser

修改.eslintrc.cjs配置文件:

/*
* "off" 或 0    ==>  关闭规则
* "warn" 或 1   ==>  打开的规则作为警告(不影响代码执行)
* "error" 或 2  ==>  规则作为一个错误(代码不能执行,界面报错)
*/
rules: {
// eslint(https://eslint.bootcss.com/docs/rules/)
'no-var': 'error', // 要求使用 let 或 const 而不是 var
'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-unexpected-multiline': 'error', // 禁止空余的多行
'no-useless-escape': 'off', // 禁止不必要的转义字符

// typeScript (https://typescript-eslint.io/rules)
'@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
'@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
'@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
'@typescript-eslint/semi': 'off',

// eslint-plugin-vue (https://eslint.vuejs.org/rules/)
'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
},

在项目根目录下新建.eslintignore忽略文件:

dist
node_modules

添加运行脚本,在package.json新增两个运行脚本:

"scripts": {
    "lint": "eslint src",
    "fix": "eslint src --fix",
}

Prettier配置

ESLint针对的是JavaScript,是一个检测工具,包含JS语法以及少部分格式问题,在ESLint看来,语法对了就能保证代码正常运行,格式问题属于其次。

而Prettier属于格式化工具,它看不惯格式不统一,所以就把ESLint没干好的事接着干,另外,Prettier支持包含JS在内的多种语言。

总结起来,ESLint和Prettier这俩兄弟一个保证JS代码质量,一个保证代码美观。

安装依赖包:pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

在项目根目录下创建.prettierrc.json配置文件,用来添加规则:

{
  "singleQuote": true,
  "semi": false,
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "endOfLine": "auto",
  "trailingComma": "all",
  "tabWidth": 2
}

在项目根目录下创建.prettierignore忽略文件:

/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*

项目集成

集成Element Plus

官网:https://element-plus.gitee.io/zh-CN/

安装插件:pnpm i element-plus @element-plus/icons-vue

Element Plus组件默认使用英语,如果希望使用中文,需要在入口文件main.ts设置为中文:

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//@ts-ignore忽略当前文件ts类型的检测,否则有红色提示(打包会失败)
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
App.use(ElementPlus, {
  locale: zhCn,
})

src别名配置

给src文件夹配置一个别名:

// vite.config.ts
import path from 'path'
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve('./src'), // 使用 @ 代替 src
    },
  },
})

TypeScript 编译配置:

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./", // 解析非相对模块的基地址,默认是当前目录
    "paths": {
      // 路径映射,相对于baseUrl
      "@/*": ["src/*"]
    },
}

环境变量配置

项目根目录分别添加开发、生产和测试环境的文件:.env.development、.env.production、.env.test。

JavaScript
Theme Jasmine by Kent Liao