系统环境

• 项目使用 vue-cli 3 创建
• 使用scss预处理器

开始

1、 安装插件

1
2

npm i style-resources-loader -D
# or yarn add style-resources-loader -D

2、 修改项目webpack配置

项目根目录找到 vue.config.js 文件（项目初始化时默认是没有该文件的，如果没找到则在根目录创建一个，和 package.json同级）。
如果是新建的 vue。config.js，配置成如下（path.resolve的第二个参数是scss变量的路径，需要根据实际情况修改）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

const path = require("path");

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            "sass-loader",
            {
              loader: "style-resources-loader",
              options: {
                patterns: [
                  path.resolve(__dirname, "path/to/scss/variables/*.scss")
                ]
              }
            }
          ]
        }
      ]
    }
  }
};

如果之前已经有其他配置，则需要把以上配置对应补充到文件中。

该配置会自动把scss变量注入到各个组件中，所以不需要任何手动引入就可以在所以组件中使用定义好的变量了。

以上。

参考

阅读原文 How To Install Nginx on Ubuntu 18.04

本教程以前的版本由 Justin Ellingwood编写

介绍

Nginx是世界上最流行的web服务器之一，它负责托管互联网上一些大型、高流量的站点。它比Apache更加资源友好，在多数情况下可以作为web服务器或者反向代理。

在该指南中，我们将讨论如何在你的Ubuntu 18.04服务器上安装Nginx

预备条件

在开始本指南前，你应该为你的服务器配置普通的、拥有sudo权限的非root用户。你可以通过我们的initial server setup guide for Ubuntu 18.04学习如何配置普通用户账户.

当你拥有可用的用户时，请以你的非root用户身份登录以开始。

第一步-安装Nginx

因为Nginx在Ubuntu默认仓库中是可用的，所以可以使用apt从这些仓库中安装它。

因为这是我们在这次会话中与apt的首次交互，我们将更新我们本地的包索引，以至于我们我们能够访问最新的软件包列表。之后我们就可以安装nginx:

1
2

sudo apt update
sudo apt install nginx

在接收该过程之后，apt会将Nginx和任何所需要的依赖安装到你的服务器上。

第二步-调整防火墙

开始测试Nginx之前，防火墙需要做一些调整已允许访问这个服务。Nginx在安装时将自己注册为ufw服务，使它允许被Nginx直接访问。

通过键入如下，ufw会列出应用程序配置：

1

sudo ufw app list

你应该会获得一份应用程序配置文件列表：

1
2
3
4
5
6

# Output
Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH

如你所见，这有三个Nginx的可用配置文件：

• Nginx Full: 此配置文件打开端口80（常规，未加密的web流量）和端口443（TLS/SSL加密流量）
• Nginx HTTP: 这个配置文件只打开端口80（常规，未加密的web流量）
• Nginx HTTPS: 这个配置文件只打开端口443（TLS/SSL加密流量）

建议启用最严格的配置文件，该配置文件仍允许你已经配置的流量。因为在本指南中我们尚未在我们的服务器上配置SSL，所以我们只需允许在80端口上的流量。

你可以键入如下启用：

1

sudo ufw allow 'Nginx HTTP'

你可以像这样验证变化：

1

sudo ufw status

你可以在输出信息中看到HTTP流量已经被允许了：

1
2
3
4
5
6
7
8
9

# Output
Status: active

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere                  
Nginx HTTP                 ALLOW       Anywhere                  
OpenSSH (v6)               ALLOW       Anywhere (v6)             
Nginx HTTP (v6)            ALLOW       Anywhere (v6)

第三步-检测你的Web服务器

在安装过程结束后，Ubuntu 18.04开启了Nginx。这个Web服务器应该已经启动并运行了。

我们可以通过systemd检查以确保服务正在运行：

1

systemctl status nginx

1
2
3
4
5
6
7
8
9
10

