框架学习"/>

Ruoyi框架学习

CSDN话题挑战赛第2期
参赛话题：学习笔记

1、package.json配置中的重点介绍：

1、许可证：license：各种License介绍(BSD,MIT,MPL,Apache License,CC)_赵健乔的博客-CSDN博客

2、脚本别名：scripts：

对命令的一种别名设定，方便使用的

3、一种第三方的检测书写规范的插件：git hooks工具：husky

 "husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"src/**/*.{js,vue}": ["eslint --fix","git add"]},

4、需要发布的依赖插件管理：dependencies

 "dependencies": {"@riophae/vue-treeselect": "0.4.0","axios": "0.24.0","clipboard": "2.0.8","core-js": "3.19.1","echarts": "4.9.0","element-ui": "2.15.8","file-saver": "2.0.5","fuse.js": "6.4.3","highlight.js": "9.18.5","js-beautify": "1.13.0","js-cookie": "3.0.1","jsencrypt": "3.0.0-rc.1","nprogress": "0.2.0","quill": "1.3.7","screenfull": "5.0.2","sortablejs": "1.10.2","vue": "2.6.12","vue-count-to": "1.0.13","vue-cropper": "0.5.5","vue-meta": "2.4.0","vue-router": "3.4.9","vuedraggable": "2.24.3","vuex": "3.6.0"},

5、只需要在本地开发过程使用的依赖插件的管理：devDependencies

"devDependencies": {"@vue/cli-plugin-babel": "4.4.6","@vue/cli-plugin-eslint": "4.4.6","@vue/cli-service": "4.4.6","babel-eslint": "10.1.0","babel-plugin-dynamic-import-node": "2.3.3","chalk": "4.1.0","compression-webpack-plugin": "5.0.2","connect": "3.6.6","eslint": "7.15.0","eslint-plugin-vue": "7.2.0","lint-staged": "10.5.3","runjs": "4.4.2","sass": "1.32.13","sass-loader": "10.1.1","script-ext-html-webpack-plugin": "2.1.5","svg-sprite-loader": "5.1.1","vue-template-compiler": "2.6.12"},

6、指定node和npm版本的：engines

 "engines": {"node": ">=8.9","npm": ">= 3.0.0"},

7、 检测浏览器的兼容性插件：browserslist

 "browserslist": ["> 1%",            //需要兼容全球使用人数超过百分之1的主流浏览器"last 2 versions"    //需要兼容最新的两个版本]

2、vue.config.js 配置文件详解：

官方文档：配置参考 | Vue CLI

所用配置的注解都写在代码后面了，个人觉得开发过程中应该也用不太到更改：

'use strict'
const path = require('path')    //node提供的通用模块function resolve(dir) {return path.join(__dirname, dir)
}const CompressionPlugin = require('compression-webpack-plugin')const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题const port = process.env.port || process.env.npm_config_port || 80 // 默认启动的端口// vue.config.js 配置说明
//官方vue.config.js 参考文档 
// 这里只列一部分，具体配置参考文档
module.exports = {// 部署生产环境和开发环境下的URL（路径）。// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上// 例如 /。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 /admin/，则设置 baseUrl 为 /admin/。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 以加速生产环境构建，一般都设置为falseproductionSourceMap: false,// webpack-dev-server 相关配置devServer: {host: '0.0.0.0',port: port,open: true,proxy: {//代理相关配置// detail: [process.env.VUE_APP_BASE_API]: { // 匹配条件target: `http://localhost:8080`,  //请求默认路径changeOrigin: true,pathRewrite: {['^' + process.env.VUE_APP_BASE_API]: ''  //重写地址（可以加很多个）}}},disableHostCheck: true},css: {loaderOptions: {sass: {sassOptions: { outputStyle: "expanded" }}}},configureWebpack: {name: name,resolve: {alias: {'@': resolve('src') //用处就是 用@代表 /src}},plugins: [// /ruoyi-vue/other/faq.html#使用gzip解压缩静态文件new CompressionPlugin({cache: false,                   // 不启用文件缓存test: /\.(js|css|html)?$/i,     // 压缩文件格式filename: '[path].gz[query]',   // 压缩后的文件名algorithm: 'gzip',              // 使用gzip压缩minRatio: 0.8                   // 压缩率小于1才会压缩})],},chainWebpack(config) {config.plugins.delete('preload') // 删除预加载标签，减轻服务器压力config.plugins.delete('prefetch') // 删除预加载标签，减轻服务器压力// set svg-sprite-loader//模块化压缩打包规则配置config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()config.module.rule('icons').test(/\.svg$/) //检测配置，告诉系统遇到svg文件就用下面配置的svg-sprite-loader处理.include.add(resolve('src/assets/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()config.when(process.env.NODE_ENV !== 'development',config => {config.plugin('ScriptExtHtmlWebpackPlugin') // webpack工具下预加载的插件.after('html').use('script-ext-html-webpack-plugin', [{// `runtime` must same as runtimeChunk name. default is `runtime`inline: /runtime\..*\.js$/}]).end()config.optimization.splitChunks({chunks: 'all',cacheGroups: {libs: {name: 'chunk-libs',test: /[\\/]node_modules[\\/]/,priority: 10,chunks: 'initial' // only package third parties that are initially dependent},elementUI: {name: 'chunk-elementUI', // split elementUI into a single packagepriority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or apptest: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm},commons: {name: 'chunk-commons',test: resolve('src/components'), // can customize your rulesminChunks: 3, //  minimum common numberpriority: 5,reuseExistingChunk: true}}})config.optimization.runtimeChunk('single'),{from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件to: './' //到根目录下}})}
}

