vue3+ts项目实战一

学习目标：

提示：从零开始一步一步学习搭建vue3前端项目，用于自身学习与巩固，方便查询

• vue3项目阶段练习

---

学习内容：

1. 初始化项目

1.1 使用vite工具创建项目
npm init vite@latest
1.2 根据提示输入项目名称

如出现上述内容，表示项目创建成功
1.3 安装项目依赖，命令：npm i

安装成功之后如上图显示
1.4 运行项目 命令：npm run dev

表示运行成功
1.5重新初始化项目样式，直接复制reset.css文件内容即可，将样式内容复制到style.css中
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {
margin: 0;
padding: 0
}

body,button,input,select,textarea {
font: 12px/1.5 tahoma,arial,‘Hiragino Sans GB’,‘\5b8b\4f53’,sans-serif
}

h1,h2,h3,h4,h5,h6 {
font-size: 100%
}

address,cite,dfn,em,var {
font-style: normal
}

code,kbd,pre,samp {
font-family: courier new,courier,monospace
}

small {
font-size: 12px
}

ol,ul {
list-style: none
}

a {
text-decoration: none
}

a:hover {
text-decoration: underline
}

sup {
vertical-align: text-top
}

sub {
vertical-align: text-bottom
}

legend {
color: #000
}

fieldset,img {
border: 0
}

button,input,select,textarea {
font-size: 100%
}

table {
border-collapse: collapse;
border-spacing: 0
}

2. 项目配置

2.1 eslint配置(安装)
安装eslint工具，命令： npm i eslint -D

2.2 初始化配置eslint
配置eslint，命令：npx eslint --init

.eslintrc.cjs文件内容及说明：
module.exports = {
// 环境:
“env”: {
// 浏览器
“browser”: true,
// 最新es语法
“es2021”: true,
// node环境
node: true
},
// 扩展的eslint规范语法，可以被继承的规则
// 字符串数组：每个配置继承它前面的配置
// 分别是：
// eslint-plugin-vue提供的
// eslint-config-airbnb-base提供的
// eslint-config-prettier提供的
// 前缀 eslint-config-, 可省略
“extends”: [
//全部规则默认是关闭的,这个配置项开启推荐规则,推荐规则参照文档
//比如:函数不能重名、对象不能出现重复key
“eslint:recommended”,
//ts语法规则
“plugin:@typescript-eslint/recommended”,
//vue3语法规则
“plugin:vue/vue3-essential”
],
“overrides”: [
{
“env”: {
“node”: true
},
“files”: [
“.eslintrc.{js,cjs}”
],
“parserOptions”: {
“sourceType”: “script”
}
}
],
//指定解析器选项
“parserOptions”: {
//校验ECMA最新版本
“ecmaVersion”: “latest”,
//指定解析器:解析器
//Esprima 默认解析器
//Babel-ESLint babel解析器
//@typescript-eslint/parser ts解析器
“parser”: “@typescript-eslint/parser”,
//设置为"script"（默认），或者"module"代码在ECMAScript模块中
“sourceType”: “module”
},
//ESLint支持使用第三方插件。在使用插件之前，您必须使用npm安装它
//该eslint-plugin-前缀可以从插件名称被省略
“plugins”: [
“@typescript-eslint”,
“vue”
],
/*
eslint规则

• “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', // 对模板中的自定义组件强制执行属性命名样式
'@typescript-eslint/ban-ts-comment': 'off',
}

}

2.3 vue3环境代码校验插件
安装指令 npm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser
2.4 package.json新增两个运行脚本
“scripts”: {
“lint”: “eslint src”,
“fix”: “eslint src --fix”,
}
2.5 创建.eslintignore忽略文件
内容：
dist
node_modules
2.6 配置prettier
有了eslint，为什么还要有prettier？eslint针对的是javascript，他是一个检测工具，包含js语法以及少部分格式问题，在eslint看来，语法对了就能保证代码正常运行，格式问题属于其次；

而prettier属于格式化工具，它看不惯格式不统一，所以它就把eslint没干好的事接着干，另外，prettier支持

包含js在内的多种语言。

总结：eslint和prettier一个保证js代码质量，一个保证代码美观。
安装依赖包：
npm 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/
通过npm run lint去检测语法，如果出现不规范格式,通过npm run fix 修改