#Output
nginx.service - A high performance web server and a reverse proxy server
   Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
   Active: active (running) since Fri 2018-04-20 16:08:19 UTC; 3 days ago
     Docs: man:nginx(8)
 Main PID: 2369 (nginx)
    Tasks: 2 (limit: 1153)
   CGroup: /system.slice/nginx.service
           ├─2369 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
           └─2380 nginx: worker process

如你在上面所见，这个服务好像已经成功启动。但是，最好的验证方式是从Nginx上实际请求一个页面。

通过在浏览器中访问你服务器的IP地址，你可以访问到一个Nginx的默认页面以确定Nginx软件在正确运行。如果你不知道自己服务器的IP地址，你有以下几种不同的方式查看：

尝试在你服务器的终端中键入：

1

ip addr show eth0 | grep inet | awk '{ print $2; }' | sed 's/\/.*$//'

你可以得到几行反馈，你可以在浏览器中依次尝试，观察它们是否可以工作。

另一种方法是键入下面信息，它将向你提供你的公开IP地址，可以在互联网上的其他地方访问的地址。

1

curl -4 icanhazip.com

当你获取了服务器IP地址，在你的浏览器地址栏中访问：

1

http://your_server_ip

你会看到默认的Nginx页面：

这是Nginx附带的页面，用于向你展示服务器在正确运行。

第四步-管理Nginx进程

现在你的web服务器已启动并正在运行，让我们回顾一些基础的管理命令。

停止web服务器：

1

sudo systemctl stop nginx

当服务器停止的时候启动web服务器:

1

sudo systemctl start nginx

重启web服务器：

1

sudo systemctl restart nginx

如果只是简单的进行配置修改，Nginx通常可以重新加载而不会丢失连接：

1

sudo stystemctl reload nginx

Nginx的默认配置是，当服务器启动时Nginx会自动启动，如果这不是你想要的，你可以禁用这一行为：

1

sudo systemctl disable nginx

想要重新启用这一服务时（译注：和上一步相对）：

1

sudo systemctl enable nginx

第五步-设置服务器模块

在使用Nginx web服务器时，可以使用服务器模块封装配置详细信息并在单个服务器上托管多个域。我们将建立一个名为example.com的域名，但是你应该替换成自己的域名。在DigitalOcean了解更多关于配置域名的信息，可以看我们的Introduction to DigitalOcean DNS.

Ubuntu 18.04上的Nginx默认启用了一个服务器模块，该服务器模块配置的服务文件路径为/var/www/html. 这适用于单个站点，如果托管多个站点可能会变得难以处理。我们不必修改 /var/www/html, 而是在 /var/www 中为我们的 example.com 网站创建一个目录结构，并将 /var/www/html 保留为默认目录，如果客户端请求没有匹配任何其他网站。

为 example.com 创建目录，使用 -p 标志，可以创建必要的父目录：

1

sudo mkdir -p /var/www/example.com/html

下一步，使用 $USER 环境变量分配目录的所有者权限：

1

sudo chown -R $USER:$USER /var/www/example.com/html

如果你没有修改你的 umask(译注：说的是掩码吧) 值，你web根目录的权限应该是正确的，你可以这样确保：

1

sudo chmod -R 755 /var/www/example.com

下一步，使用 nano 或者其他你喜欢的编辑器创建一个简单的 index.html 页面:

1

nano /var/www/example.com/html/index.html

添加一些简单的HTML：

1
2
3
4
5
6
7
8

<html>
    <head>
        <title>Welcome to Example.com!</title>
    </head>
    <body>
        <h1>Success!  The example.com server block is working!</h1>
    </body>
</html>

完成之后保存并关闭这个文件。

为了让Nginx能够提供这些内容，创建一个有正确指令的服务器模块是必要的。我们不必修改默认的配置文件，而是在 /etc/nginx/sites-available/example.com 上创建一个新的配置文件：

1

sudo nano /etc/nginx/sites-available/example.com

粘贴以下内容到配置块中，这些信息类似于默认值，但已更新为我们但新目录和域名：

1
2
3
4
5
6
7
8
9
10
11
12
13

