vue 使用相对路径

当服务器下不单单运行一个项目时，根目录下会有多个项目，vue 使用默认的根路径打包项目时，项目中文件的依赖会去根目录下查找，而出现找不到当前路径下所依赖的 js 与 css 文件的情况，故应在 vue.config.js 中将默认的基础路径设置为相对路径，即可在多项目服务器下正确运行了。

module.export = {
  // 默认的baseUrl为"/"
  baseUrl: "./"
};

切记！！！ vue history 模式不要使用相对路径的 baseUrl

相对 baseUrl 的限制

相对路径的 baseUrl 有一些使用上的限制。在以下情况下，应当避免使用相对 baseUrl:

1. 当使用基于 HTML5 history.pushState 的路由时；
2. 当使用 pages 选项构建多页面应用时。

history 模式要对服务器进行配置，详见官方文档

2019 年 3 月 8 日更新

由于项目几乎都不会放在根目录下，而且项目都需要使用 history 模式，故无法在基础路径中使用相对路径，因此应该尽量约定好项目在服务器上的目录名，并在基础路径上以绝对路径方式配置。注意，vue-cli 3.3 版本后使用 publicPath 替代了原来 vue.config.js 中 baseUrl 的配置。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

如果你的项目使用了 webpack 工程，可以通过变量覆盖的方式来实现主题定制。首先在项目中先建一个目录，比如 my-theme，然后在 my-theme 下建立一个 less 文件 index.less，并写入下面内容：

@import '~iview/src/styles/index.less';
/* 例子 */
/* 完整的变量列表可以查看 默认样式变量。 */
@primary-color: #8c0776;

然后在入口文件 main.js 内导入这个 less 文件即可：

import Vue from "vue";
import iView from "iview";
import "../my-theme/index.less";
Vue.use(iView);

注意: 要在项目中使用 npm 安装 less 与 less-loader 否则运行和打包时都会报错，在 vue 新的版本中可能安装 less 和 less-loader 后还会报 inline javascript is not enabled. 可以在 vue.config.js 配置文件中写入如下配置来解决：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
};

&符号代表当前元素

#main {
    color: black;
    a {
        font-weight: bold;
        &:hover {
            color: red;
        }
    }
}
// is compiled to
#main {
    color: black;
}
#main a {
    font-weight: bold;
}
#main a:hover {
    color: red;
}

iview 自定义主题报错

首先确认安装了 less 和 less-loader，如果仍然报错，且报错为 Inline Javascript is not enabled. Is it set in your option? 这说明 less-loader 的配置没有开启行内使用 Js。应该在 vue.config.js 中设置，由于 vue-cli3.0 后，vue.config.js 不再默认出现在文件目录中，所以要手动新建该文件。然后在文件中设置开启 inline Javascript 如下：

module.exports = {
    css: {
        loaderOptions: {
            // 向 CSS 相关的 loader 传递选项
            less: {
                javascriptEnabled: true
            }
        }
    }
};

若是 vue2.X 版本则应该在 webpack.base.config.js 中配置如下：

{ loader: 'less-loader', options: { javascriptEnabled: true } }

CSS中子元素position: absolute，会根据父元素定位，若父元素未指定position，父元素position则默认为static，子元素继续向上查找父元素position，以第一个找到position为非static的父级元素为绝对定位的基准，若直到body都没有找到position为非static的父级元素，则以body为绝对定位的基准。

结论：若要子元素根据父元素绝对定位，除了子元素的position设置为absolute以外，还要将父元素的position改为relative。

微信小程序中实现菜单栏上滑至顶后，固定位置

1. 小程序中只能使用scroll-view组件监听页面滚动离顶部的距离，scroll-view的滑动会与page页面的滑动相叠加。因此需要设置scroll-view组件的宽高分别为可用窗口的实际高度。 不应该在程序加载时通过接口getSystemInfo获取可用窗口高度windowHeight，因为此时的窗口是不包含底部tabbar高度的窗口，而跳转后的页面无tabbar，高度包含了tabbar高度，因此要在跳转后的页面onReady生命周期函数中使用getSystemInfo获取windowHeight。

