🎉🎉🎉2024年了还不会vue3？从0到1 用vite搭建vue3项目，开箱即用

仓库地址点击

预览地址点击

安装vite

sql 复制代码

npm create vite@latest my-vue-app -- --template vue

这样就会生成模板项目，如下图

当我们有了模板之后，在团队合作中需要有一定的规划，形成代码的可维护性，就需要借助工具插件来配置代码上的规划，有利于代码的可读性。

配置 typescript

css 复制代码

pnpm i typescript vue-tsc -D

在根目录新建tsconfig.json文件

json 复制代码

{  
  "compilerOptions": {  
    "target": "ESNext",  
    "useDefineForClassFields": true,  
    "module": "ESNext",  
    "moduleResolution": "Node",  
    "strict": false,  
    "jsx": "preserve",  
    "sourceMap": true,  
    "resolveJsonModule": true,  
    "isolatedModules": true,  
    "esModuleInterop": true,  
    "allowSyntheticDefaultImports": true,  
    "lib": ["ESNext", "DOM"],  
    "noEmit": true,  
    // 跳过库检查，解决打包失败  
    "skipLibCheck": true,  
    },  
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],  
    "references": [  
        { "path": "./tsconfig.node.json" }  
    ],  
    "exclude": ["node_modules","dist","**/*.js"]  
}

然后再package.json中script对象build中前面加上配置

less 复制代码

build:vue-tsc --noEmit && vite build

配置eslint

eslint 主要解决的是代码质量问题

bash 复制代码

pnpm install eslint 
eslint-plugin-vue 
@typescript-eslint/parser 
@typescript-eslint/eslint-plugin 
@vue/eslint-config-typescript -D

名称	说明
eslint	ESLint是一个用于识别和报告在ECMAScript/JavaScript代码中发现的模式的工具
eslint-plugin-vue	Vue 的官方 ESLint 插件
@typescript-eslint/parser	Vue 的官方 ESLint 插件
eslint-plugin-vue	一个ESLint解析器，它利用TypeScript-ESTree 允许ESLint 检查TypeScript 源代码
@typescript-eslint/eslint-plugin	一个ESLint插件，为TypeScript代码库提供lint规则
@vue/eslint-config-typescript	Vue的eslint-config-typescript

新建eslintrc.js

java 复制代码

module.exports = {  
    "env": {  
        "browser": true,  
        "es2021": true,  
        "node":true  
    },  
    extends: [  
        'plugin:vue/vue3-recommended',  
        'eslint:recommended',  
        'plugin:vue/vue3-essential',  
        'plugin:@typescript-eslint/recommended',  
        'plugin:prettier/recommended',  
    ],
    "parser": "vue-eslint-parser",  
    "parserOptions": {  
        "ecmaVersion": "latest",  
        "parser": "@typescript-eslint/parser",  
        "sourceType": "module"  
    },  
    "plugins": [  
        "vue",  
        "@typescript-eslint"  
    ],  
    // 配置规则
    "rules": {  
    }  
}

新建eslint 忽略文件 .eslintignore

bash 复制代码

*.sh  
node_modules  
*.css  
*.jpg  
*.jpeg  
*.png  
*.gif  
*.md  
*.woff  
*.ttf  
.vscode  
.idea  
dist  
/public  
/docs  
.husky  
.local  
/bin  
Dockerfile

在package.json里的script里配置

json 复制代码

"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx",

这样 eslint 就配置好了

配置 prettier 主要解决的是代码风格问题

prettier 主要解决的是代码风格问题

安装

arduino 复制代码

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

名称	说明
prettier	代码格式化
eslint-plugin-prettier	作为ESLint规则运行得prettier
@vue/eslint-config-prettier	Vue的 eslint-config-prettier

然后在.eslintrc.js文件中配置

php 复制代码

extends: [  
    'plugin:vue/vue3-recommended',  
    'eslint:recommended',  
    'plugin:vue/vue3-essential',  
    'plugin:@typescript-eslint/recommended',  
    'plugin:prettier/recommended',  
],

新建.prettierrc文件

ruby 复制代码

module.exports = {  
    // 一行的字符数，如果超过会进行换行，默认为80  
    printWidth: 100,  
    // 行位是否使用分号，默认为true  
    semi: false,  
    vueIndentScriptAndStyle: true,  
    // 字符串是否使用单引号，默认为false，使用双引号  
    singleQuote: true,  
    // 是否使用尾逗号，有三个可选值"<none|es5|all>"  
    trailingComma: 'all',  
    proseWrap: 'never',  
    htmlWhitespaceSensitivity: 'strict',  
    endOfLine: 'auto',  
};