server {
        listen 80;
        listen [::]:80;

        root /var/www/example.com/html;
        index index.html index.htm index.nginx-debian.html;

        server_name example.com www.example.com;

        location / {
                try_files $uri $uri/ =404;
        }
}

请注意，我们已经将根目录更新到我们的新目录，并将 server_name 更新为我们的域名。

接下来，让我们创建一个链接到 sites-enabled 目录，该目录是Nginx在启动过程中读取的：

1

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/

现在配置并启用了两个服务器模块，以基于它们的 listen 和 server_name 指令响应请求（你可以在这里了解更多关于Nginx如何处理这些指令）

• example.com: 将响应请求 example.com 和 www.example.com.
• default: 将响应端口80上任何与其他两个块不匹配的请求.

为了避免添加额外的 server names 可能出现的 hash bucket memory 问题，有必要调整 /etc/nginx/nginx.conf文件中的单个值。打开文件:

1

sudo nano /etc/nginx/nginx.conf

找到 server_names_hash_bucket_size 指令，删除 # 符号以取消对该行的注释:

1
2
3
4
5
6
7

...
http {
    ...
    server_names_hash_bucket_size 64;
    ...
}
...

接着，测试以确认在你的Nginx文件中没有语法错误：

1

sudo nginx -t

完成之后保存并关闭文件。

如果没有任何问题，重启Nginx以启用更改：

1

sudo systemctl restart nginx

Nginx现在应该为你的域名提供服务，你可以通过导航至 http://example.com 测试这一点，然后你应该看到类似这样的内容：

第六步-熟悉重要的Nginx文件和目录

既然你已经知道如何管理Nginx本身，你应该花几分钟时间熟悉一些重要的目录和文件。

内容

• /var/www/html: 默认情况下，实际的网页内容仅包含你之前看到的默认Nginx页面，它在 /var/www/html 目录中提供，这可以通过修改Nginx配置文件来改变。

服务器配置

• /etc/nginx: Nginx配置目录。所有Nginx配置文件都在这里。
• /etc/nginx/nginx.conf: Nginx主配置文件。这个可以修改，以更改Nginx全局配置。
• /etc/nginx/sites-availabel/: 存储每个站点服务器块的目录。除非配置文件被链接到 sites-enabled 目录，否则Nginx不会使用此目录中的配置文件。通常，所有服务器块配置都在此目录中完成，然后通过链接到其他目录启用。
• /etc/nginx/sites-enabled/: 启用的每个站点服务器模块目录。通常，它们是 sites-available 目录下文件的链接。
• /etc/nginx/snippets: 该目录包含可以包含在其他任何Nginx配置中的配置片段。可重复的配置片段最好重构成配置片段。

服务器日志

• /var/log/nginx/access.log: 除非Nginx配置为其他方式，否则每个对Web服务器的请求都会记录在这个日志文件中。
• /var/log/nginx/error.log: 任何Nginx错误都会被记录在这个日志中。

总结

现在你安装了你的web服务器，你有不同类型的服务内容供选择，还可以使用你想用的技术创建丰富的体验。

如果你像建立一个更完整的应用程序栈，可以查看这篇文章how to configure a LEMP stack on Ubuntu 16.04.

章节

一、响应式Web设计基础

二、媒体查询

三、弹性布局与响应式图片

四、HTML5与响应式Web设计

