vue3项目的创建与配置
本文将从0 到 1 实现vue3项目的配置，主要是介绍npm create vite
目录
项目初始化区分
快速创建方式
创建方式区别
npm create vite 方式
npm create vue@latest 方式
npm create vite 项目配置
项目初始化
全局下载pnpm
利用pnpm和vite进行项目初始化
安装包，启动项目
访问项目
删除不必要的文件
项目配置
自动访问项目
eslint的配置
什么是eslint
初始化eslint
修改配置
添加检查规范命令
Prettier的配置
什么是Prettier?
下载安装
配置
解决eslint与prettier的冲突，和简单配置
新建.prettierrc配置规则
新建.prettierignore，配置忽略检查文件
检查是否配置成功
vscode设置自动保存使用prettier规范
stylelint配置
什么是stylelint
下载安装
配置
新建stylelint.config.js
新建.stylelintignore
配置命令
src别名配置
vite.config.ts中配置
tsconfig.json中配置
配置环境变量
创建文件
配置启动或打包不同的环境
默认启动和默认打包
配置其他环境
配置scss
安装scss
集成reset.scss
配置scss的变量
elementUI的配置(按需配置)
全局下载
引入使用
icon的按需引入
当前node版本： node v18.20.1
项目初始化区分
快速创建方式
针对项目初始化，目前项目快速创建比较多的是以下两种方式
- 直接使用vite快速构建
npm create vite- 基于vue cli创建
npm create vue@latest创建方式区别
npm create vite 方式
生成的项目结构为较为简洁，只有项目最最基本的功能，初始依赖相对较少，仅包含 Vite、Vue 核心库等基础依赖。需要后续根据项目手动安装和配置其他工具，如代码检查、格式化、状态管理等。更加适用于快速搭建原型或小型项目，而且希望自己掌握项目的每一个配置细节，根据需求逐步的添加功能和工具。
npm create vue@latest 方式
相比会有更多的配置项，如Vue Router,eslint等选择
更适合大型项目或对项目配置不熟悉的开发，可以帮助开发快速搭建一个功能齐全，符合一定规范的项目结构，节省了大量的配置时间和精力
npm create vite 项目配置
项目初始化
全局下载pnpm
npm i -g pnpm利用pnpm和vite进行项目初始化
pnpm create vite
安装包，启动项目
根据提示：进入文件夹，安装包，启动项目，可以看到启动的默认端口是5173
cd vue3-admin
pnpm install
pnpm run dev
访问项目
删除不必要的文件
将原本后续项目不需要的文件删除
svg图片，css等
项目配置
1.自动访问项目
在pnpm run dev后希望浏览器能自动打开访问项目
"scripts": {
"dev": "vite --open"
},
2.eslint的配置
什么是eslint
ESLint 中文网
eslint用于规范代码，可以通过插件配置规范代码的语法，自定义编码标准，帮助团队编写更清晰更易于维护代码
初始化eslint
成功安装后，会自动出现eslint.config.js文件
修改配置
对文件添加js的规范，忽略检查规范的文件
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
/** @type {import('eslint').Linter.Config[]} */
export default [
{files: ["**/*.{js,mjs,cjs,ts,vue}"]},
{
ignores: [
'**/*.config.js',
'dist/**',
'node_modules/**',
'!**/eslint.config.js',
'.vscode',
'config/*',
],
},
{languageOptions: { globals: globals.browser }},
pluginJs.configs.recommended,
...tseslint.configs.recommended,
...pluginVue.configs["flat/essential"],
{files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
];添加检查规范命令
1.项目src下的文件要使用eslint
2. 快速修正src下文件的eslint错误
至此可以使用命令去看看是否配置成功
3.Prettier的配置
安装 · Prettier 中文网
什么是Prettier?
prettier是专注于代码格式化的工具，关于代码外观的一致性，如缩进，引号，分号等，主要是消除不同开发之前的代码风格争议
与eslint的区别很简单：如eslint是规范代码使用const 还是let, pertteirt在意的是你是用的双引号还是单引号。eslint强调代码正确性，Prettier强调风格的一致性
同时使用，可以互补，让项目开发过程中的代码风格和习惯保持一致性，提高代码质量和可维护性
下载安装
pnpm add eslint-config-prettier prettier -Deslint-config-prettier：这是一个 ESLint 插件，它将 Prettier 应用到 ESLint 中。它会使用 Prettier 来格式化代码，并将格式化结果作为 ESLint 的一项规则来检查代码。使用 eslint-plugin-prettier 可以在代码检查的同时，自动格式化代码，使其符合 Prettier 的规则
配置
解决eslint与prettier的冲突，和简单配置
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'在eslint.config.js中配置
新建.prettierrc配置规则
{
"printWidth": 120,
"tabWidth": 2,
"useTabs": false,
"singleQuote": true,
"semi": false,
"trailingComma": "none",
"arrowParens": "avoid",
"bracketSpacing": true,
"endOfLine": "auto",
"quoteProps": "preserve"
}
新建.prettierignore，配置忽略检查文件
.DS_Store
node_modules
dist
dist-ssr
*.local
.npmrc
dev-dist
dist_electron
auto-imports.d.ts
检查是否配置成功
配置完成后，可以写一些错误代码进行测试
写代码，在执行npm run fix,则配置成功且使用
vscode设置自动保存使用prettier规范
用命令的当时其实很麻烦，每次都需要输入命令，我们可以使用vsdoe插件进行设置，文件保存就自动使用prettier
vscode 安装插件
点击右下角设置，搜索default fomatter,更改默认方式
设置-》文本编辑-》格式化-》fomat on save
设置成功后，将会保存时自动按照prettier格式保存
4.stylelint配置
Stylelint 中文网
什么是stylelint
stylelint是一个强大的css代码检查工具，可以检查scss.less等语法，统一开发者的编码风格
下载安装
pnpm add scss stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-scss stylelint-config-standard-vue stylelint-order stylelint-prettier stylelint-scss配置
新建stylelint.config.js
export default {
// 设置为根路径
root: true,
plugins: ['stylelint-prettier'],
extends: [
// standard 规则集合
'stylelint-config-standard',
// standard 规则集合的 scss 版本
'stylelint-config-standard-scss',
// 样式属性顺序规则
'stylelint-config-recess-order',
// 接入 Prettier 规则
// 'stylelint-config-prettier',
'stylelint-prettier/recommended'
],
// 忽略所有文件，除了 src 目录下的文件，并且忽略 src 目录下的 JavaScript 和 TypeScript 文件。
ignoreFiles: ['**/*', '!src/**/*', 'src/**/*.{js,jsx,ts,tsx}'],
rules: {
'prettier/prettier': true,
// 忽略以 get- 和 v- 开头的函数
'function-no-unknown': [true, { ignoreFunctions: ['/^get-/', '/^v-/'] }],
// 强制类名遵循特定的命名模式，支持 BEM 命名法和 Mui 前缀的类名。
'selector-class-pattern':
'^[a-z]([a-z0-9-]+)?(__([a-z0-9]+-?)+)?(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+){0,2}$|^Mui.*$|^([a-z][a-z0-9]*)(_[a-z0-9]+)*$',
'font-family-no-missing-generic-family-keyword': null,
'scss/dollar-variable-pattern': null,
'block-no-empty': null,
'no-empty-source': null,
'property-no-unknown': null,
'no-descending-specificity': null,
// 忽略未知的选择器
'selector-pseudo-class-no-unknown': [
true,
{
ignorePseudoClasses: ['export', 'deep', 'global', 'import']
}
],
// 在规则之前总是添加空行，除了第一个嵌套规则和注释后面的规则。
'rule-empty-line-before': [
'always',
{
except: ['first-nested'],
ignore: ['after-comment']
}
],
// 在自定义属性之前总是添加空行，除了在另一个自定义属性之后和第一个嵌套规则。
'custom-property-empty-line-before': [
'always',
{
except: ['after-custom-property', 'first-nested']
}
],
// 在声明之前总是添加空行，除了在另一个声明之后和第一个嵌套规则。
'declaration-empty-line-before': [
'always',
{
except: ['after-declaration', 'first-nested']
}
],
// 忽略以下at规则
'at-rule-no-unknown': [
true,
{
ignoreAtRules: [
'tailwind',
'apply',
'variants',
'responsive',
'screen',
'function',
'if',
'each',
'include',
'mixin',
'return',
'use'
]
}
],
// 忽略 rpx 单位。
'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
'order/order': [
[
'dollar-variables',
'custom-properties',
'at-rules',
'declarations',
{
type: 'at-rule',
name: 'supports'
},
{
type: 'at-rule',
name: 'media'
},
'rules'
],
{ severity: 'warning' }
],
// 忽视 -webkit-xxxx 等兼容写法
'property-no-vendor-prefix': [
true,
{
ignoreProperties: ['box-shadow']
}
]
},
overrides: [
{
files: ['src/**/*.vue'],
extends: ['stylelint-config-standard-scss', 'stylelint-config-recommended-vue'],
rules: {
'scss/dollar-variable-pattern': null,
'block-no-empty': null,
'comment-empty-line-before': null,
'no-empty-source': null,
'property-no-unknown': null,
'selector-pseudo-class-no-unknown': [
true,
{
ignorePseudoClasses: ['deep', 'v-deep']
}
]
}
}
]
}
新建.stylelintignore
node_modules
dist配置命令
"lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
配置命令之后，也可以写测试代码，执行命令看是否成功
也推荐使用vscode插件 - Stylelint
5.src别名配置
通常情况下，项目中都不会写太多的../../../之类的，都会进行配置，提高可读性和维护性
两个地方配置
vite配置中： 可以让vite在开发和构建过程中正确的解析路径别名
ts配置中： 仅仅是处理ts代码编译阶段，让编译器能正确解析路径别名
vite.config.ts中配置
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
配置后，path会被编译器标红，我们需要再进行配置
因为path是node环境的变量，在项目初始化时，我们选择了运行环境环境是浏览器环境，因此ts检测后会标红，这时需要再ts中配置，vite.config.ts在node环境下运行；写好之后可以重启vscode,vscode有时候会反应有些慢
{
overrides: [
{
files: ['vite.config.ts'],
env: {
node: true
}
}
]
},
tsconfig.json中配置
6.配置环境变量
通常情况，项目中会根据不同的环境配置不同的环境变量，在vite中是怎么配置的呢
创建文件
Vite 默认支持 .env 文件来管理环境变量，并且可以根据不同环境创建特定的环境变量文件。常见的环境变量文件有：
.env：所有环境都会加载的基础环境变量(所有环境公用)。.env.development：开发环境专用的环境变量。.env.production：生产环境专用的环境变量。.env.test：测试环境专用的环境变量。
注意一点，文件中的变量必须是VITE_ 开头的环境变量才能在客户端代码中被访问
客户端访问
import.meta.env.变量名如：创建生产环境
那么客户端就可以进行访问了
配置启动或打包不同的环境
默认启动和默认打包
npm run dev默认启动的时候读取的是配置.env 和 .env.development
npm run build
默认打包读取的配置.env 和 .env.production
配置其他环境
如果想要其他环境，可以新增其他命令，利用 --mode 环境模式启动或打包其他环境
vite --mode test案例
7.配置scss
其实在之前配置stylelint已经安装过scss了，如果已经安装过scss了可以忽略
安装scss
pnpm install scss集成reset.scss
移除每个浏览器不同的默认样式
src下创建styles, styles下创建两个scss,reset.scss和index.scss
reset.scss
/* 全局重置样式 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 显示角色重置为块级元素 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
/* 重置列表样式 */
ol,
ul {
list-style: none;
}
/* 重置引用样式 */
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
/* 重置表格样式 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 重置链接样式 */
a {
text-decoration: none;
color: inherit;
}
/* 重置按钮样式 */
button {
background: none;
border: none;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
cursor: pointer;
outline: none;
}
/* 重置输入框样式 */
input,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
outline: none;
}
/* 重置选择框样式 */
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
outline: none;
}
/* 移除 IE 下的默认清除按钮 */
input::-ms-clear {
display: none;
}
/* 移除 Firefox 下的默认边框 */
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/* 重置图片样式 */
img {
max-width: 100%;
height: auto;
display: block;
}
index.scss中引入
@import url(./reset.scss);
main.ts中引入index.scss
import '@/styles/index.scss'上面步骤只是引入了scss,会发现scss中的变量是无法使用的
配置scss的变量
1.创建单独文件variable.scss在其中定义变量
2.vite.config.ts中配置
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/styles/variable.scss";'
}
}
}
3.任何scss地方使用变量
p {
color: variable.$color;
}scss变量的时候要注意几个问题
1. Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0, scss如果使用的高版本，要用@use,配置时不能使用@import
2. Can't find stylesheet to import.报错
3. 重复引入module报错
具体详解： vite配置scss全局变量-CSDN博客
8.elementUI的配置(按需配置)
全局下载
pnpm install element-plus @element-plus/icons-vue引入使用
icon的按需引入
9.axios的封装和api管理
9.1 下载axios
npm install axios9.2 src下创建文件夹utils,utils下创建request.ts
import axios from 'axios'
import { ElMessage } from 'element-plus'
const request = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API, // 基础路径
timeout: 50000 // 超时时间
})
// 请求拦截
request.interceptors.request.use(config => {
// 配置请求的公共参数
config.headers.token = 'token' // 根据项目自己存储让获取token
return config
})
// 响应拦截
request.interceptors.response.use(
res => {
// 成功回调
console.log(res)
return res.data
},
err => {
// 失败回调, 处理网络错误
const status = err.response.status
let msg = '网络错误'
switch (status) {
case 401:
msg = 'TOKEN过期'
break
case 403:
msg = '无权访问'
break
case 404:
msg = '请求错误'
break
case 500:
msg = '服务器错误'
break
default:
break
}
ElMessage({
type: 'error',
message: msg
})
return Promise.reject(err)
}
)
export default request
9.3 在src下创建apis文件夹
以用户登录和获取用户信息接口为例
apis下创建users文件夹，users下分别创建index.ts和type.ts
index.ts 统一管理请求
import request from '@/utils/request'
import type { loginForm, loginResData, userInfoRes } from './type.ts'
// 登录接口
export const login = (data: loginForm) => request.post<any, loginResData>('/login', data)
// 获取用户数据
export const userInfo = () => request.get<any, userInfoRes>('/userInfo')
type.ts 定义数据类型
// 登录参数
export interface loginForm {
username: string
password: string
}
interface dataType {
token: string
}
// 登录返回参数类型
export interface loginResData {
code: number
data: dataType
}
interface user {
userId: number
avatar: string
username: string
roles: string[]
buttons: string[]
routes: string[]
}
export interface userInfoRes {
code: number
data: user
}