Vue 学习笔记

云游君

发布于 2021-05-21 10:40:42

3560

发布于 2021-05-21 10:40:42

文章被收录于专栏：云游的小教程

使用 Vue.js 过程中的一些笔记。

FAQ

记录一些细节问题以及不易搜索到的解决方法。

Parcel.js + Vue

非父子组件的通信

Vue2.0 组件之间通信 - CSDN

Build Lib Without Dependencies

使用 vue-cli@3.x 构建自己的库时，因为又引入了第三方组件，打包后将代码合在了一起显得很大。所以应当只打包自己的组件，而不打包内部引入组件的代码。（依赖自然会安装）

Webpack 文档中存在这样的选项，也就是注明 externals。外部扩展 - Webpack

可以在 vue.config.js 中定义 Webpack 配置。 configureWebpack

module.exports = {
  configureWebpack: {
    // externals: ['v-tooltip']
    // 但是连字符可能识别有问题, 不能这么写
    externas: {
      VTooltip: "v-tooltip",
    },
  },
};

SPA 预渲染

使用HTML5 History 模式可以使 URL 显得更美观。但与此同时，由于是单页应用，没有后台配置支持的话，直接访问相关路由或刷新时会导致页面访问 404。这时，又不想配置后台，又不想放弃 History 模式，则还有另外一条出路。

也就是进行预渲染。

可用的插件：

prerender-spa-plugin

Install

yarn add -D prerender-spa-plugin

Config

// vue.config.js
const path = require("path");
const PrerenderSPAPlugin = require("prerender-spa-plugin");

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        // Required - The path to the webpack-outputted app to prerender.
        staticDir: path.join(__dirname, "dist"),
        // Required - Routes to render.
        routes: ["/", "/go", "/unit"],
      }),
    ],
  },
};

To Be Continued.

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-02-20-，如有侵权请联系 cloudcommunity@tencent.com 删除

webpack