Xportal-pc NPM

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

glob-all purgecss-webpack-plugin

出掉多余的css

npm i -D glob-all purgecss-webpack-plugin

压缩js代码

npm install terser-webpack-plugin --save-dev

babel-plugin-syntax-dynamic-import

动态语法解析
npm install babel-plugin-syntax-dynamic-import --save-dev
@xunlei/vue-lazy-component
组件层面懒加载

npm i @xunlei/vue-lazy-component

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 查看说明

组件说明和描述

<!-- erp 项目中的组件和说明描述都放在 portal 项目下的 component-description.md 文件中 -->
portal->component-description.md

组件demo地址：

<!-- 
  erp 项目中所有已封装的组件的 demo 都放在 frame 项目下的 demo 文件夹中
  demoComponent.vue 文件表示组件的 demo 实例，可以查看是否有自己需要的组件
  demoForm.vue 表示 form 表单组件
  invoiceAdd.vue form 表单组件，代码生成器生成的
  invoiceList.vue table 列表组件，代码生成器生成的
-->
frame -> demo -> demoComponent.vue
              -> demoForm.vue
              -> invoiceAdd.vue
              -> invoiceList.vue

全局公用样式查看

<!-- 
  erp 系统中的全局公共演示放在 portal 项目下的 src -> css 文件 -> public -> commonBase.scss 
  commonBase.scss  全局公共样式，无须引入，直接拿过来用
-->