• HTML5新语义元素
  • main
    • 指文章中特有的内容，导航链接、版权信息、站点标志、广告和搜索表单等多个文档中重复出现等内容不算主内容
  • section
    • 用于定义文档或应用中一个通用的区块。例如，可以用来包装联系信息、新闻源等。这个元素不是为应用样式而存在的。如果只是为了添加样式而包装内容，还是使用div。
  • nav
    • ul > li 写的导航最好改成 nav > a
  • acticle
    • 用于包含一个独立的内容块。在划分页面结构时，问一问自己，想放在article中的内容如果整体复制到另一个站点中是否照样有意义？明显可以放到article元素中的内容有博客正文和新闻报道。
  • aside
    • 用于包含与其旁边内容不相关的内容。这个元素也适合包装突出引用、广告和导航元素。基本上任何与主内容无直接关系的，都可以放在这里边。
  • figure & figcaption
    • 用于包含注解、图示、照片、代码，等等。如果图片或代码需要一个小标题，那么这个元素非常合适。
  • detail & summary
    • 可以实现一个 展开/收起 部件
  • header
    • 用在站点页头用作“报头”，或者在
      元素中用作某个区块的引介区。
  • footer
    • 在用于在相应区块中包含与区块相关的内容，可以包含指向其他文档的链接，或者版权声明。比如可以用它作为博客的页脚，同时用它包含文章正文的末尾部分。不过，规范里说了，作者的联系信息应该放在
      元素中。
  • address
    • 明显用于标记联系人信息，为最接近的
      或所用。不过有一点不好理解，它并不是为包含邮政地址准备的（除非该地址确实是相关内容的联系地址）。邮政地址以及其他联系人信息应该放在传统的

      标签里。

  • h1 到 h6
    • 规范是不推荐使用h1到h6来标记标题和副标题的。比如这样：h1+h2，根据规范的建议应该写成这样h1+p （+表示兄弟元素）
• HTML5文本级元素
  • b
    • 只为引人注意而标记的文本，不传达更多的重要性信息，也不用于表达其他的愿望或情绪。它是文本级的，不能用来包围其他标记，这时候应该用div。
  • em
    • 表示内容中需要强调的部分
  • i
    • 一段文本用于表示另一种愿望或情绪，或者以突出不同文本形式的方式表达偏离正文的意思

五、CSS3新特性

六、CSS3高级技术

七、SVG与响应式Web设计

八、CSS3过渡、变形和动画

九、表单

十、实现响应式Web设计

资料

CSS长度单位 https://benfrain.com/just-use-pixels/

行内块与空白 https://css-tricks.com/fighting-the-space-between-inline-block-elements/

渐进增强例子 http://www.cssmojo.com/how-to-style-a-carousel/

渐进增强例子 http://www.cssmojo.com/use-radio-buttons-for-single-option/

工具

Autoprefixer https://github.com/postcss/autoprefixer

ico icomoon.io

矩阵变形工具 http://www.useragentman.com/matrix/

正则 https://regexr.com/

浏览器窗口同步 https://browsersync.io/

页面性能可视化 http://www.webpagetest.org/

如果git commit提交信息前没有设置正确的user.name user.email, git commit之后如何修改提交信息中的作者信息？

分两种情况

第一种情况

修改最近一次commit中的作者信息

1.设置正确的作者信息

1
2
3
4

# 设置名称为 zhangxiaoshang
git config --global user.name zhangxiaoshang
# 设置邮箱为 zhangxiaoshang66@163.com
git config --global user.email zhangxiaoshang66@163.com

2.修改commit中的作者信息

1

git commit --amend --reset-author

然后会弹出编辑窗口, 直接输入 :wq 退出即可

第二种情况

如果你是想修改最后一次之前的commit中的作者信息

比如，如果你的提交历史是 hashA-hashB-hashC-hashD-hashE-hashF,其中 hashF是最后一次提交,如果你想修改的hashC提交中的作者信息,你需要：

1.执行 git rebase -i hashB(这里有一个示例：执行这条命令后你将看到类似这样的信息)

• 如果你需要修改的是hashA 使用 git rebase -i --root

2.将 hashC 这一行的 pick 改为 edit

3.执行 git commit --amend --author="zhangxiaoshang <zhangxiaoshang66@163.com>" (这里将作者用户名改为了：zhangxiaoshang 邮箱改为：zhangxiaoshang66@163.com)

4.然后 git rebase --continue

以上

第二种情况的解决方案参考 Stack Overflow(可能需要科学上网)

1. 在线DEMO

http://va-carousel.xiaoshang.online

Github

2. 首先是一张思维导图

3. 然后是以上属性的标注说明

4. 代码层

4.1 除去可从父组件接收的属性，组件自身有以下属性：

1
2
3
4
5
6
7
8
9