editorconfig

editorconfig帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式
不同的开发人员，不同的编辑器，有不同的编码风格，而 EdiorConfig 就是用来协同团队开发人员之间的代码的风格及样式规范化的一个工具而editorconfig 正是它的默认配置文件
EditorConfig
vscode这类编辑器3期要安装editorconfig 插件

新建.editorconfig文件

Unix 系统里，每行结尾只有换行即 nLF(Line Feed)
Windows系统里面，每行结尾是换行回车，即 rn CR/LF
Mac系统里，每行结尾是回车，即 r CR(Carriage Return)

ini 复制代码

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

配置git hooks

在代码提交之前检查

可以在git commit之前检查代码，，保证所有提交到版本库中的代码都是符合规范的
可以在git push之前执行单元测试保证所有的提交的代码经过的单元测试
husky可以让我们向项目中方便添加 git hks ,它会自动在仓库中的 gt/ 目录下增加相应的钩子,比如 pre-ommit 钩子就会在你执行commit 命令的时候的触发
lint-staged用于实现每次提交只检查本次提交所修改的文件
mrm可以根据 package.json 依赖项中的代码质量工具来安装和配置 husky 和 int-staged
Commitlint可以规范 git commit -m ""中的描述信息

安装lint-staged

mrm 安装 lint-staged 的同时会安装 husky

pnpm install mrm -D
npx mrm lint-staged

然后它会自动在package.json文件中的script对象中生成

json 复制代码

"prepare": "husky install"

json 复制代码

"lint-staged": {  
    "src/**/*.{vue,js,ts,jsx,tsx}": "eslint --cache --fix"
}

同时在根目录也会生成.husky目录，如下图

这样 husky 就成功啦，当你git commit 的时候就会触发 husky钩子函数了

配置 commitlint

当你想要你提交的git 形成一定的规划的时候，就需要配置 commitlint，类似这样

commitlint推荐我们使用onfig-conventional配置去写commit 提交格式git commit =m [optional scope]:

type :用于表明我们这次提交的改动类型，是新增了功能? 还是修改了测试代码?又或者是更新了文档?
optional scope ：一个可选的修改范围。用于标识此次提交主要涉及到代码中哪个模块
description:一句话描述此次提交的主要内容，做到言简意咳

type

类型	描述
build	编译相关的修改，例如发布版本、对项目构建或者依赖的改动
chore	其他修改，比如改变构建流程、或者增加依赖库、工具等
ci	持续集成修改
docs	文档修改
feature	新特性、新功能
fix	修改 bug
refactor	代码重构
revert	回滚到上一个版本
style	代码格式修改
test	测试用例修改

安装

bash 复制代码

pnpm install @commitlint/cli @commitlint/config-conventional -D

配置

bash 复制代码

npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

当运行之后就会生成这样如下图

安装postcss

添加css预处理器，自动增加前缀，适配各个浏览器

css 复制代码

pnpm i postcss postcss-preset-env -D

在根目录下新建postcss.config.js

css 复制代码

 module.exports = {  
    plugins: [  
        require('postcss-preset-env')  
    ]  
}

mock

vite-plugin-ock提供本地和生产模拟服务 vite 的数据模拟插件，是基于 vite.js 开发的。并同时支持本地环境和生产环境

css 复制代码

pnpm i mockjs vite-plugin-mock -D

在vite.config.ts 中配置

css 复制代码

import f viteMockserve i from "yite-plugin-mock"  
plugins: [vue()，viteMockServe()]

环境变量和模式

可以在根目录下新建env结尾的文件

Vite在一个特殊的import.meta.env 对象上暴露环境变量

import.meta.env.MODE:(string)应用运行的模式
import.meta.env.BASE_URL:(string)部署应用时的基本 URL。他由 base 配置项决定
import.meta.env.PROD: (boolean) 应用是否运行在生产环博
import.meta.env.DEV: (boolean)应用是否运行在开发环境(永远与importmetaenyPROD 相反)

bash 复制代码

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

配置别名 @

js 复制代码

resolve: {  
    alias: {  
        "@": resolve(__dirname, "./src"),  
    }  
},