2. 在scroll-view中监听离顶部的距离，应该避免实时赋值操作，因为setData函数与监听函数都很消耗性能，应在监听函数中做完判断再进行赋值，否则会造成真机预览时滑动卡顿的状况。

3. 由于使用了flex布局当菜单栏吸顶变为绝对定位时，应该用一个和菜单栏相同大小的空view组件填补菜单栏的位置，否则会发生下面布局整体上移的现象。

用户文件配置

{
    // 设置编辑器的tabSize为2
    "editor.tabSize": 2,
    // 关闭基于文件自动检测tabSize与insertSpaces
    "editor.detectIndentation": false,
    // 使用prettier格式化vue中的html
    "vetur.format.defaultFormatter.html": "prettier",
    // 不使用vetur的简化版eslint-plugin-vue检查template中的html，因为会报x-invalid-end-tag
    "vetur.validation.template": false,
    // 文件路径改变后自动更新import
    "typescript.updateImportsOnFileMove.enabled": "always",
    "javascript.updateImportsOnFileMove.enabled": "always",
    // 防止api-extractor init出的json文件中有注释而报错
    "files.associations": {
      "*.json": "jsonc"
    },
}

ESlint 的 rules 文件配置

使用配置前确保项目中使用 npm 安装了 eslint，eslint-plugin-vue 等包，以及 vetur，prettier 等 vscode 插件，现在 3.3 版本的 vue cli 已安装 eslint-plugin-vue。

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    // 不检查iview等UI框架的“x-invalid-end-tag”错误，使用vetur简化版禁用不全，应安装eslint-plugin-vue
    "vue/no-parsing-error": [
      2,
      {
        "x-invalid-end-tag": false,
      },
    ],
    /* // 现已使用两个空格缩进，下面4空格设置废弃
        // 对vue文件中的html缩进检查设置为4
        "vue/html-indent": [
            "error",
            4,
            {
                "attribute": 1,
                "closeBracket": 0,
                "alignAttributesVertically": true,
                "ignores": []
            }
        ],
        // 将prettier的缩进检查设置为4
        "prettier/prettier": [
            "error",
            {
                tabWidth: 4
            }
        ] */
  },
  parserOptions: {
    parser: "babel-eslint",
  },
};

默认已经安装 vetur 插件

由于国外镜像太慢，所以使用国内的淘宝npm镜像

方法一：命令行修改npm配置

更换registry为淘宝镜像地址

# 更换镜像
npm config set registry https://registry.npm.taobao.org/
# 检查更换是否成功
npm config get registry

方法二：直接修改npm配置文件

# 打开npm配置文件
npm config edit

将 registry=https://registry.npmjs.org/ 更换为 registry=https://registry.npm.taobao.org/

注意：将npm源更换为淘宝源后，npm search功能会报错，只能使用npm install功能。可以在使用npm search的时候手动临时使用官方源

npm search packageName --registry=https//registry.npmjs.org/

先来看看这段代码是否能正确运行，我们期望的结果是输出“5，4， 3， 2， 1， go!”

for (var i = 5; i >= 0; i--) {
  setTimeout(function () {
    console.log(i === 0 ? 'go!' : i);
  }, (5 - i) * 1000);
}
// 延时输出了6个-1

运行后发现输出了“-1， -1， -1， -1， -1，-1”，这是为什么呢？

winXP 查看激活状态

win+R 打开运行对话框，输入 oobe/msoobe /a 查看是否激活

win7 及以上系统查看激活状态

win+R 打开运行对话框，输入

slmgr.vbs -dlv 查看完整授权状态，

slmgr.vbs -dli 查看简化授权状态，

slmgr.vbs -xpr 查看是否永久激活。