vue

搭建、可视化、文件预览、性能优化

1. 系统搭建

• vue2搭建系统

• vue3搭建系统

2. 大屏可视化

3. 文件预览

docx预览

//import mammoth from 'mammoth'
readExcelFromRemoteFile: function (url) {
            var vm = this;
            var xhr = new XMLHttpRequest();
            xhr.open("get", url, true);
            xhr.responseType = "arraybuffer";
            xhr.onload = function () {
                if (xhr.status == 200) {
                    mammoth
                        .convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
                        .then(function (resultObject) {
                            vm.$nextTick(() => {
                                // document.querySelector("#wordView").innerHTML =
                                //   resultObject.value;
                                vm.vHtml = resultObject.value;
                                vm.loading = false
                            });
                        });
                }
            };
            xhr.send();
        }

pdf预览

//pdf预览
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";

 setup(props) {
        const state = reactive({
            pdfh5: null,
        });
        onMounted(() => {
            state.pdfh5 = new Pdfh5("#pdf", {
                pdfurl: props.url
            });
            state.pdfh5.on("complete", function (status, msg, time) {
                console.log('load2')
            });
        });
        return {
            ...toRefs(state)
        };
    },

txt预览

// txt预览
urlToBlob(file_url) {
            let xhr = new XMLHttpRequest();
            xhr.open("get", file_url, true);
            xhr.responseType = "blob";
            xhr.requestEncoding = 'utf-8'
            let self = this//onload this指向为window中转一下
            xhr.onload = function () {
                if (this.status == 200) {
                    const reader = new FileReader()
                    reader.onload = function () {
                        self.vHtml = reader.result//获取的数据data
                    }
                    reader.readAsText(this.response);
                } else {

                }
            };
            xhr.send();
        },

4. 性能优化

1. 异步组件 resolve =>
2. 路由懒加载 resolve =>(require([], resolve))
3. 图片懒加载 lazy-load
4. cdn引入第三方库：CDN(内容分发网络)，是一种公共服务，他本身有很多台位于不同地域、接入不同运营商的服务器，而所谓的使用CDN实质上就是让CDN作为网站的门面，用户访问到的是CDN服务器，而不是直接访问到网站。由于CDN内部对TCP的优化、对静态资源的缓存、预取，加上用户访问CDN时，会被智能地分配到最近的节点，降低大量延迟，让访问速度可以得到很大提升。一个原则是尽量将比较大的第三方库放到cdn上去以减少请求时间
5. 将cdn库下载到本地引入（element本地引入js,css图标不显示）

6. 按需引入

elment-ui按需引入
npm install babel-plugin-component -D
修改 .babelrc为
{
"presets": [
["es2015", { "modules": false }],
"stage-2" // es6兼容es5
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
npm install babel-preset-es2015 --save-dev


移动端vant按需引入
npm i vant -S npm i babel-plugin-import -D
修改 .babelrc为
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]

7. gzip压缩