项目启动
初始化vue3项目
- 这里建议先下载pnpm，下载速度更快，如果还没下载可以使用
npm install -g pnpm
如果遇到报错问题，如下
可以在命令行输入下面的指令以切换到淘宝镜像源
npm config set registry https://registry.npm.taobao.org
- 创建项目
命令行输入pnpm create vue
根据自己的需要选择安装插件即可
- 试运行
命令行中也有提示，输入
cd vue-demo
pnpm install
pnpm dev
即可运行项目
页面中的都是vue官网链接以及一些提示，感兴趣的可以自己看看
配置Element-plus
ement-plus官网链接
-
导入有完整导入和按需导入两种，推荐使用按需导致，减少代码包的大小
首先安装element-plus
pnpm install element-plus
使用按需导入需额外下载插件
pnpm install -D unplugin-vue-components unplugin-auto-import -
然后修改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()],
}),
],
})
- 由于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
-
刚才初始化vue项目的时候可选配置eslint，如果没有选的在命令行输入
pnpm install eslint -
下载成功后会在目录中看到 .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
-
安装axios
pnpm install axios -
建议在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 }
- 请求基地址和拦截器一定要根据后端实际的接口进行修改哦！
配置router
-
同样的，初始化项目时也可选router，没有选的话命令行输入
pnpm install router -
建议在src目录中新建router文件夹，其中新建index.js文件
-
根据自己实际的目录结构配置哦！
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
-
同样的，初始化项目时没有选择pinia的命令行输入
pnpm install pinia -
建议在src目录中新建stores文件夹，其中新建index.js文件，再在stores中新建modules文件夹，其中新建user.js文件，在index.js中导出pinia实例
-
index.js进行如下配置，这样配置之后，页面中使用pinia就可以直接在页面中导入这个index.js文件，更加方便
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(persist)
export default pinia
export * from './modules/user'
- 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官网
-
命令行输入，echarts就无法在项目初始化的时候直接配置了，需要手动配置
pnpm install echarts -
在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')
- 如果要实现简单的echarts图表，还是前往官网查看
共勉
有不会的多去官网查找看看，大家一起加油学习吧！
