Vue3+Vite项目从零搭建+安装依赖+配置按需导入

npm install element-plus
引入 Element Plus 组件库并使用

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

测试安装结果

<template><div><h1>App</h1><el-button type="primary">button</el-button></div>
</template>

按钮正常显示，说明安装成功

npm install vue-router
在项目的 src 目录下新建一个 views 目录，然后在 views 目录下新建两个页面（login/index.vue; dashboard/index.vue)，用于路由跳转。
在项目的 src 目录下新建一个 router 目录，然后在 router 目录下新建一个 index.js 文件，该文件会作为 Vue Router 的入口文件，该文件内容如下

<!-- Vue Router 的入口文件 -->
import {createRouter, createWebHistory} from "vue-router";const router = new createRouter({history: createWebHistory(),routes: [{path: "/login",name: "Login",component: () => import("../views/login/index.vue"),},{path: "/dashboard",name: "Dashboard",component: () => import("../views/dashboard/index.vue"),},]})
export default router

// src/main.js
// ...
import router from './router' // 新增
app.use(router) // 新增：使用 Vue Router
// ...

修改 App.vue 文件，添加路由跳转

<template><div class="app-container"><ul><!-- router-link 是用来实现路由跳转 --><li><router-link to="/dashboard">首页</router-link></li><li><router-link to="/login">登录</router-link></li></ul><!-- router-view 是用来显示路由对应的内容 --><router-view /></div>
</template>

npm install pinia
在项目的 src 目录下新建一个 store 目录，然后在 store 目录下新建一个 index.ts 文件，该文件会作为 Pinia 的入口文件

import {createPinia} from 'pinia'const pinia = createPinia()
export default pinia

在 src/main.ts 文件中引入 Pinia，并使用 Pinia

// src/main.js
// ...
import pinia from './store' // 新增
app.use(router) // 新增：使用 Pinia
// ...

在 src/store 目录下创建一个 modules 目录，然后在 modules 目录下创建一个 user 状态管理对象，用于管理整个项目的用户登录状态

// src/store/modules/user.js
import {defineStore} from 'pinia'
import {ref} from 'vue'const useUserStore = defineStore('user', () => {const userInfo = ref({})const loginStatus = ref(false)const token = ref('')/*** 登录*/function handleLogin() {return new Promise((resolve, reject) => {// 当随机数大于0.8时，成功登录if(Math.random() > 0.8){loginStatus.value = truetoken.value = String(new Date().getTime())userInfo.value = {name: 'admin',avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80',}resolve('登录成功')}else {reject('登录失败')}})}/*** 退出登录*/function handleLogout() {return new Promise((resolve) => {loginStatus.value = falsetoken.value = ''userInfo.value = {}resolve()})}return {userInfo,loginStatus,token,handleLogin,handleLogout}
})export default useUserStore

npm install sass -D
在项目的 src 目录下新建一个 styles 目录，然后在 styles 目录下新建一个 variables.scss 文件，该文件存放全局的 Sass 变量

$success: #48C78E;
$danger: #F28482;

首页测试 Sass 变量，在 src/views/dashboard/index.vue 文件中修改如下

<template><h1 class="success">这是一个成功样式</h1><h2 class="danger">这是一个告警样式</h2>
</template><style scoped lang="scss">
.success{color:$success;
}
.danger{color: $danger;
}
</style>

在 vite.config.js 文件中引入Undefined variable.，才能使用 Sass 变量

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],css: {// CSS 预处理器preprocessorOptions: {// 定义全局 SCSS 变量scss: {javascriptEnabled: true,additionalData: "@use '/src/styles/variables.scss' as *;",},},},
})

npm i @vueuse/core
在 src/views/dashboard/index.vue 文件中，使用 VueUse 的 useMouse 方法，获取当前鼠标实时位置

<template><h1 class="success">这是一个成功样式</h1><h2 class="danger">这是一个告警样式</h2><p>当前鼠标位置：X:{{ x }}、Y:{{ y }}</p>
</template><script setup>
import {useMouse} from '@vueuse/core'
const {x,y} = useMouse()
</script><style scoped lang="scss">
.success{color:$success;
}
.danger{color: $danger;
}
</style>

npm install axios
在 src 目录下新建一个 utils 目录，然后在 utils 目录下新建一个 request.ts 文件，在该文件中，可以在发起请求前向请求头中添加一些请求头等信息
对axios二次封装

目的:

1. 使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)
2. 使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)

在根目录下创建utils/request.ts

