10、常用插件

Vue - 点击查看当前系列文章

§ 10、常用插件「当前文章」

VsCode开发插件
#

Chinese (Simplified) Language Pack for Visual Studio Code：中文界面
auto rename tag
code runner：可以运行nodejs、python等代码
open in brower：在默认浏览器打开
live server：web服务器
vetur：写vue必备插件
Vue 2 Snippets：写vue必备插件
axios：axios补全插件
VueHelper vscode：vue，vue-router和vuex的代码提示
Path Intellisense：路径自动补全
Auto Close Tag：自动闭合标签
Beautify：格式化文件,保证正确的缩进
HTML CSS Support： CSS提示插件
JavaScript (ES6) code snippets：es6代码提示插件
VSCode Great Icons：给文件夹增加图标的插件

NProgerss
#

进度条插件，地址：https://github.com/rstacruz/nprogress

npm i nprogress --save

例如，每次路由切换显示进度条，在路由index.js中进行配置

//顶部页面加载条
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
//配置
NProgress.configure({
    easing: 'ease', //缓和模式
    speed: 500, //速度
    showSpinner: false, //显示右侧旋转
    trickleSpeed: 200,
    minimum: 0.3 //最小值，也就是起始位置
})
 
//路由监听
router.beforeEach((to, from, next) => {
    NProgress.start();
    next();
});
 
//路由跳转结束
router.afterEach(() => {
    NProgress.done()
})

在App.vue中进行样式配置

/* 更改进度条颜色 */
#nprogress .bar {
  background: #f10180 !important;
  height: 3px !important;
}

也可以绑定在Vue的原型对象上进行使用

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
//配置
NProgress.configure({
    easing: 'ease', //缓和模式
    speed: 500, //速度
    showSpinner: false, //显示右侧旋转
    trickleSpeed: 200,
    minimum: 0.3 //最小值，也就是起始位置
})
Vue.prototype.$NP = NProgress;

api

// 开启进度条
NProgress.start() — shows the progress bar
// 引动到指定位置
NProgress.set(0.4) — sets a percentage
// 前进一点点
NProgress.inc() — increments by a little
// 跑完
NProgress.done() — completes the progress

prerender-spa-plugin
#

如果服务器端渲染 (SSR) 只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

预渲染页面方式由于不需要web服务器的参与，设置比SSR更简单，特别适合用来展示一些静态页面，比如根据页面UI来自动生成骨架屏。

1、安装，webpack4和webpack5不一样，原生的只支持4，所以如果是5的话，就需要使用第三方重写的

# 对于webpack4
npm i prerender-spa-plugin --save-dev
# 对于webpack5
npm i @dreysolano/prerender-spa-plugin --save-dev

2、vue.config.js中进行配置

const { defineConfig } = require('@vue/cli-service')
//1.引入path：
const path = require('path');
//2.封装方法：
function resolve(dir){
    return path.resolve(__dirname,dir)
}

// 引入预渲染插件
// 如果是webpack4
// const PrerenderSPAPlugin = require('prerender-spa-plugin');
// 如果是webpack5
const PrerenderSPAPlugin = require('@dreysolano/prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

module.exports = defineConfig({
    configureWebpack: (config) => {
        // 开发生产共同配置别名
        Object.assign(config.resolve, {
            alias: {
                '@': resolve('src'),
                '@assets': resolve('src/assets'),
                '@views': resolve('src/views'),
                '@components': resolve('src/components'),
            }
        });
        // 设置为在打包环境下运行
        if (process.env.NODE_ENV !== 'production') return;
        return {
            //  主要部分
            plugins: [
                new PrerenderSPAPlugin({
                    staticDir: path.join(__dirname, 'dist'),
                    // 需要预渲染的路径，此处的路径不可以使用懒加载
                    routes: ['/home','/about'],
                    // 这个很重要，如果没有配置这段，也不会进行预编译
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: false, //为false会开启浏览器调试
                        renderAfterTime: 5000,
                        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                        renderAfterDocumentEvent: 'render-event'
                    })
                })
            ]
        } 
    },
})

3、main.js中挂载事件

new Vue({
    router,
    store,
    render: h => h(App),
    // 挂载预渲染事件
    mounted() {
        document.dispatchEvent(new Event('render-event'))
    }
}).$mount('#app')