wufan's blog

归档 · 2021

首页

关于

npx

npx

npm 从5.2版开始，增加了 npx 命令，主要解决的问题是调用项目内部安装的模块，比如

npm install webpack -D

要调用webpack的话只能在项目脚本或者package.json的scripts字段，如果要在cli调用，要这样

#根目录下
$ node-modules/.bin/webpack -v

使用npx的话可以直接调用

npx webpack -v

原理是npx运行时会到node_modules/.bin和$PATH里检查命令是否存在，所以系统命令也可以调用，其他具体参见官方说明

更多

nodejs中的package.json文件

关于package.json文件的官方文档说明,英文好的的同学可以自行前往查看，下面是对一些文件中的常见字段的说明：

name

项目名称，如果要发布的话，这个字段必须

version

版本，同上

更多
github

github clone 速度慢解决方案

有时候从github上clone项目速度很慢，可以将链接中域名github.com替换成github.com.cnpmjs.org,比如原先的clone url为

https://github.com/wufan123/xxxx.git

替换为

https://github.com.cnpmjs.org/wufan123/xxxx.git

更多
javascript

highlight.js使用

一个web上高亮语法的js，官网

使用(CDN)：

<link rel="stylesheet"
      href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

要更换主题的话，替换css，这边default.css是默认主题，要换主题的改css文件名称就可以了，参见主题列表，比如要用Vs 2015，改成

<link rel="stylesheet"
      href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/styles/vs2015.min.css">

更多
webpackgulp

webpack和gulp的区别

Gulp 的定位 Task Runner, 就是用来跑一个一个任务的。

放在以前比如我想用sass写css, coffee写js, 我必须手动的用相应的compiler去编译各自的文件，然后各自minify。这时候designer给你了两张新图片，好嘞，接着用自己的小工具手动去压缩图片。
后来前端人不能忍了，搞出个自动化这个流程的 Grunt/Gulp, 比如你写完代码后要想发布production版本，用一句gulp build就可以

  • rm 掉 dist文件夹中以前的旧文件
  • 自动把sass编译成css, coffee编译成js
  • 压缩各自的文件，压缩图片，生成图片sprite
  • 拷贝minified/uglified 文件到 dist 文件夹

但是它没发解决的是 js module 的问题，是你写代码时候如何组织代码结构的问题.

更多
vue

vue-cli3.0+中使用CDN加载资源

在vue.config.js中配置使用CDN加载的modules（使用全局变量代替），比如

 chainWebpack: config => {
    config.set('externals', {
        'vue': 'Vue',//"库名:引入后的别名" 
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'mint-ui': 'MintUI'
    })
  }

然后在public中的index.html加入链接,比如上面所列的库

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.3/dist/vue-router.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css" />
    <script src="https://unpkg.com/mint-ui/lib/index.js"></script>

资源要自己找，这边推荐两个CDN平台

这样就配置完成了，改成CDN的话，有些库的使用方式需要改一下，参照每个库的官方说明即可，比如Vue Router
说明了CDN和NPM安装的区别:

  • CDN
<!-- 在 Vue 后面加载 vue-router，它会自动安装的： -->
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
  • NPM
npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

其他的不一一说明了

更多
vue

vue-cli3.0+按需引入mint-ui

安装

首先需要babel-plugin-component

npm install babel-plugin-component -D

配置

然后在babel.config.js中配置

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
       [
      "component",
      {
        libraryName: "mint-ui",
        style: true,
      }
    ],
  ]
};

使用

在main.js中使用

import { Swipe, SwipeItem } from "mint-ui";

更多
loading..
LOL英雄联盟

LOL英雄联盟攻略

兵线

兵线时间

1分05秒出兵，中线小兵1分30秒交汇，边线小兵1分40秒交汇。也就是说中线小兵25秒到线上，边线小兵35秒到线上，每30秒刷一波线，14分钟(前期)前每3波出炮车线，14分钟到25分钟(中期)每2波出炮车线，25分钟(后期)以后每波出炮车线

更多