import axios from "axios";
import { ElMessage } from "element-plus";
//创建axios实例
let request = axios.create({baseURL: import.meta.env.VITE_APP_BASE_API,timeout: 5000
})
//请求拦截器
request.interceptors.request.use(config => {return config;
});
//响应拦截器
request.interceptors.response.use((response) => {return response.data;
}, (error) => {//处理网络错误let msg = '';let status = error.response.status;switch (status) {case 401:msg = "token过期";break;case 403:msg = '无权访问';break;case 404:msg = "请求地址错误";break;case 500:msg = "服务器出现问题";break;default:msg = "无网络";}ElMessage({type: 'error',message: msg})return Promise.reject(error);
});
export default request;

npm install echarts
在 src/views/dashboard/index.vue 文件中，使用 Echarts 的 init 方法，初始化一个图表

<script setup>
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";const chartRef = ref(null)
let echartClient = null
onMounted(() => {initChart()
})
function initChart() {echartClient =  echarts.init(chartRef.value)echartClient.setOption({tooltip: {},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]})
}
</script><template><div class="chart-box" ref="chartRef" ></div>
</template><style scoped lang="scss">
.chart-box{width: 600px;height: 400px;
}
</style>

页面上可以看到一个柱状图，表示 Echarts 工具库已经正常工作了

npm init @eslint/config
新增.eslintignore忽略文件

dist
node_modules

package.json新增两个运行脚本

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

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 add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D
新增.stylelintrc.cjs配置文件

// @see https://stylelint.bootcss.com/module.exports = {extends: ['stylelint-config-standard', // 配置stylelint拓展插件'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化'stylelint-config-standard-scss', // 配置stylelint scss插件'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,'stylelint-config-prettier', // 配置stylelint和prettier兼容],overrides: [{files: ['**/*.(scss|css|vue|html)'],customSyntax: 'postcss-scss',},{files: ['**/*.(html|vue)'],customSyntax: 'postcss-html',},],ignoreFiles: ['**/*.js','**/*.jsx','**/*.tsx','**/*.ts','**/*.json','**/*.md','**/*.yaml',],/*** null  => 关闭该规则* always => 必须*/rules: {'value-keyword-case': null, // 在 css 中使用 v-bind，不报错'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"'no-empty-source': null, // 关闭禁止空源码'selector-class-pattern': null, // 关闭强制选择器类名的格式'property-no-unknown': null, // 禁止未知的属性(true 为不允许)'block-opening-brace-space-before': 'always', //大括号之前必须有一个空格或不能有空白符'value-no-vendor-prefix': null, // 关闭 属性值前缀 --webkit-box'property-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-mask'selector-pseudo-class-no-unknown': [// 不允许未知的选择器true,{ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略属性，修改element默认样式的时候能使用到},],},
}

新增.stylelintignore忽略文件

/node_modules/*
/dist/*
/html/*
/public/*

配置统一的prettier来格式化js和css，html代码

 "scripts": {"dev": "vite --open","build": "vue-tsc && vite build","preview": "vite preview","lint": "eslint src","fix": "eslint src --fix","format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"","lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix","lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"},

npm install -D unplugin-vue-components unplugin-auto-import
配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'export default defineConfig({plugins: [vue(),AutoImport({// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等imports: ['vue', 'vue-router', '@vueuse/core'],// 自动导入 Element Plus 相关函数resolvers: [ElementPlusResolver()],eslintrc: {enabled: true, // 解决 Eslint 提示 no-undef 错误},}),Components({resolvers: [ElementPlusResolver()],}),],resolve: {alias: {'@': path.resolve('./src'), // 相对路径别名配置，使用 @ 代替 src},},css: {// CSS 预处理器preprocessorOptions: {// 定义全局 SCSS 变量scss: {javascriptEnabled: true,additionalData: "@use '/src/styles/variables.scss' as *;",},},},
})

删除 src/main.js 文件中之前引入的 Element Plus 的代码，所有与 Element Plus 相关的代码都被自动导入了，无需再手动引入。

在 src/utils 文件夹下创建 echarts.ts 文件，把需要用到的图表组件导入到该文件中，在需要使用 Echarts 的地方直接导入该文件，这样就可以按需导入 Echarts 图表库了

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent,
} from "echarts/components";
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";// 注册必须的组件
echarts.use([TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent,BarChart,LabelLayout,UniversalTransition,CanvasRenderer,
]);export default echarts;

修改 src/views/dashboard/index.vue 文件，引入 src/utils/echarts.ts 文件，这样就可以按需导入 Echarts 图表库了

// import * as echarts from "echarts"; // 删除
import echarts from "@/utils/echarts"; // 新增