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:"
...
"
});

（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）
})

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com