前言
这是某个课程的作业项目，虽然不难，但是也是实实在在搞了一个月（去掉划水摸鱼15天左右吧）。这里来记录总结一下。
基本展示
登录界面
借书页面
因为项目需求是为图书馆服务的，所以需要扫码枪才能顺利使用借还书等功能.....
项目搭建
因为最开始没有搞清楚老师的需求，所以搭建的时候就有些小问题存在。我想的是要同时具有给管理员的后台功能以及给读者用的页面，我就想仿照后台项目进行基础搭建，然后往里面填页面就行了，虽然最后有点小违和但总体还是不错的。
技术栈还是老一套的vue全家桶、element-plus。
除vue-cli生成的以外，自己需要配置的文件有以下这些
├── src // 主目录
├── assets // 静态资源
├── components // 全局组件
├── store // vuex 配置
├── less // 基本的less样式
├── utils // 全局方法
├── views // 路由组件
├── App.vue // 页面主入口
├── main.ts // 脚本主入口
├── .eslintrc.js // eslint 相关配置
└── vue.config.js // vue-cli/webpack 配置
store
assets和components是开发的时候才会编辑，所以直接讲store。
├── store
├── index.js
├── getters.js
├── modules
mapGetters
首先是mapGetters、mapStatus等在vue3中的用法，因为vue3中computed是一个方法，不是像vue2写成一个对象了，所以用法有一些需要注意的地方，用法如下。
const mapget = mapGetters(["name", "introduction", "avatar"])
Object.keys(mapget).forEach((itemfn) => {
const item = computed(mapget[itemfn].bind({ $store: store }))
user[itemfn] = item
})
理解起来并不算困难，通过mapGetters获取对应的对象存在mapget里，然后再把每一个对象的$store绑定为store即可。
自动导入
和自动导入SVG一样，需要用到require.context。这里主要是省去了每次在modules里添加模块之后再回到index里修改的麻烦，当然router也可以用类似的方式导入，代码如下（这里用reduce还是很巧妙的）。
const Files = require.context("./modules", false, /\.js/)
const modules = Files.keys().reduce((modules, path) => {
const name = path.replace(/^\.\/(.*)\.js$/, "$1")
modules[name] = Files(path).default
return modules
}, {})
less
├── store
├── index.less
├── layout.less
├── navbar.less
├── variables.less
index.less都是些全局样式，基本都是从以前的项目里CV过来的，不同项目之间也大同小异。剩下的都是layout相关的样式，其中需要注意的也就只有variablesless变量的用法。
@sidebarBg: white;
@menuActText: #409eff;
@menuText: #606266;
@menuBg: white;
@menuHover: #ecf5ff;
@subMenuBg: white;
@subMenuHover: #ecf5ff;
@subMenuActText: #409eff;
:export {
menuText: @menuText;
menuBg: @menuBg;
}
@变量给其他less文件用，要用在js里需要:export导出。
utils
封装的全局方法，这里有很多常用的不同项目之间可以直接CV，例如防抖节流、时间格式化、获取get参数等。具体内容见以后可能会出现的文章。
App.vue
像这种单页面应用，App.vue里基本没有任何内容。
<template>
<div id="app">
<router-view />
</div>
</template>
main.js
这里引入该引入的就行。
eslint
eslint的配置本来是很麻烦的事情，但是因为有了vuecli这种一键自动全配置之后，自己需要改的东西就是rules了。这里就不贴了，很简单。主要是和vscode配合形成保存自动格式化有一点点麻烦。
首先需要下载ESLint和Vetur插件。然后在setting.json里写下
{
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
"editor.formatOnSave": true,
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "none",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned",
},
},
"workbench.colorTheme": "Default Light+",
//"vetur.validation.template": false // 两个选择器中是否换行
// 保存时自动修复 eslint 报错
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.options": {},
"vetur.grammar.customBlocks": {
"docs": "md",
"i18n": "json"
}
}
vue.config.js
这个部分也是往细了说能说好久的部分，但是大部分都属于打包部署阶段的事情，对于项目刚刚搭建时，需要注意的仅有引入element-plus，以及一些基础配置。
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers")
module.exports = {
publicPath: "/app",
outputDir: "dist",
assetsDir: "static",
lintOnSave: process.env.NODE_ENV === "development",
productionSourceMap: false,
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
}
},
configureWebpack: {
name: name,
resolve: {
alias: {
"@": resolve("src")
}
},
plugins: [
require("unplugin-auto-import/webpack")({
resolvers: [ElementPlusResolver({ importStyle: false })]
}),
require("unplugin-vue-components/webpack")({
resolvers: [ElementPlusResolver()]
}),
require("unplugin-element-plus/webpack")({
// options
})
]
},
chainWebpack(config) {
config.module
.rule("svg")
.exclude.add(resolve("src/icons"))
.end()
config.module
.rule("icons")
.test(/\.svg$/)
.include.add(resolve("src/icons"))
.end()
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]"
})
.end()
}
}
注意下这里如果要用element的v-loading组件的话一定要加上这句话
ElementPlusResolver({ importStyle: false })
其他的部分就是以前说过的自动引入element以及自己内置的svg了。