data() {
    return {
      list: [],     // 当前显示的图片列表
      hover: false, // 鼠标是否悬浮在组件上
      timer: null,  // 自动切换的 setInterval
      itemWidth: '',// 每项元素的宽度
      isReverse: false // 是否是反向切换，触发prev时，该属性为true
    }
  }

4.2 组件挂载之前

1. 计算每项元素的宽度，即itemWidth的值
2. 初始化显示的图片列表，即list。这里存储的数据才是真正会被在页面上渲染的。每次切换，实际上就是修改该list中的数据，对应的视图会自动更新，数据驱动视图嘛。

1
2
3
4

beforeMount() {
    this.itemWidth = 100 / this.total + '%'
    this.list = this.items.slice(0, this.total)
  },

4.3 组件挂在后，检查autoplay属性，若该属性为true，则产生一个计时器

1
2
3
4
5

mounted() {
    if (this.autoplay) {
      this.startTimer()
    }
  },

4.4 startTimer函数很简单,就是间隔一定时间触发一次next(向后)切换

1
2
3
4
5
6
7

// 开始计时器
startTimer() {
    if (!this.interval || this.interval <= 0) {
        return
    }
    this.timer = setInterval(this.next, this.interval)
}

4.5 next函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// 下一张
next() {
  // 如果图片列表小于需要显示的数量，则不进行滚动
  if (this.items.length < this.total) {
    return
  }

  // 向后追加一个元素，该元素为：
  // 显示列表中最后一个元素在原数组中的后一个元素
  // 如果已经是最后一个元素，则使用第一个元素

  let indexOfItems = this.items.findIndex(
    item => item.id === this.list[this.list.length - 1].id
  )

  if (indexOfItems === this.items.length - 1) {
    // 使用第一个元素
    this.list.push(this.items[0])
  } else {
    // 使用后一个元素
    this.list.push(this.items[indexOfItems + 1])
  }
  // 移除当前显示图片中的第一个
  this.list.shift()
  this.isReverse = false
},

4.6 对应的还有一个prev函数，与next函数逻辑相反，这里就不展示代码了

4.7 点击图片时，向父组件释放事件selectedItem，传递两个参数 item 和 index 分别为当前点击的对象，和该对象在list中的位置

1
2
3
4

// 点击图片
selectedItem(item, index) {
  this.$emit('selectedItem', item, index)
},

4.8 鼠标悬浮在组件上时，停止自动切换（若autoplay为ture）, 鼠标离开时，继续切换

1
2
3
4
5
6
7
8
9
10
11

handleMouseEnter() {
  this.hover = true
  this.pauseTimer()
},

handleMouseLeave() {
  this.hover = false
  if (this.autoplay) {
    this.startTimer()
  }
},

4.9 然后是过渡效果的实现

因为arrow元素也在transition-group中，所以当arrow=‘hover’时，arrow的显示、隐藏也会触发钩子函数，但是我们的钩子函数是针对image-item写的，所以需要在函数中检测是哪个元素触发的，这里通过检查className进行判断。
然后针对向前、向后两种情况设置不同的样式

1
2
3
4
5
6
7
8
9
10
11
12

beforeEnter(el) {
     // 只对image-item使用过渡
     let isImageItem = el.className.indexOf('image-item') > -1
     if (isImageItem) {
       el.style.opacity = 0
       if (this.isReverse) {
         el.style.transform = 'translateX(-100%)'
       } else {
         el.style.transform = 'translateX(100%)'
       }
     }
   }

4.10 这里使用了Velocity，这是一个实现动画效果的js库，之所以使用这个库是因为试了n种方案都没能实现预期效果emm

1
2
3
4
5
6
7
8
9

enter(el, done) {
      // 只对image-item使用过渡
      let isImageItem = el.className.indexOf('image-item') > -1
      if (isImageItem) {
        Velocity(el, { opacity: 1, translateX: '0px' }, { complate: done })
      } else {
        done()
      }
    }

4.11 然后是对应的beforeLeave、leave函数，这里就不展示了

