xtravel-pc-v1
erp PC 前端项目
依赖安装
npm install element-ui --save
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的
npm install babel-plugin-component -dev
npm install vuex --save
预编译语言
npm install sass --save
npm install css-loader --save
npm install sass-loader node-sass --save
表达验证依赖
npm install async-validator --save
ajax 依赖
npm install axios --save
token 解析插件
npm install jsonwebtoken --save
解决 ie 对 Promise(es6 语法)兼容问题,/ 在 main.js 文件夹中引入 /
npm install es6-promise --save
如果 chromedriver 安装出现问题,可以考虑使用如下命名
npm install --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
storage 工具插件
npm install vue2-storage --save
加密解密依赖
npm install crypto-js --save
时间操作工具
npm install moment --save
图表
npm install echarts --save
金额工具
npm install numeral --save
vue-loader
- vue-loader在项目创建时会自动安装这个依赖,但是要注意版本要在“14.2.4”以上(包括“14.2.4”)
webpack-merge
解决线上打包图片的问题
npm install webpack-merge --save
vue-infinite-scroll
无限滚动组件
npm install vue-infinite-scroll --save
webpack-bundle-analyzer
项目优化报告插件
npm install webpack-bundle-analyzer --save-dev
生成报告
image-webpack-loader
图片压缩
npm install image-webpack-loader --save
compression-webpack-plugin
代码压缩
npm install compression-webpack-plugin --save-dev
webpack-uglify-harmony-plugin
js代码压缩
npm install webpack-uglify-harmony-plugin --save
mini-css-extract-plugin
css 代码分离
npm install mini-css-extract-plugin --save
html-webpack-plugin
html 代码压缩
npm install html-webpack-plugin --save
optimize-css-assets-webpack-plugin
css 压缩
npm install optimize-css-assets-webpack-plugin --save-dev
babel-plugin-component
局部组件加载
npm i babel-plugin-component --save
prerender-spa-plugin
预渲染
npm i -D prerender-spa-plugin
babel-plugin-transform-remove-console
去除 console.log
npm i --D babel-plugin-transform-remove-console
出掉多余的css
npm i -D glob-all purgecss-webpack-plugin
Build Setup
bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
示例 demo 查看说明
- 组件说明和描述
portal->component-description.md
- 组件
demo
地址:
frame -> demo -> demoComponent.vue
-> demoForm.vue
-> invoiceAdd.vue
-> invoiceList.vue
- 全局公用样式查看
vue.config.js
const webpack = require('webpack')
const merge = require('webpack-merge') // base64
const APP_NAME = require('./package.json').name //项目名称
const InsertScriptPlugin = require('./scripts/InsertScriptWebpackPlugin') //插入脚本插件
const PROXY = require('./config/proxy') //子项目url代理配置文件
const modules = require('./config/modules') //要加载的子项目配置文件
const path = require('path')
// 优化插件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const glob = require("glob-all");
const PurgecssPlugin = require("purgecss-webpack-plugin");
function resolve (dir) {
return path.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, //这会告诉服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到PROXY中配置的url
disableHostCheck: true, //关闭host检测(配置了这个才可以通过域名访问)
compress: true, // 代码压缩
},
/**
* 配置Webpack其他选项
* 警告
有些 webpack 选项是基于 vue.config.js 中的值设置的,所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path;你应该修改 vue.config.js 中的 baseUrl 选项而不是修改 output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方,以确保所有的部分都能正常工作在一起。
*/
configureWebpack: {
//这里必须引入vue
externals: {
vue: 'Vue',
},
// 分离 插件
optimization: {
minimizer: true,
splitChunks: {
chunks: 'async',
minSize: 3000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 10,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
libs: {
name: "chunk-libs",
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: "initial"
},
elementUI: {
name: "chunk-elementUI",
priority: 20,
test: /[\\/]node_modules[\\/]element-ui[\\/]/,
chunks: "all"
},
echarts: {
name: "chunk-echarts",
priority: 30,
test: /[\\/]node_modules[\\/]echarts[\\/]/,
chunks: "all"
},
ckeditor: {
name: "chunk-ckeditor",
priority: 40,
test: /[\\/]node_modules[\\/]@ckeditor[\\/]ckeditor5-build-classic[\\/]build[\\/]/,
chunks: "all"
},
styles: {
name: 'styles',
test: /\.(sa|sc|c)ss$/,
chunks: 'initial',
enforce: true,
},
moment: {
name: "chunk-moment",
priority: 50,
test: /[\\/]node_modules[\\/]moment[\\/]/,
chunks: "all"
},
zrender: {
name: "chunk-zrender",
priority: 60,
test: /[\\/]node_modules[\\/]zrender[\\/]/,
chunks: "all"
},
main: {
name: "chunk-main",
priority: 70,
test: /[\\/]src[\\/]main[\.]js/,
chunks: "all"
}
}
}
},
plugins: [
new webpack.DefinePlugin({
'XM.MN': JSON.stringify(APP_NAME),
}),
new InsertScriptPlugin({ files: modules }),
// 启动 report
new BundleAnalyzerPlugin({
generateStatsFile: true,
statsOptions: { source: false }
}),
// 去除 moment 中 i18n
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/),
// 声明 ‘production’ 生产环境最小体积
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
// 在代码层面上进行压缩
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,
threshold: 0, // 只有大小大于该值的资源会被处理
minRatio:0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: false // 删除原文件
}),
// 去除 多余 css
new PurgecssPlugin({
paths: glob.sync([resolve("./**/*.vue")]),
extractors: [
{
extractor: class Extractor {
static extract(content) {
const validSection = content.replace(
/