3、main.js 配置文件详解：

先记录一下import里涉及到的不同：

1）为什么有的用from有的不用from？

因为涉及到组件的二次加工使用就需要用from，如果是单纯的使用就可以直接用import全部引入，比如css文件一般就是需要全部引入的

2）路径使用中@ /  ./   ../  之间有什么不同？

@在前面的配置文件中配置过，就是/src 的平替

/ 就是代表根目录

./ 就是代表同级目录下的文件

../  就是代表上一级目录下的文件

import Vue from 'vue'import Cookies from 'js-cookie'import Element from 'element-ui'
import './assets/styles/element-variables.scss'import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css
import App from './App'
import store from './store'
import router from './router'
import directive from './directive' // directive
import plugins from './plugins' // plugins
import { download } from '@/utils/request'import './assets/icons' // icon
import './permission' // permission control
import { getDicts } from "@/api/system/dict/data";
import { getConfigKey } from "@/api/system/config";
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
// 分页组件
import Pagination from "@/components/Pagination";
// 自定义表格工具组件
import RightToolbar from "@/components/RightToolbar"
// 富文本组件
import Editor from "@/components/Editor"
// 文件上传组件
import FileUpload from "@/components/FileUpload"
// 图片上传组件
import ImageUpload from "@/components/ImageUpload"
// 图片预览组件
import ImagePreview from "@/components/ImagePreview"
// 字典标签组件
import DictTag from '@/components/DictTag'
// 头部标签组件
import VueMeta from 'vue-meta'
// 字典数据组件
import DictData from '@/components/DictData'// 全局方法挂载
Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey
Vue.prototype.parseTime = parseTime
Vue.prototype.resetForm = resetForm
Vue.prototype.addDateRange = addDateRange
Vue.prototype.selectDictLabel = selectDictLabel
Vue.prototype.selectDictLabels = selectDictLabels
Vue.prototype.download = download
Vue.prototype.handleTree = handleTree// 全局组件挂载
Vue.component('DictTag', DictTag)
Vue.component('Pagination', Pagination)
Vue.component('RightToolbar', RightToolbar)
Vue.component('Editor', Editor)
Vue.component('FileUpload', FileUpload)
Vue.component('ImageUpload', ImageUpload)
Vue.component('ImagePreview', ImagePreview)Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)
DictData.install()/*** If you don't want to use mock-server* you want to use MockJs for mock api* you can execute: mockXHR()** Currently MockJs will be used in the production environment,* please remove it before going online! ! !*/Vue.use(Element, {size: Cookies.get('size') || 'medium' // set element-ui default size
})Vue.config.productionTip = falsenew Vue({el: '#app',router,store,render: h => h(App)
})