vue中import引入文件和使用的方式總結

1 引入第三方文件

　　import router from './router';

　　使用 this.router;

2 引入模塊，字符串，數值，函數，類獲取按需導入

　　import { testFun,string,number,class} from '../js/test.js';

　　使用testFun(),string,number,class.a

3 引入整個模塊,模塊中有多個方法和變量

　　例如　

export const sqrt = Math.sqrt; export function square(x) { return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); }

　　import * as lib from 'lib';
　　使用 lib.sqrt/lib.square()

4  只是導入,不需調用如css或類庫

　　import "./assets/less/style.less";

　　import AXIOS from 'axios';

5 動態引入

async function main() {
    const myModule = await import('./myModule.js');

    const {export1, export2} = await import('./myModule.js');

    const [module1, module2, module3] =
        await Promise.all([
            import('./module1.js'),
            import('./module2.js'),
            import('./module3.js'),
        ]);
}
main();
 
//這個文章特別好
https://zhuanlan.zhihu.com/p/57565371

6.文本溢出顯示省略號

單行文本溢出顯示省略號

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行文本顯示省略號

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

但是你會發現有的瀏覽器設置上-webkit-box-orient: vertical; 不起作用

解決方式如下

/* autoprefixer: off */ -webkit-box-orient: vertical; // 參考 https://github.com/postcss/autoprefixer/issues/776 /* autoprefixer: on */
通過膩子來實現生效