以上基本就是所有js部分，整体感受就是，一旦实现逻辑搞清楚，代码实现起来还是挺容易的，然后就是框架的熟悉程度。

5. npm包发布

这本是工作业务中的一个功能需求，因为没能在网上找到现成的轮子，找个差不多效果的领导不满意，所以只能自己写了，做都做了不发出来感觉白写了. . .

npm发布流程简单概括就是

1.注册
去npm官网注册个账号

2.生成npm包
文件夹中有package.json文件就是一个npm包

3.在终端使用npm publish发布包，成功之后，该项目文件夹下所有文件都会上传至npm官网，当用户使用npm install安装后，就会将整个文件夹下载至node_modules文件夹中，对于这个项目，本是一个使用vue-cli生成的vue项目，组件路径src/components/VaCarousel.vue，所以使用npm install va-carousel安装之后，只需要在项目中像这样导入即可使用(前提是你的项目也是使用vue-cli生成的，对于其他方式搭建的项目可能会出现一些错误)：import VaCarousel from 'va-carousel/src/components/VaCarousel.vue'

以上

1、如何创建一个vuex实例？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store =  new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

export { store as default }

这样就创建了一个简单的Vuex实例store，这个实例有两个属性：state 和 mutations
state: 用于存储各种状态，类似Vue组件中的data
mutations: 存储方法，用于修改state中的各种状态(变量)，类似于Vue组件中的methods

2、如何在Vue组件中使用state 和 mutations ?

首先声明一个组件Counter.vue组件

1
2
3
4
5
6

<template>
  <div>
    <div>counted {{ count }}</div>
    <button @click="increment">+</button>
  </div>
</template>

这个组件模版依赖一个count变量，和一个 increment 函数。
对于count的值，会使用前面声明的Vuex实例的state属性中的count的值。
对于increment 函数，会使用前面声明的Vuex实例的mutations属性中的increment函数。

Tip: 记得在main.js中导入上面声明的store, 并从根组件“注入”到每一个子组件中

1 2 3 4 5 6 7 8

