项目启动

初始化vue3项目

1. 这里建议先下载pnpm，下载速度更快，如果还没下载可以使用
   npm install -g pnpm
   如果遇到报错问题，如下
   

可以在命令行输入下面的指令以切换到淘宝镜像源
npm config set registry https://registry.npm.taobao.org

2. 创建项目
   命令行输入pnpm create vue

根据自己的需要选择安装插件即可

3. 试运行
   命令行中也有提示，输入

cd vue-demo
pnpm install
pnpm dev

即可运行项目

页面中的都是vue官网链接以及一些提示，感兴趣的可以自己看看

配置Element-plus

ement-plus官网链接

1. 导入有完整导入和按需导入两种，推荐使用按需导致，减少代码包的大小
   首先安装element-plus
   pnpm install element-plus
   使用按需导入需额外下载插件
   pnpm install -D unplugin-vue-components unplugin-auto-import

2. 然后修改vite.config.js文件，导入插件

// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

3. 由于element-plus默认是英文，如需修改成中文可以如下操作

<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
</script><template><!-- App.vue只需要留一个路由出口 --><el-config-provider :locale="zhCn"><router-view></router-view></el-config-provider>
</template>

配置eslint

1. 刚才初始化vue项目的时候可选配置eslint，如果没有选的在命令行输入
   pnpm install eslint

2. 下载成功后会在目录中看到 .eslint.cjs 文件，打开文件修改其中内容如下，其中内容也都可以自己按需求更改

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')module.exports = {root: true,extends: ['plugin:vue/vue3-essential','eslint:recommended','@vue/eslint-config-prettier/skip-formatting'],parserOptions: {ecmaVersion: 'latest'},rules: {//禁用格式化插件 format on save关闭//安装Eslint 并配置保存时自动修复'prettier/prettier': ['warn',{singleQuote: true, // 单引号semi: false, // 无分号printWidth: 80, // 每行宽度至多80字符trailingComma: 'none', // 不加对象|数组最后逗号endOfLine: 'auto' // 换行符号不限制（win mac 不一致）}],'vue/multi-word-component-names': ['warn',{ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）}],'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验'no-undef': 'error'},globals: {ElMessage: 'readonly',ElMessageBox: 'readonly',ElLoading: 'readonly'}
}

配置axios

1. 安装axios
   pnpm install axios

2. 建议在src目录中新建utils文件夹，其中新建request.js文件
   进行如下配置

import axios from 'axios'//请求基地址
const baseURL = ''const instance = axios.create({// TODO 1. 基础地址，超时时间baseURL,timeout: 1000000
})//响应拦截器
instance.interceptors.response.use((res) => {// TODO 3. 处理业务失败// TODO 4. 摘取核心响应数据if (res.data.code === 0) {return res}//处理业务失败，给错误提示ElMessage.error(res.data.message || '服务异常')return Promise.reject(res.data)},(err) => {//错误默认情况 => 只给提示就行ElMessage.error(err.response.data.message || '服务异常')return Promise.reject(err)}
)export default instance
export { baseURL }

3. 请求基地址和拦截器一定要根据后端实际的接口进行修改哦！

配置router

1. 同样的，初始化项目时也可选router，没有选的话命令行输入
   pnpm install router

2. 建议在src目录中新建router文件夹，其中新建index.js文件

3. 根据自己实际的目录结构配置哦！

import { createRouter, createWebHistory } from 'vue-router'
//createRoute用于创建路由示例
//配置history模式
//1. createWebHistory  地址栏不带#
//2. createWebHashHistory   地址栏带#
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',component: () => import('@/views/layout/LayoutContainer.vue'),// 默认跳转redirect: '/index/UserManagement',children: [{path: '/index/UserManagement',component: () => import('@/views/index/UserManagement.vue')}]}]
})export default router

配置pinia

1. 同样的，初始化项目时没有选择pinia的命令行输入
   pnpm install pinia

2. 建议在src目录中新建stores文件夹，其中新建index.js文件，再在stores中新建modules文件夹，其中新建user.js文件，在index.js中导出pinia实例

3. index.js进行如下配置，这样配置之后，页面中使用pinia就可以直接在页面中导入这个index.js文件，更加方便

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'const pinia = createPinia()
pinia.use(persist)export default piniaexport * from './modules/user'

4. user.js中文件进行如下配置

import { defineStore } from 'pinia'
import { ref } from 'vue'//本案例为用户模块，可以自己根据需要更改，demoname也根据实际修改
export const useUserStore = defineStore('demoname',() => {//自定义属性名const token = ref('')//自定义方法const setToken = (newToken) => {token.value = newToken}const removeToken = () => {token.value = ''}//记得return暴露自定义的属性和方法return {token,setToken,removeToken}},//持久化{persist: true}
)

配置 echarts

echarts官网

1. 命令行输入，echarts就无法在项目初始化的时候直接配置了，需要手动配置
   pnpm install echarts

2. 在main.js中进行配置，即可全局挂载echarts

import './assets/main.scss'import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'import ECharts from 'vue-echarts' // 全局引入ECharts
import 'echarts' // 全局引入echarts
// 挂载ECharts   参数1:vue文件中挂载echarts的名字  参数2:挂载的组件const app = createApp(App)app.use(createPinia())
app.use(router)
//echarts
app.component('ECharts', ECharts)app.mount('#app')

3. 如果要实现简单的echarts图表，还是前往官网查看

共勉

有不会的多去官网查找看看，大家一起加油学习吧！