• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • vite + vue3 + ts 安装 scss + qs + nprogress

    安装 css 预处理

    由于 Vite 的目标仅为现代浏览器,因此建议使用原生 CSS 变量和实现 CSSWG 草案的PostCSS插件(例如 postcss-nesting)来编写简单的、符合未来标准的 CSS。

    话虽如此,但 Vite 也同时提供了对.scss.sass.less.styl.stylus文件的内置支持。没有必要为它们安装特定的 Vite 插件,但必须安装相应的预处理器依赖:

    //.scss and .sass
    npm install sass -D
    


    qs包

    qs是一个增加了一些安全性的查询字符串解析和序列化字符串的库。https://www.npmjs.com/package/qs

    cd /var/web/www/exampleHome
    
    npm install qs
    
    若vue 使用 ts版,还需要下载 @types/qs
    npm install @types/qs -D
    


    qs.stringify()

    qs.stringify()作用是将对象或者数组序列化成URL的格式。

    对象序列化

    let obj = {
      id: 1,
      name: 'joke',
      age: 18,
    }
    
    qs.stringify(obj)
    
    //格式化结果
    '&id=1&name=joke&age=18'
    


    数组序列化

    let arr = [1,2,3]
    qs.stringify({a:arr})
    
    //格式化结果
    'arr[0]=1&arr[1]=2&arr[2]=3'
    

    上面的等同,如下方式。也是默认方式arrayFormat:'indices'

    let arr = [1,2,3]
    qs.stringify({a:arr}, {arrayFormat: 'indices'})
    
    //格式化结果
    'arr[0]=1&arr[1]=2&arr[2]=3'
    


    indices:false,去除默认处理的方式。

    let arr = [1,2,3]
    qs.stringify({a:arr},{indices:false});
    
    //格式化结果
    'arr=1&arr=2&arr=3'
    


    let arr = [1,2,3]
    qs.stringify({a:arr}, {arrayFormat: 'brackets'})
    
    //格式化结果
    'a[]=1&a[]=2&a[]=3'
    


    let arr = [1,2,3]
    qs.stringify({a:arr}, {arrayFormat: 'repeat'})
    
    //格式化结果
    'a=1&a=2&a=3'
    


    qs.parse()

    qs.parse()则就是反过来啦,将我们通过qs.stringify()序列化的对象或者数组转回去。

    let url = '&id=1&name=joke&age=18'
    qs.parse(url)
    
    //格式化结果
    {id:1,name:joke, age:18 } 
    


    nprogress

    nprogress是页面跳转是出现在浏览器顶部的进度条。
    官网:http://ricostacruz.com/nprogress
    github:https://github.com/rstacruz/nprogress

    安装

    cd /var/web/www/exampleHome
    
    npm install nprogress 
    
    如果使用 ts,还需安装 @types/nprogress
    npm install @types/nprogress -D
    



    引用

    //引用方式
    import NProgress from 'nprogress'
    import 'nprogress/nprogress.css'
    
    
    NProgress.start()    // 开始
    NProgress.set(0.4)   // 设置进度,0-1
    NProgress.inc()      // 让进度条增加
    NProgress.done()     // 完成
    


    (1)百分比:通过设置 progress 的百分比,调用set(n)来控制进度,其中 n 的取值范围为 0-1。

    NProgress.set(0.0);    
    NProgress.set(0.4);
    NProgress.set(1.0);    
    

    (2)递增:要让进度条增加,只要调用inc()。这会产生一个随机增量,但不会让进度条达到 100%。此函数适用于图片加载或其他类似的文件加载。

    NProgress.inc();
    

    (3)强制完成:done()设定true,强制使进度条显示满格,即使它开始状态,没有被显示出来。

    NProgress.done(true);
    

    (4)minimum:设置最低百分比

    NProgress.configure({ minimum: 0.1 });
    

    (5)template:改变进度条的 HTML 结构。为保证进度条能正常工作,需要元素拥有role='bar'属性。

    NProgress.configure({
       template:"<div class='....'>...</div>"
    });
    

    (6)ease:调整动画设置,ease 可传递 CSS3 缓冲动画字符串(如 ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier)。speed为动画速度(单位 ms)。

    NProgress.configure({ ease: 'ease', speed: 500 });
    



    使用

    路由中使用

    router.beforeEach((to, from , next) => {
       NProgress.start();   //每次切换页面时,调用进度条
       next();    //没有 next() 页面不会跳转
    });
    
    router.afterEach(() => {
       NProgress.done();   // 在即将进入新的页面组件前,关闭掉进度条
    })
    


    封装axios中使用

    //在 request 拦截器中显示进度条 Nprogress.start()
    axios.interceptors.request.use(config => {
       NProgress.start();   //请求开始时显示进度条
       return config
    })
    
    //response中完成进度条 Nprogress.done()
    axios.interceptors.response.use(config => {
       NProgress.done();   //服务响应时完成进度条
       return config
    })
    


    自定义进度条颜色

    在 App.vue 中的 style 中设置进度条颜色,为红色。

    #nprogress .bar {
      background: red !important;
    }
    


    配置

    NProgress.configure({
       easing: 'ease',  // 动画方式,和css动画属性一样(默认:ease)
       speed: 500,  // 递增进度条的速度,单位ms(默认: 200)
       showSpinner: false,  // 是否显示加载ico
       trickle: true,  //是否自动递增
       trickleSpeed: 200,  // 自动递增间隔
       minimum: 0.3,   // 初始化时的最小百分比,0-1(默认:0.08)
       parent: '#container'  //指定此选项以更改父容器(默认:body)
    })