import store from '@/store' new Vue({ el: '#app', store, // 注入store,这样在所有组件都可以使用this.$store获取实例 components: { App }, template: '<App/>' })

Counter.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14

export default {
  computed: {
    count() {
      // 想要在组件中使用Vuex实例中的state，只需在computed属性中返回所需的状态即可
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      // 想要在组件中使用Vuex实例中的mutations，只需调用this.$store.commit()，参数是字符串，对应想要使用的mutations
      this.$store.commit('increment')
    }
  }
}

3、mapState 辅助函数是什么、有什么用、如何用？

1. mapState 是一个辅助函数
2. 帮我们生成计算属性
3. 用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

computed: mapState({
    // 箭头函数可使代码更简练
    // 第1种用法，传入state作为参数，返回了state.count,这样就获取了store中的count
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    // 第2种用法，与第1种用法只是写法不同，现在可以在模版种使用变量countAlias, 值与count相同
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    // 第3种用法，使用常规函数，这样就可以使用this获取组件的局部状态
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })

分为两种情况

1. 只删除commit信息，不删除内容 git reset HEAD~1
2. 删除commit信息包括内容 git reset --hard HEAD~1

HEAD~1是要回退到的点，需要回退到想要删除到commit点的上一个点，回退后继续 git add && git commit等常规操作即可

如果还需要更新远程库，直接git push时会失败，提示说我们本地版本落后远程库的版本，这时可以使用参数--force，即git push --force

需要注意的是，--force是个危险参数，使用后会用当前的版本替换远程版本，除非你确定需要这么做，否则不要轻易使用该参数

Mac OS 中npm全局安装的包的存储路径是 /usr/local/lib/node_modules/
后来发现也可能是在这里 /Users/[username]/.nvm/versions/node/[vx.x.x]/lib/node_modules(方括号里是变量，根据自己的情况修改: username: 系统用户名；vx.x.x: node版本号)

授之鱼 授之以渔

比如我全局安装了一个vue-cli的包，这个包提供一个vue命令，那么就这样查看vue命令所在的位置：

1
2

where vue
# /usr/local/bin/vue

现在知道了vue所在的位置是/usr/local/bin/vue,进入到该路径父目录：

1
2
3
4

cd /usr/local/bin
# 查看当前目录下vue文件信息
ll | grep vue
# lrwxr-xr-x  1 zhgs  admin    35B  9 21 09:26 vue -> ../lib/node_modules/vue-cli/bin/vue

可以看到vue的所在位置，这里看到了熟悉的node_modules，很明显，npm全局安装的包都存在了目录/usr/local/lib/node_modules/下

• 系统环境 Mac OS
• Redis 3.0.3

使用命令redis-server启动Redis , 退出时出现错误，导致无法结束程序

1
2
3
4
5

4901:signal-handler (1515149226) Received SIGINT scheduling shutdown...
4901:M 05 Jan 18:47:06.515 # User requested shutdown...
4901:M 05 Jan 18:47:06.515 * Saving the final RDB snapshot before exiting.
4901:M 05 Jan 18:47:06.516 # Failed opening .rdb for saving: Permission denied
4901:M 05 Jan 18:47:06.516 # Error trying to save the DB, can't exit.

原因：退出程序时，Redis要将内存中的数据保存到磁盘中，却没有权限操作相关文件，这个文件是redis.conf配置文件中， dir 字段后面对应的文件夹名，和 dbfilename字段后面对应的文件名，redis.conf文件通常在redis安装目录

解决方案，使用chmod修改文件夹权限，使当前用户有写入权限即可

参考 stackoverflow

输出信息为当前测试环境信息,命令只保证在当前系统环境有效

1. 查看系统内核信息

1
2

uname -a
# Linux ip-172-31-22-34 4.4.0-1044-aws #53-Ubuntu SMP Mon Dec 11 13:49:57 UTC 2017 x86_64 x86_64 x86_64 GNU/Linux

2. 查看系统版本信息

1
2

cat /proc/version
# Linux version 4.4.0-1044-aws (buildd@lgw01-amd64-013) (gcc version 5.4.0 20160609 (Ubuntu 5.4.0-6ubuntu1~16.04.5) ) #53-Ubuntu SMP Mon Dec 11 13:49:57 UTC 2017

3. 查看发行版信息

1
2
3
4
5
6
7
8

cat /etc/issue
# Ubuntu 16.04.3 LTS \n \l
lsb_release -a
# No LSB modules are available.
# Distributor ID: Ubuntu
# Description:    Ubuntu 16.04.3 LTS
# Release:    16.04
# Codename:   xenial

4. 查看CPU相关信息，包括型号、主频、内核信息等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

cat /proc/cpuinfo

# processor   : 0
# vendor_id   : GenuineIntel
# cpu family  : 6
# model       : 63
# model name  : Intel(R) Xeon(R) CPU E5-2676 v3 @ 2.40GHz
# stepping    : 2
# microcode   : 0x3b
# cpu MHz     : 2400.060
# cache size  : 30720 KB
# physical id : 0
# siblings    : 1
# core id     : 0
# cpu cores   : 1
# apicid      : 0
# initial apicid  : 0
# fpu     : yes
# fpu_exception   : yes
# cpuid level : 13
# wp      : yes
# flags       : fpu vme de pse tsc msr pae mce cx8 apic sep mtrr pge mca cmov pat pse36 clflush mmx fxsr sse sse2 ht syscall nx rdtscp lm constant_tsc rep_good nopl xtopology eagerfpu pni pclmulqdq ssse3 fma cx16 pcid sse4_1 sse4_2 x2apic movbe popcnt tsc_deadline_timer aes xsave avx f16c rdrand # hypervisor lahf_lm abm fsgsbase bmi1 avx2 smep bmi2 erms invpcid xsaveopt
# bugs        :
# bogomips    : 4800.12
# clflush size    : 64
# cache_alignment : 64
# address sizes   : 46 bits physical, 48 bits virtual
# power management:

5. 查看当前CPU运行模式 32/64位

1
2

getconf LONG_BIT
# 64