开发环境
项目是基于 vue 2 开发的
"vue": "^2.6.10",
"vue-count-to": "^1.0.13",
"vue-i18n": "^8.26.7",
"vue-router": "^3.0.7",
"vue-transition.css": "^1.0.2",
"vuex": "^3.1.1",使用 Element UI 2作为界面组件
"element-ui": "^2.10.1",使用 Nodejs 作为开发服务,请确保开发环境版本如下所示:
node v12.20.1
npm 6.14.10
yarn 1.22.5
核心组件
// 网络请求库
"axios": "^0.18.1",
// 系统剪贴板
"clipboard": "^2.0.8",
// 加密库
"crypto-js": "^4.1.1",
// a storage lib which support sessionStorage and localStorage with the same api
"good-storage": "^1.1.0",
// A simple, lightweight JavaScript API for handling cookies
"js-cookie": "^3.0.1",
// 时间函数库
"moment": "^2.29.1",
// 格式化css显示
"normalize.css": "^8.0.1",
// 进度条
"nprogress": "^0.2.0",
// A querystring parsing and stringifying library with some added security.
"qs": "^6.7.0",
// 全屏组件
"screenfull": "5.2.0",第三方组件
项目示例的第三方组件,如果实际项目中不需要,可以删除对应组件。
// ECharts 图表库
"echarts": "^4.2.1",
// 日历组件 `FullCalendar v5`
"@fullcalendar/core": "^5.10.1",
"@fullcalendar/daygrid": "^5.10.1",
"@fullcalendar/interaction": "^5.10.1",
"@fullcalendar/timegrid": "^5.10.1",
"@fullcalendar/vue": "^5.10.1",
"date-fns": "^2.25.0",
// 日历组件 `FullCalendar v3`
"vue-full-calendar": "^2.8.1-0",
// 富文本编辑器Tinymce
"@tinymce/tinymce-vue": "3.2.8",
"tinymce": "^5.10.1",
// 富文本编辑器quill
"vue-quill-editor": "^3.0.6",
"quill": "^1.3.7",
// 电子表格格式的解析器和编写器
"xlsx": "^0.17.3",
"file-saver": "^2.0.5",风格指南
永远不要把 v-if 和 v-for 同时用在同一个元素上,具体参考Vue Style Guide。
vue页面如何引入svg图标
通过svg的use指令可以复用svg,具体方法参考vue页面如何引入svg图标。
使用CSS给SVG添加样式
这个文章和vue关系不大,先放在这里做个参考使用CSS给SVG添加样式。
router-view中key的作用
不同的key选择策略将导致在组件复用和新页面渲染之前取得一个平衡,必须了解。router-view中key的作用。
easy-mock
Easy Mock 是一个可视化,并且能快速生成模拟数据的持久化服务。安装说明参考 easy-mock 开源项目 gitee 或者 github。
vue的index.html
缺省情况下index.html需要放在public目录下
keep-alive
keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在v页面渲染完毕后不会被渲染成一个DOM元素。当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行。
被包裹在keep-alive中的组件的状态将会被保留,例如我们将某个列表类组件内容滑动到第100条位置,那么我们在切换到一个组件后再次切换回到该组件,该组件的位置状态依旧会保持在第100条列表处。
vue-i18n
Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。i18n 文档