xtravel-pc-v1erpPC前端项目依赖于安装npminstallelement-ui--savebabel-plugin-component的帮助，我们只能引入需要的组件来减小项目的体积目的npminstallbabel-plugin-component-devnpminstallvuex--save预编译语言npminstallsass--savenpminstallcss-loader--savenpminstallsass-loadernode-sass--save表示验证依赖npminstallasync-validator--saveajax依赖npminstallaxios--savetoken解析插件npminstalljsonwebtoken--save解决ie兼容Promise（es6语法），/引入/npminstalles6-promise在main.js文件夹中--saveifchromedriverisinstalled如果有问题，可以考虑使用下面命名的npminstall--chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriverstorage工具插件-innpminstallvue2-storage--save加解密依赖npminstallcrypto-js--save时间操作工具npminstallmoment--savechartnpminstallecharts--saveamounttoolnpminstallnumerical--savevue-loadervue-loader会在项目创建的时候自动安装这个依赖，但是注意版本一定要在“14.2.4”以上（包括“14.2.4”）webpack-merge解决在线打包图片的问题npminstallwebpack-merge--savevue-infinite-scroll无限滚动组件npminstallvue-infinite-scroll--savewebpack-bundle-analyzeritem项目优化报告插件npminstallwebpack-bundle-analyzer--save-dev生成报告image-webpack-loader图片压缩npminstallimage-webpack-loader--savecompression-webpack-plugin代码压缩npminstallcompression-webpack-plugin--save-devwebpack-uglify-harmony-pluginjs代码压缩npminstallwebpack-uglify-harmony-plugin--savemini-css-extract-plugincss代码分离npminstallmini-css-extract-plugin--savehtml-webpack-pluginhtml代码压缩npm安装html-webpack-plugin--saveoptimize-css-assets-webpack-plugincss压缩npminstalloptimize-css-assets-webpack-plugin--save-devbabel-plugin-component部分组件加载npmibabel-plugin-component--saveprerender-spa-pluginpre-rendernpmi-Dprerender-spa-pluginbabel-plugin-transform-remove-consoleremoveconsole.lognpmi--Dbabel-plugin-transform-remove-console删除多余的cssnpmi-Dglob-allpurgecss-webpack-pluginBuildSetupbash#installdependenciesnpminstall#servewithhotreloadatlocalhost:8080npmrundev#buildforproductionwithminificationnpmrunbuild#buildforproduction和查看bundleanalyzer报告npmrunbuild--report#rununittestsnpmrununit#rune2etestsnpmrune2e#runalltestsnpmtestexampledemo查看description组件描述和描述portal->component-description.md组件demo地址：frame->demo->demoComponent.vue->demoForm.vue->invoiceAdd.vue->invoiceList.vue全局公共样式视图vue.config.jsconstwebpack=require('webpack')constmerge=require('webpack-merge')//base64constAPP_NAME=require('./package.json').name//项目名称constInsertScriptPlugin=require('./scripts/InsertScriptWebpackPlugin')//插入脚本插件constPROXY=require('./config/proxy')//sub项目url代理配置文件constmodules=require('./config/modules')//加载子项目配置文件constpath=require('path')//优化插件constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPluginconstCompressionWebpackPlugin=require('compression-webpack-plugin')constglob=require("glob-all");constPurgecssPlugin=require("purgecss-webpack-plugin");functionresolve(dir){返回路径.join(__dirname,dir)}module.exports={publicPath:'./',productionSourceMap:false,//是否启用cssSourceMap,TODO???[xsw]打包应该设置为false？？？/***Type:Object*支持所有webpack-dev-server选项*host、port和https等一些值可能会被命令行参数覆盖*一些像publicPath和historyApiFallback不应该被修改，因为它们需要匹配开发服务器的baseUrl同步保证正常工作*/devServer:{port:18080,//项目端口proxy:PROXY,//这会告诉服务器代理任何未知的请求（不匹配静态文件的请求）到PROXYdi中配置的urlsableHostCheck:true,//关闭主机检测（配置这个后只能通过域名访问）vue.config.js设置了值，所以不能直接修改。例如，你应该修改vue.config.js中的outputDir选项，而不是修改output.path；你应该修改vue.config.js中的baseUrl选项，而不是修改output.publicPath。这样做是因为vue.config.js中的值在配置中的多个位置使用，以确保一切都协同工作。*/configureWebpack:{//这里必须引入vueexternals:{vue:'Vue',},//分离插件优化:{minimizer:true,splitChunks:{chunks:'async',minSize:3000,maxSize:0,minChunks:1,maxAsyncRequests:5,maxInitialRequests:10,automaticNameDelimiter:'~',name:true,cacheGroups:{libs:{name:"chunk-libs",测试:/[\\/]node_modules[\\/]/,priority:10,chunks:"initial"},elementUI:{name:"chunk-elementUI",优先级:20,test:/[\\/]node_modules[\\/]element-ui[\\/]/,chunks:"all"},echarts:{name:"chunk-echarts",priority:30,test:/[\\/]node_modules[\\/]echarts[\\/]/,chunks:"all“}，ckeditor：{名称：“chunk-ckeditor”，优先级：40，测试：/[\\/]node_modules[\\/]@ckeditor[\\/]ckeditor5-build-classic[\\/]build[\\/]/，块：“全部”}，样式：{name:'styles',test:/\.(sa|sc|c)ss$/,chunks:'initial',enforce:true,},moment:{name:"chunk-moment",优先级：50,test:/[\\/]node_modules[\\/]moment[\\/]/,chunks:"all"},zrender:{name:"chunk-zrender",priority:60,测试:/[\\/]node_modules[\\/]zrender[\\/]/,chunks:"all"},main:{name:"chunk-main",priority:70,test:/[\\/]src[\\/]main[\.]js/,chunks:"all"}}}},plugins:[newwebpack.DefinePlugin({'XM.MN':JSON.stringify(APP_NAME),}),newInsertScriptPlugin({文件:modules}),//启动报告tnewBundleAnalyzerPlugin({generateStatsFile:true,statsOptions:{source:false}}),//从moment中移除i18nnewwebpack.ContextReplacementPlugin(/moment[\/\\]locale$/,/zh-cn/),//声明'production'生产环境的最小大小newwebpack.DefinePlugin({'process.env':{NODE_ENV:JSON.stringify('production')}}),//在代码级压缩newCompressionWebpackPlugin({algorithm:'gzip',test:/\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,threshold:0,//只有尺寸较大的资源超过这个值会被删除ProcessingminRatio:0.8,//只有压缩率小于这个值的资源才会被处理deleteOriginalAssets:false//删除原文件}),//去掉多余的cssnewPurgecssPlugin({paths:glob.sync([resolve("./**/*.vue")]),提取器:[{提取器:classExtractor{staticextract(content){constvalidSection=content.replace(/
