🧑🎓 个人主页：Silence Lamb
📖 本章内容：【搭建VUE基础项目】
Silence-Vue v1.0.0
基于VUE前端快速开发框架
🍎平台简介
一、创建项目
1.1🥎【创建项目】
- 🥎 安装脚手架
npm i -g @vue/cli
- 🥎 初始化图形化页面
vue ui
- 在浏览器里打开：http://localhost:8000
1.2🥎【目录介绍】
1.3🥎【文件目录】
- public文件夹：静态资源
- webpack进行打包的时候会原封不动打包到dist文件夹中
- pubilc/index.html：是一个模板文件
- 作用是生成项目的入口文件
- webpack打包的js,css也会自动注入到该页面中
- 我们浏览器访问项目的时候就会默认打开生成好的index.html
- src文件夹（程序员代码文件夹）
- assets： 存放公用的静态资源
- components： 非路由组件（全局组件），其他组件放在views或者pages文件夹中
- App.vue： 唯一的根组件
- main.js： 程序入口文件，最先执行的文件
- babel.config.js：配置文件（babel相关）
- package.json：项目的详细信息记录
- package-lock.json：缓存性文件（各种包的来源）
1.4🥎【代码模板】
- 首选项/配置用户代码片段
{
"生成 vue 模板": {
"prefix": "vue",
"body": [
"<template>",
"<div></div>",
"</template>",
"",
"<script>",
"//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json文件，图片文件等等）",
"//例如：import 《组件名称》 from '《组件路径》';",
"",
"export default {",
"//import 引入的组件需要注入到对象中才能使用",
"components: {},",
"props: {},",
"data() {",
"//这里存放数据",
"return {",
"",
"};",
"},",
"//计算属性 类似于 data 概念",
"computed: {},",
"//监控 data 中的数据变化",
"watch: {},",
"//方法集合",
"methods: {",
"",
"},",
"//生命周期 - 创建完成（可以访问当前 this 实例）",
"created() {",
"",
"},",
"//生命周期 - 挂载完成（可以访问 DOM 元素）",
"mounted() {",
"",
"},",
"beforeCreate() {}, //生命周期 - 创建之前",
"beforeMount() {}, //生命周期 - 挂载之前",
"beforeUpdate() {}, //生命周期 - 更新之前",
"updated() {}, //生命周期 - 更新之后",
"beforeDestroy() {}, //生命周期 - 销毁之前",
"destroyed() {}, //生命周期 - 销毁完成",
"activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发",
"}",
"</script>",
"<style lang='scss' scoped>",
"//@import url($3); 引入公共 css 类",
"$4",
"</style>"
],
"description": "生成 vue 模板"
}
}
二、项目配置
2.1🍁【代码检查】
- 🍁相关依赖：.eslintrc.js
"@typescript-eslint/eslint-plugin": "^5.57.0",
"@typescript-eslint/parser": "^5.57.0",
"eslint": "^8.37.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.10.0",
- 🍁代码检查：.eslintrc.js
/*
* @Description : Eslint校验
* @Author : SilenceLamb
* @Version : V1.0.0
*/
module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true,
},
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true,
},
},
extends: ['prettier', 'plugin:vue/vue3-recommended', 'plugin:prettier/recommended'],
rules: {
'no-var': 'error',
'prettier/prettier': ['error'],
// 禁止出现console
'no-console': 'warn',
// 禁用debugger
'no-debugger': 'warn',
// 禁止出现重复的 case 标签
'no-duplicate-case': 'warn',
// 禁止出现空语句块
'no-empty': 'warn',
// 禁止不必要的括号
'no-extra-parens': 'off',
// 禁止对 function 声明重新赋值
'no-func-assign': 'warn',
// 禁止在 return、throw、continue 和 break 语句之后出现不可达代码
'no-unreachable': 'warn',
// 强制所有控制语句使用一致的括号风格
curly: 'warn',
// 要求 switch 语句中有 default 分支
'default-case': 'warn',
// 强制尽可能地使用点号
'dot-notation': 'warn',
// 要求使用 === 和 !==
eqeqeq: 'warn',
// 禁止 if 语句中 return 语句之后有 else 块
'no-else-return': 'warn',
// 禁止出现空函数
'no-empty-function': 'warn',
// 禁用不必要的嵌套块
'no-lone-blocks': 'warn',
// 禁止使用多个空格
'no-multi-spaces': 'warn',
// 禁止多次声明同一变量
'no-redeclare': 'warn',
// 禁止在 return 语句中使用赋值语句
'no-return-assign': 'warn',
// 禁用不必要的 return await
'no-return-await': 'warn',
// 禁止自我赋值
'no-self-assign': 'warn',
// 禁止自身比较
'no-self-compare': 'warn',
// 禁止不必要的 catch 子句
'no-useless-catch': 'warn',
// 禁止多余的 return 语句
'no-useless-return': 'warn',
// 禁止变量声明与外层作用域的变量同名
'no-shadow': 'off',
// 允许delete变量
'no-delete-var': 'off',
// 强制数组方括号中使用一致的空格
'array-bracket-spacing': 'warn',
// 强制在代码块中使用一致的大括号风格
'brace-style': 'warn',
// 强制使用骆驼拼写法命名约定
camelcase: 'warn',
// 强制使用一致的缩进
indent: 'off',
// 强制在 JSX 属性中一致地使用双引号或单引号
// 'jsx-quotes': 'warn',
// 强制可嵌套的块的最大深度4
'max-depth': 'warn',
// 强制最大行数 300
// "max-lines": ["warn", { "max": 1200 }],
// 强制函数最大代码行数 50
// 'max-lines-per-function': ['warn', { max: 70 }],
// 强制函数块最多允许的的语句数量20
'max-statements': ['warn', 100],
// 强制回调函数最大嵌套深度
'max-nested-callbacks': ['warn', 3],
// 强制函数定义中最多允许的参数数量
'max-params': ['warn', 3],
// 强制每一行中所允许的最大语句数量
'max-statements-per-line': ['warn', { max: 1 }],
// 要求方法链中每个调用都有一个换行符
'newline-per-chained-call': ['warn', { ignoreChainWithDepth: 3 }],
// 禁止 if 作为唯一的语句出现在 else 语句中
'no-lonely-if': 'warn',
// 禁止空格和 tab 的混合缩进
'no-mixed-spaces-and-tabs': 'warn',
// 禁止出现多行空行
'no-multiple-empty-lines': 'warn',
// 禁止出现;
semi: ['warn', 'never'],
// 强制在块之前使用一致的空格
'space-before-blocks': 'warn',
// 强制在 function的左括号之前使用一致的空格
// 'space-before-function-paren': ['warn', 'never'],
// 强制在圆括号内使用一致的空格
'space-in-parens': 'warn',
// 要求操作符周围有空格
'space-infix-ops': 'warn',
// 强制在一元操作符前后使用一致的空格
'space-unary-ops': 'warn',
// 强制在注释中 // 或 /* 使用一致的空格
// "spaced-comment": "warn",
// 强制在 switch 的冒号左右有空格
'switch-colon-spacing': 'warn',
// 强制箭头函数的箭头前后使用一致的空格
'arrow-spacing': 'warn',
'prefer-const': 'warn',
'prefer-rest-params': 'warn',
'no-useless-escape': 'warn',
'no-irregular-whitespace': 'warn',
'no-prototype-builtins': 'warn',
'no-fallthrough': 'warn',
'no-extra-boolean-cast': 'warn',
'no-case-declarations': 'warn',
'no-async-promise-executor': 'warn',
},
}
🍁 Tips：echo {}> .eslintignore
# eslint 忽略检查 (根据项目需要自行添加)
node_modules
dist
2.2🍁【代码格式】
🍁 Tips：安装 prettier
# 安装 prettier
yarn add prettier -D
# 安装插件 eslint-config-prettier
yarn add eslint-config-prettier -D
🍁 Tips：echo {} > .prettierrc.js
/*
* @Description :
* @Author : SilenceLamb
* @Version : V1.0.0
*/
module.exports = {
printWidth: 150,
// 指定每个缩进级别的空格数
tabWidth: 4,
// 使用制表符而不是空格缩进行
useTabs: false,
// 在语句末尾打印分号
semi: false,
// 使用单引号而不是双引号
singleQuote: true,
// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
quoteProps: 'as-needed',
// 在JSX中使用单引号而不是双引号
jsxSingleQuote: false,
// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
trailingComma: 'es5',
// 在对象文字中的括号之间打印空格
bracketSpacing: true,
// 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
arrowParens: 'always',
// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
rangeStart: 0,
rangeEnd: Infinity,
// 指定要使用的解析器，不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准 always\never\preserve
proseWrap: 'preserve',
// 指定HTML文件的全局空格敏感度 css\strict\ignore
htmlWhitespaceSensitivity: 'css',
// Vue文件脚本和样式标签缩进
vueIndentScriptAndStyle: false,
// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
endOfLine: 'lf',
}
🍁 Tips：echo {}> .prettierignore
# 忽略格式化文件 (根据项目需要自行添加)
node_modules
dist
🍁Tips：package.json
"scripts": {
"lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx",
"prettier": "prettier --write ."
},
2.3🍁【环境变量】
- 🍁开发环境：.env.development
# 页面标题
VUE_APP_TITLE=开发环境
# 开发环境配置
VUE_MODE_ENV='development'
# 开发环境
VUE_APP_BASE_API='/dev-api'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES=true
- 🍁线上环境：.env.production
# 页面标题
VUE_APP_TITLE=线上环境
# 线上环境
VUE_MODE_ENV='production'
# 管理系统/生产环境
VUE_APP_BASE_API='/prod-api'
- 🍁测试环境：.env.staging
# 页面标题
VUE_APP_TITLE=测试环境
# 测试环境
VUE_MODE_ENV='staging'
# 测试环境
VUE_APP_BASE_API='/stage-api'
- 🍁环境判断相关方法：jsconfig.json
/**
* @Description : Vue环境工具
* @Author : SilenceLamb
* @Version : V1.0.0
*/
export default {
/**
* @Description : 是否是开发环境
* @param mode 模式
*/
isDev(mode) {
return mode === 'development'
},
/**
* @Description : 是否是线上环境
* @param mode 模式
*/
isProd(mode) {
return mode === 'production'
},
/**
* @Description : 是否是构建
* @param common 启动环境
*/
isBuild(common) {
return common === 'build'
},
/**
* @Description : 是否是启动服务器
* @param common 启动环境
*/
isServer(common) {
return common === 'server'
},
}
2.3🍁【别名配置】
- 🍁别名配置：jsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"#/*": ["config/*"],
"@api/*": ["src/api/*"],
"@assets/*": ["src/assets/*"],
"@components/*": ["src/components/*"],
"@store/*": ["src/store/*"],
"@utils/*": ["src/utils/*"],
"@views/*": ["src/views/*"],
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
- 🍁别名配置：config/resolve/index.js
/*
* @Description : 配置别名
* @Author : SilenceLamb
* @Version : V1.0.0
*/
import { resolve } from 'path';
function pathResolve(dir) {
return resolve(process.cwd(), '.', dir);
}
export default {
// 导入时想要省略的扩展名列表
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
fallback: { path: require.resolve('path-browserify') },
alias: {
'@': pathResolve('src'),
'@api': pathResolve('src/api'),
'@assets': pathResolve('src/assets'),
'@components': pathResolve('src/components'),
'@store': pathResolve('src/store'),
'@utils': pathResolve('src/utils'),
'@views': pathResolve('src/views'),
'#': pathResolve('config'),
},
};
- 🍁Vue配置：config/index.js
/**
* @Description : Vue相关配置
* @Author : SilenceLamb
* @Version : V1.0.0
*/
import resolve from './resolve/index'
export default function VueConfig(isBuild, VITE_APP_BASE_API) {
return {
['resolve']: resolve,
}
}
- 🍁Vue配置：package.json
const VueConfig = require('#/index')
const WebpackName = process.env.VUE_APP_TITLE // 网页标题
module.exports = {
configureWebpack: {
resolve: VueConfig['resolve'],
},
}
- 修改跨域配置
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
const port = 80
const url = "http://localhost:88"
const name = process.env.VUE_APP_TITLE || "Silence-VUE"// 网页标题
module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
// 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
outputDir: 'dist',
// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
assetsDir: 'static',
// 是否开启eslint保存检测，有效值：ture | false | 'error'
lintOnSave: process.env.NODE_ENV === 'development',
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
// 跨域相关配置
devServer: {
host: '127.0.0.1',
port: port,
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: url,
open: true,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
}
}
三、封装工具类
3.1🍚【基本配置】
💡Tips：在src文件下创建utils，文件夹下新建index.ts文件夹：用于扫描ts文件
/**
* 动态引入方法
*/
export default {
install(app) {
const methods = require.context('./modules/', true, /\.js$/)
// 加载在某个目录中动态注册的所有全局方法
methods.keys().forEach((filePath) => {
const method = methods(filePath)
const fileName = getFileName(filePath)
//export default{}类型
if (method.default !== undefined && method.default !== null) {
// 将该方法注册为 $fileName 的全局方法
Object.keys(method).forEach(() => {
app.config.globalProperties['$' + fileName] = method.default
})
} else {
// 将该方法注册为 $fileName 的全局方法
app.config.globalProperties['$' + fileName] = method
}
})
},
}
/**
* @Description 获取最后一个文件夹
* @param {string} filePath
* @returns {string} fileName 子文件夹名
*/
export function getLastFileName(filePath) {
return filePath.substring(0, filePath.lastIndexOf('/')).split('/').pop()
}
Tips：main.ts全局引入
- 🍚 main.ts：main.ts
import { createApp } from 'vue'
import App from './App.vue'
import utils from '/@/utils';
const app = createApp(App)
app.use(utils,true)
app.use(router)
app.mount('#app')
3.2🍚【创建方法】
- 🍚 创建Token工具类
import Cookies from 'js-cookie'
const TokenKey = 'Admin-Token'
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
- 🍚 消息提示：src/utils/modules/model.js
/**
* @Description : 用于消息提示、确认消息和提交内容
* @Version : V1.0.0
* @Author : SilenceLamb
*/
let loadingInstance
export default {
// 消息提示
message(content, type) {
ElMessage[type](content)
},
// 弹出提示 -(弹框)
alert(title, content, type) {
ElMessageBox.alert(content, '系统提示', { type: type }).then()
},
// 通知提示 -(通知)
notify(content, type) {
ElNotification[type](content)
},
// 确认窗体 -(窗体)
confirm(title, content, type) {
return ElMessageBox.confirm(content, content, {
title: title,
confirmButtonText: '确定',
cancelButtonText: '取消',
type: type,
})
},
// 提交内容 -(窗体)
prompt(title, content, type) {
return ElMessageBox.prompt(content, content, {
title: title,
confirmButtonText: '确定',
cancelButtonText: '取消',
type: type,
})
},
// 打开遮罩层 -(遮罩)
loading(content) {
loadingInstance = ElLoading.service({
lock: true,
text: content,
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
})
},
// 关闭遮罩层 -(遮罩)
closeLoading() {
loadingInstance.close()
},
}
- 🛞 参数处理工具：src/utils/modules/params.js
/**
* @Description : 参数处理工具
* @Author : SilenceLamb
* @Version : V1.0.0
*/
export default {
/**
* @Description :请求参数处理
* @param params
* @return {string}
*/
tansParams(params) {
let result = ''
for (const propName of Object.keys(params)) {
const value = params[propName]
const part = `${encodeURIComponent(propName)}=`
if (value !== null && value !== '' && typeof value !== 'undefined') {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
// eslint-disable-next-line max-depth
if (value[key] !== null && value[key] !== '' && typeof value[key] !== 'undefined') {
const params = `${propName}[${key}]`
const subPart = `${encodeURIComponent(params)}=`
result += `${subPart + encodeURIComponent(value[key])}&`
}
}
} else {
result += `${part + encodeURIComponent(value)}&`
}
}
}
return result
},
}
3.2🍚【基本使用】
- 🍚 main.ts：main.ts
<template >
<div class="app-container">
<a-button @click="message">message</a-button>
</div>
</template>
<script lang="ts">
export default{
methods:{
message(){
this.$model.message('消息提示', 'success');
}
}
}
</script>
四、跨域配置
4.1🍖【通用常量】
- 🍖 项目设置：config/constant/silence.ts
/*
* @Description : 项目设置
* @Author : SilenceLamb
* @Version : V1.0.0
*/
export default {
/**
* 前端端口
*/
vuePort: 80,
/**
* 后端接口
*/
adminUrl: 'http://localhost:88',
};
- 🍖 通用设置：config/constant/modules/common.ts
/*
* @Description : 通用设置
* @Author : SilenceLamb
* @Version : V1.0.0
*/
export default {
/**
* @Description : 在npm run build 或 yarn build 时 ，生成文件的目录名称
* @param {String} param -(默认dist)
*/
outputDir: 'dist',
/**
* @Description : 用于放置生成的静态资源 (js、css、img、fonts) 的
* @param {String} param -(默认static)
*/
assetsDir: 'static',
};
- 🍖 整合常量：config/constant/modules/common.ts
/*
* @Description : 整合常量
* @Author : SilenceLamb
* @Version : V1.0.0
*/
import silence from './modules/silence';
import common from './modules/common';
const constants = {
['silence']: silence,
['common']: common,
};
export default constants;
4.2🍖【跨域配置】
- 🍖 代理目标列表：config/server/modules/index.js
/*
* @Description : 代理目标列表
* @Author : SilenceLamb
* @Version : V1.0.0
*/
const constant = require('../../constant/index')
module.exports = function () {
return {
[process.env.VUE_APP_BASE_API]: {
target: constant['silence'].adminUrl,
changeOrigin: true,
pathRewrite: { [`^${process.env.VUE_APP_BASE_API}`]: '' },
},
}
}
-
不配置pathRewrite 请求就被转发到 XX.XX.XX.XX:80 并把相应uri带上
-
比如：localhost:80/api/xxx 会被转发到XX.XX.XX.XX:80/api/xxx
-
🍖 跨域配置：config/devServer/index.js
/**
* @Description : 跨域相关配置
* @Author : SilenceLamb
* @Version : V1.0.0
*/
const constant = require('../constant/index')
const getProxy = require('./modules')
module.exports = {
host: '0.0.0.0',
open: true,
port: constant['silence'].vuePort,
proxy: getProxy(),
}
- 🍖 vue.config.js配置：vue.config.js
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
const { VueConfig } = require('./config/index')
const constant = require('./config/constant/index')
const vueConfig = VueConfig(process.env.VUE_MODE_ENV, process.env.VUE_APP_BASE_API)
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
// 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
outputDir: constant['common'].outputDir,
// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
assetsDir: constant['common'].assetsDir,
// 是否开启eslint保存检测，有效值：ture | false | 'error'
lintOnSave: constant['common'].lintOnSave,
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap: constant['common'].productionSourceMap,
devServer: vueConfig['server'],
css: {
loaderOptions: { sass: { sassOptions: { outputStyle: 'expanded' } } },
},
configureWebpack: {
resolve: vueConfig['resolve'],
plugins: vueConfig['plugins'],
}
}
五、按需加载
5.1🫑【自动引入依赖】
- 🫑自动引入依赖：config/plugins/modules/importDeps.js
/**
* @Description : 依赖自动按需导入
* @Author : SilenceLamb
* @Version : V1.0.0
*/
const ImportDeps = require('unplugin-auto-import/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
exports.AutoImportDeps = function () {
return ImportDeps({
resolvers: [ElementPlusResolver()],
imports: ['vue', 'vue-router', 'vuex', '@vueuse/head'],
// 可以选择auto-import.d.ts生成的位置，建议设置为 'src/auto-import.d.ts
dts: 'src/auto/auto-import.d.ts',
})
}
5.2🫑【自动引入组件】
- 🫑自动引入组件：config/plugins/modules/importComp.js
/**
* @Description : 组件按需自动导入
* @Author : SilenceLamb
* @Version : V1.0.0
*/
const ImportComp = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
exports.ImportComponents = function () {
/* 组件按需自动导入*/
return ImportComp({
//引入自己的组件
dirs: ['src/modules/components'],
//引入ElementPlus官方组件
resolvers: [ElementPlusResolver()],
dts: 'src/auto/components.d.ts',
// 组件的有效文件扩展名
extensions: ['vue'],
// 允许子目录作为组件的命名空间前缀
directoryAsNamespace: false,
// 用于转换目标的筛选器
include: [/\.vue$/, /\.vue\?vue/],
exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/],
// 自定义规则
libs: [
{
libraryName: 'element-plus',
esModule: true,
resolveStyle: (name) => {
return `element-plus/lib/theme-chalk/${name}.scss`
},
},
],
})
}
六、状态管理
6.1🍜【基本配置】
- 🍜 基本配置 src/store/index.js
import { createStore } from 'vuex'
import getters from './getter'
const modulesFiles = require.context('./modules', true, /\.js$/)
/*
* 如果你需要 `import app from './modules/app'`
* 它将自动要求模块文件中的所有 Vuex 模块
*/
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './index.scss' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
export default createStore({
modules,
getters,
})
- 🍜 定义一个state src/store/modules/settings.js
import defaultSettings from '@/config/settings'
const { title, logo, fixedHeader, sidebarLogo } = defaultSettings
/**
* 可能是在一个 Vuex store 中作为状态的初始值进行定义
* @type {lang} 语言
* @type {title} 网站标题
* @type {logo} 网站logo
* @type {fixedHeader} 头部固定
* @type {sidebarLogo} 是否显示Logo
*/
const state = {
lang: 'zh',
title,
logo,
fixedHeader,
sidebarLogo,
}
/**
* 用于存储更改应用程序状态的函数
* 这些函数通常在 actions 中被调用
*/
const mutations = {
/**
* 更改设置
* @param state state对象
* @param key state属性
* @param value 给定的值
* @constructor
*/
CHANGE_SETTING: (state, { key, value }) => {
if (Object.hasOwnProperty.call(state, key)) {
state[key] = value
}
},
}
/**
* 用于存储异步操作的函数
* 通常用于执行一些异步操作
*/
const actions = {
/**
* 更改设置
* @param commit
* @param data { key:'', value:''}
*/
changeSetting({ commit }, data) {
commit('CHANGE_SETTING', data)
},
}
export default {
namespaced: true,
state,
mutations,
actions,
}
6.2🍜【基本使用】
- 🍜 基本使用：state src/views/index/index.vue
this.$store.state.count
mapState({
// 箭头函数可使代码更简练
count: state => state.count
})
- 🍜 基本使用：getters src/views/index/index.vue
this.$store.getters.doneTodosCount
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
- 🍜 基本使用：mutations src/views/index/index.vue
store.commit('increment', {
amount: 10
})
- 🍜 基本使用：actions src/views/index/index.vue
// 以载荷形式分发
store.dispatch('incrementAsync', {
amount: 10
})
// 以对象形式分发
store.dispatch({
type: 'incrementAsync',
amount: 10
})
6.3🍜【持久化配置】
- 🍑持久化配置：src/store/index.js
/**
* @Description : 动态加载模块
* @Author : SilenceLamb
* @Version : V1.0.0
*/
import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import Token from '@/utils/modules/token'
const modulesFiles = require.context('./modules', true, /\.js$/)
/*
* 它将自动要求模块文件中的所有 Vuex 模块
*/
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './mixin.scss' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
export default createStore({
modules,
// 持久化操作 当修改state的内容自动持久化存储
plugins: [
createPersistedState({
storage: window.localStorage,
key: 'State',
setItem: function (key, value) {
//将token信息存储到Cookies中
if (key === 'token') {
Token.setToken(value)
}
},
}),
],
})
七、路由配置
- 🍑 官方链接：https://router.vuejs.org
7.1🍑【路由配置】
- 🍑 yarn命令安装
yarn add vue-router@4
💡
Tips：src文件夹下新建router文件夹，router文件夹下新建static.ts
- 🍑路由配置：src/router/static.ts
/**
* @Description : 路由配置
* @Author : SilenceLamb
* @Version : V1.0.0
*/
import { RouteRecordRaw } from 'vue-router';
export const constantRoutes: RouteRecordRaw [] = [
{
path: '/',
name: 'Index',
component: () => import('/@/views/index/index.vue'),
},
];
export default {constantRoutes};
💡
Tips：在main.ts中，引入router并注册
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
const app = createApp(App)
app.use(router)
app.mount('#app')
💡
Tips：在App.vue中设置路由展现出口
<template>
<router-view />
</template>
7.2🍑【路由守卫】
💡
Tips：src文件夹下新建router文件夹，router文件夹下新建index.ts
- 🍑简单的路由守卫：src/router/index.ts
/**
* @Description : 路由守卫
* @Author : SilenceLamb
* @Version : V1.0.0
*/
import {createRouter, createWebHistory} from 'vue-router';
import {constantRoutes} from './static';
import {useAdminInfoState} from '/@/store/modules/adminInfo';
//引入进度条样式
import 'nprogress/nprogress.css';
const router = createRouter({
history: createWebHistory(),
routes: constantRoutes,
});
/**
* @Description 全局前置守卫
* 当一个导航触发时，全局前置守卫按照创建顺序调用
* @param to: 即将要进入的目标 用一种标准化的方式
* @param from: 当前导航正要离开的路由 用一种标准化的方式
* @return {boolean} false: 取消当前的导航 |true 通过一个路由地址跳转到一个不同的地址
*/
/* 添加白名单*/
const whiteList = ['/login']; // no redirect whitelist
// @ts-ignore
router.beforeEach((to, from, next) => {
console.log(useAdminInfoState().getToken())
if (useAdminInfoState().getToken()) {
/* has token*/
if (to.path === '/login') {
next({path: '/'})
} else if (useAdminInfoState().userName === null) {
//获取用户信息
} else {
next()
}
} else {
// 没有token
if (whiteList.indexOf(to.path) !== -1) {
// 在免登录白名单，直接进入
next()
} else {
next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
}
}
})
/**
* @Description 全局后置钩子
* 钩子不会接受 next 函数也不会改变导航本身
*/
router.afterEach(() => {
});
export default router;
7.3🍑【组件跳转】
- 🍑
setup我们不能再直接访问 this. r o u t e r 或 t h i s . router 或 this. router或this.route - 🍑作为替代，我们使用 useRouter 和 useRoute 函数
import { useRouter, useRoute } from 'vue-router'
export default {
setup() {
const router = useRouter()
const route = useRoute()
function pushWithQuery(query) {
router.push({
name: 'search',
query: {
...route.query,
},
})
}
},
}
- 🍑路由重定向：src/views/redirect/index.vue
<script>
export default {
name: 'RedirectVue',
created() {
const { params, query } = this.$route
const { path } = params
this.$router.replace({
path: `/${path}`,
query,
})
},
render(h) {
return h() // avoid warning message
},
}
</script>
7.4🍑【组件守卫】
💡
Tips：组件内路由守卫
- 🍑新增组合式api：可以替代原有的组件内守卫
- onBeforeRouteLeave(离开当前页面路由时触发)
- onBeforeRouteUpdate(路由更新时触发)
💡
Tips你可以在路由组件内直接定义路由导航守卫(传递给路由配置的)
beforeRouteEnter(to, from) {
// 在渲染该组件的对应路由被验证前调用
// 不能获取组件实例 `this` ！
// 因为当守卫执行时，组件实例还没被创建！
},
beforeRouteUpdate(to, from) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
// 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
},
beforeRouteLeave(to, from) {
// 在导航离开渲染该组件的对应路由时调用
// 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
},
- 🍑页面使用
import { useRouter,useRoute } from 'vue-router';
const go=()=>{
const Router=useRouter()
const Route=useRoute()
Router.push({
name:'/login',
query:{
id:'123456'
}
})
}
7.5🍑【过渡动效】
- 🍑整个布局过度动效：src/router/static.ts
<router-view v-slot="{ Component }">
<transition name="fade">
<component :is="Component" />
</transition>
</router-view>
- 🍑单个路由的过渡：src/router/static.ts
const routes = [
{
path: '/custom-transition',
component: PanelLeft,
meta: { transition: 'slide-left' },
},
{
path: '/other-transition',
component: PanelRight,
meta: { transition: 'slide-right' },
},
]
- 🍑 你可以将元信息和动态的 name 结合在一起，放在 < transition > 上
<router-view v-slot="{ Component, route }">
<!-- 使用任何自定义过渡和回退到 `fade` -->
<transition :name="route.meta.transition || 'fade'">
<component :is="Component" />
</transition>
</router-view>
八、Layout布局
8.1⏰【Layout容器】
✨
Tips：简单Layout布局：src/layout/index.vue
<template>
<div class="app-wrapper">
<app-main />
<back-to-top />
</div>
</template>
<style lang="scss" scoped>
@import 'src/styles/index';
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
}
</style>
8.2⏰【主要内容】
✨
Tips：主要区域组件：src/layout/components/appMain/index.vue
<template>
<section class="app-main">
<router-view v-slot="{ Component }">
<transition name="fade-transform" mode="out-in">
<component :is="Component" :key="$route.path" />
</transition>
</router-view>
</section>
</template>
<script>
export default { name: 'AppMain' };
</script>
<style lang="scss" scoped>
.app-main {
/*50 = navbar */
min-height: 100vh;
width: 100%;
position: relative;
overflow: hidden;
}
</style>
<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
.fixed-header {
padding-right: 15px;
}
}
</style>
✨
Tips：路由引入Layout布局：
import Layout from '/@/layout/index.vue';
{
path: '/',
redirect: '/index',
component: Layout,
children: [{ name: 'index', path: '/index', component: () => import('/@/views/index/index.vue') }],
},
九、安装Axios
9.1🍟【安装Axios】
npm install axios --save
- main.js引入Axios
const app = createApp(App)
app.config.globalProperties.$axios = axios
- 就可以使用以下方式发送请求
getMenu() {
this.$axios({
url: "",
method: "get",
params: {}
}).then(res => {
console.log(res)
})
}
9.2🍟【封装axios】
import axios from "axios";
//1、对axios二次封装
const requests = axios.create({
//基础路径，requests发出的请求在端口号后面会跟改baseURl
baseURL:'/api',
timeout: 5000,
})
//2、配置请求拦截器
requests.interceptors.request.use(config => {
//config内主要是对请求头Header配置
//比如添加token
return config;
})
//3、配置相应拦截器
requests.interceptors.response.use((res) => {
//成功的回调函数
return res.data;
},(error) => {
//失败的回调函数
console.log("响应失败"+error)
return Promise.reject(new Error('fail'))
})
//4、对外暴露
export default requests;
9.3🍟【请求接口】
//当前模块，API进行统一管理，即对请求接口统一管理
import requests from "@/utils/request";
//获取验证码
export function getCodeImage() {
return requests({
url: '/captchaImage',
method: 'get'
})
}
- 当组件想要使用相关请求时，只需要导入相关函数即可
import {reqCateGoryList} from './api'
//发起请求
reqCateGoryList();
十、添加Token验证
10.1🥣安装 js-cookie
- 🌟 安装 js-cookie，并且main.js引入 js-cookie
import Cookies from 'js-cookie'
const app = createApp(App)
app.use(Cookies)
10.2🥣创建Token工具类
- 🌟 创建Token工具类
import Cookies from 'js-cookie'
const TokenKey = 'Admin-Token'
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
10.3🥣配置请求拦截器
//2、配置请求拦截器
requests.interceptors.request.use(config => {
// 是否需要设置 token
const isToken = (config.headers || {}).isToken === true
// 是否需要防止数据重复提交
const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
//添加token
if (isToken) {
//config内主要是对请求头Header配置
config.headers['Authorization'] = 'Bearer ' +token.getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
return config
}, error => {
Promise.reject(error).then(r => r)
})
10.4🥣配置相应拦截器
//3、配置相应拦截器
requests.interceptors.response.use((res) => {
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 获取错误信息
const msg = errorCode[code] || res.data.msg || errorCode['default']
if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
return res.data
} else if (code === 500) {
ElMessage({
message: msg || 'Error',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(new Error(msg))
} else {
//成功的回调函数
return res.data;
}
}, (error) => {
//失败的回调函数
let { message } = error;
if (message === "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
ElMessage({
message: message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
})
10.5🥣Api是否需要Token
//当前模块，API进行统一管理，即对请求接口统一管理
import requests from "@/utils/requests"
//获取验证码
export function getCodeImage() {
return requests({
url: '/captchaImage',
method: 'get',
headers: {
isToken: false
},
})
}
📢🌥️如果文章对你有帮助【关注👍点赞❤️收藏⭐】
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
