5 模式和环境变量 – Vue CLI

1 三种模式

  • development 模式用于 vue-cli-service serve
  • test 模式用于 vue-cli-service test:unit
  • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

当运行 vue-cli-service 命令时,所有的环境变量都从对应的环境文件中载入。如果文件内部不包含 NODE_ENV 变量,它的值将取决于模式,例如,在 production 模式下被设置为 “production”,在 test 模式下被设置为 “test”,默认则是 “development”。

如果你想要在构建命令中使用开发环境变量,需要使用–mode参数,例如:

vue-cli-service build --mode development

2 环境变量

在项目根目录中新建下列文件来指定环境变量文件

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

环境文件的内容格式只允许包含环境变量的“键=值”对,例如:

// .env.dev
VUE_APP_ENV=dev
NODE_ENV=development
# 默认base地址
VUE_APP_API_BASE=https://api-xxx.com

3 在客户端侧代码中使用环境变量

在环境文件中,以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在项目的代码中这样访问它们:

console.log(process.env.VUE_APP_SECRET)

除了 VUE_APP_* 变量之外,在你的应用代码中始终可用的还有两个特殊的变量:

NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符,即你的应用会部署到的基础路径。

所有解析出来的环境变量都可以在 public/index.html 中以 HTML 插值中介绍的方式使用。

在 vue.config.js 文件中计算环境变量。它们仍然需要以 VUE_APP_ 前缀开头。这可以用于版本信息:

// vue.config.js
process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {
  // config
}

4 只在本地有效的变量

.local结尾的本地环境文件默认会被忽略,且出现在 .gitignore 中。比如 .env.development.local 将会在 development 模式下被载入,且被 git 忽略。

4. webpack 相关 – Vue CLI

1 简单的配置方式

在 vue.config.js 中的 configureWebpack 选项提供一个对象,该对象将会被 webpack-merge 合并入最终的 webpack 配置。

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

2 链式操作 (高级)

审查项目的 webpack 配置可以通过命令保存到output.js内查看

vue inspect > output.js

3 修改 Loader 选项

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  }
}

4 添加一个新的 Loader

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
      // 你还可以再添加一个 loader
      .use('other-loader')
        .loader('other-loader')
        .end()
  }
}

5 修改插件选项

比方说你想要将 index.html 默认的路径从 /Users/username/proj/public/index.html 改为 /Users/username/proj/app/templates/index.html。

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        return [/* 传递给 html-webpack-plugin's 构造函数的新参数 */]
      })
  }
}

3. css相关 – Vue CLI

1 引用静态资源

所有编译后的 CSS 都会通过 css-loader 来解析其中的 url()来进行引用,如果你想要引用一个 npm 依赖中的文件,或是想要用 webpack alias,则需要在路径前加上 ~

2 预处理器

如果创建项目时没有选择预处理器 (Sass/Less/Stylus),可以手动安装相应的 webpack loader,例如:

npm install -D sass-loader sass

3 自动化导入

通常一个项目中我们会有一些公共的css文件来定义颜色,mixin等等,例如variable.sass里面定义了一些字号、颜色等等。每次我们在页面中要使用这些公共的变量时都需要先把variable.sassimport进来,有点麻烦。你可以使用 style-resources-loader来完成自动导入,来避免手动操作。配置方法如下:

// vue.config.js
const path = require('path')

module.exports = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))
  },
}

function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/styles/variable.sass'),
      ],
    })
}

4 PostCSS

通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。项目默认开启了 autoprefixer。如果要配置目标浏览器,可使用 package.json 的 browserslist 字段。

M1芯片Mac nginx使用

默认端口

8080

默认的配置文件地址

/opt/homebrew/etc/nginx/nginx.conf

默认的WEB根目录

/opt/homebrew/var/www

如果要指定你启动的NGINX.CONF文件

nginx -c /路径

停止NGINX

nginx -s stop

重启NGINX

nginx -s reload

M1新片Mac安装 HomeBrew

由于github国内访问非常的不稳定,现在使用HomeBrew官方的安装脚本很难顺利安装完成了,比较好的方式就是使用镜像安装,网上查了一圈,发现已经有人做好了现成的脚本,2021年7月7日亲测可用,具体步骤如下:

1. 执行安装脚本

/bin/zsh -c "$(curl -fsSL https://gitee.com/huwei1024/HomebrewCN/raw/master/Homebrew.sh)"

参考结果

        开始执行Brew自动安装程序
             [cunkai.wang@foxmail.com]
           [2021-07-07 13:48:08][11.2]
       https://zhuanlan.zhihu.com/p/111014448


请选择一个下载镜像,例如中科大,输入1回车。
源有时候不稳定,如果git克隆报错重新运行脚本选择源。cask非必须,有部分人需要。
1、中科大下载源 2、清华大学下载源 3、北京外国语大学下载源 4、腾讯下载源(不显示下载进度) 5、阿里巴巴下载源(缺少cask源)
请输入序号: 1

  你选择了中国科学技术大学下载源

!!!此脚本将要删除之前的brew(包括它下载的软件),请自行备份。
->是否现在开始执行脚本(N/Y)y

--> 脚本开始执行
==> 通过命令删除之前的brew、创建一个新的Homebrew文件夹
(设置开机密码:在左上角苹果图标->系统偏好设置->"用户与群组"->更改密码)
(如果提示This incident will be reported. 在"用户与群组"中查看是否管理员)
请输入开机密码,输入过程不显示,输入完后回车
Password:
开始执行
-> 创建文件夹 /opt/homebrew/Homebrew
此步骤成功
   ---备份要删除的文件夹到系统桌面....
   ---/Users/liuxiaofan/Library/Caches/Homebrew/ 备份完成
   ---备份要删除的文件夹到系统桌面....
   ---/opt/homebrew/Caskroom 备份完成
-> 创建文件夹 /opt/homebrew/Caskroom
此步骤成功
   ---备份要删除的文件夹到系统桌面....
   ---/opt/homebrew/Cellar 备份完成
-> 创建文件夹 /opt/homebrew/Cellar
此步骤成功
   ---备份要删除的文件夹到系统桌面....
   ---/opt/homebrew/var/homebrew 备份完成
-> 创建文件夹 /opt/homebrew/var/homebrew
此步骤成功
-> 创建文件夹 /opt/homebrew/var/homebrew/linked
此步骤成功
git version 2.30.1 (Apple Git-130)

下载速度觉得慢可以ctrl+c或control+c重新运行脚本选择下载源
==> 克隆Homebrew基本文件(32M+)

未发现Git代理(属于正常状态)
Cloning into '/opt/homebrew/Homebrew'...
remote: Enumerating objects: 194316, done.
remote: Total 194316 (delta 0), reused 0 (delta 0)
Receiving objects: 100% (194316/194316), 49.91 MiB | 4.71 MiB/s, done.
Resolving deltas: 100% (145009/145009), done.
此步骤成功
==> 创建brew的替身
此步骤成功
==> 克隆Homebrew Core(224M+) 
此处如果显示Password表示需要再次输入开机密码,输入完后回车
Cloning into '/opt/homebrew/Homebrew/Library/Taps/homebrew/homebrew-core'...
remote: Enumerating objects: 989892, done.
remote: Total 989892 (delta 0), reused 0 (delta 0)
Receiving objects: 100% (989892/989892), 396.10 MiB | 2.89 MiB/s, done.
Resolving deltas: 100% (682362/682362), done.
此步骤成功
==> 克隆Homebrew Cask(248M+) 类似AppStore 
此处如果显示Password表示需要再次输入开机密码,输入完后回车
Cloning into '/opt/homebrew/Homebrew/Library/Taps/homebrew/homebrew-cask'...
remote: Enumerating objects: 632124, done.
remote: Total 632124 (delta 0), reused 0 (delta 0)B | 1.82 MiB/s   
Receiving objects: 100% (632124/632124), 265.04 MiB | 981.00 KiB/s, done.
Resolving deltas: 100% (451506/451506), done.
此步骤成功
==> 配置国内镜像源HOMEBREW BOTTLE
此步骤成功

==> 安装完成,brew版本

11.2
brew -v

zsh:363: command not found: brew

    失败 查看下面文章第二部分的常见错误
    https://zhuanlan.zhihu.com/p/111014448
    如果没有解决,把运行脚本过程截图发到 cunkai.wang@foxmail.com --end

2. 因为M1芯片的包安装位置不在是以前的/usr/local/而是/opt/homebrew,所以要将配置文件里的环境变量改过来

1、首先进入根目录
$ cd ~
2、创建.zshrc文件
$ touch .zshrc
3、打开文件进行编辑
$ open -e .zshrc
4、如果有旧的环境就修改,没有就新增
export PATH=/opt/homebrew/bin:$PATH export PATH=/opt/homebrew/sbin:$PATH
参考结果 .zshrc文件内容
# HomeBrew export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.ustc.edu.cn/homebrew-bottles # export PATH=”/usr/local/bin:$PATH” # export PATH=”/usr/local/sbin:$PATH” export PATH=/opt/homebrew/bin:$PATH export PATH=/opt/homebrew/sbin:$PATH # HomeBrew END
5、保存
使用command + s保存文件,然后关闭
6、生效环境变量
$ source .zshrc
7、测试
$ brew -v
参考结果
liuxiaofan@Richards-M1 ~ % brew -v Homebrew 3.2.1-26-g3cbf7b7-dirty Homebrew/homebrew-core (git revision 2107f7374a; last commit 2021-07-07) Homebrew/homebrew-cask (git revision 835d572f82; last commit 2021-07-07)

将文本中的url转化为超链接,包含端口

今天接到一个需求,要求在聊天窗口中,用户输入的文本内容,如果里面有超链接地址,就自动转换为a标签,让用户可以点击。

这个需求N年前做的sass项目就实现过,不过这次要求要把端口号也解析出来,例如http://localhost:3010/这样,趁机复习一下正则。

废话不多说,直接上代码

// 将文本中的url转化为超链接,包含端口
export const handleTextUrl = text => {
  let result = text || ''
  let reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-|:)+)/g
  if (result) {
    result = text.replace(reg, '<a href="$1$2" target="_blank">$1$2</a>')
  }
  return result
}
// handleTextUrl('测试一个地址:http://wiki.kaikeba.cn/pages/viewpage.action?pageId=24184041')
// handleTextUrl('http://localhost:3010/')

 

2. HTML 和静态资源 – Vue CLI

浏览器兼容性

package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

Polyfill

翻译为一块代码或插件,可以让旧浏览器兼容新语法,默认情况会根据browserslist 配置来决定项目需要的 polyfill

现代模式

为了兼容老浏览器,经过babel编译后的代码十分臃肿,而最新版本的浏览器已经支持了es6,所以你需要一个现代版的包,用下面的命令
vue-cli-service build --modern

 

HTML

public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中,资源链接会被自动注入。所有客户端环境变量也可以直接使用。例如,BASE_URL 的用法:
<link rel="icon" href="<%= BASE_URL %>favicon.ico">

 

Preload

预先加载,<link rel=”preload”> 是一种 resource hint,可以指定一些资源在页面渲染完成之前提前加载,这些提示会被 @vue/preload-webpack-plugin 注入

Prefetch

也是一种 resource hint,页面加载完成后,利用空闲时间提前获取用户未来可能会访问的内容。
可以通过 chainWebpack 的 config.plugin(‘prefetch’) 进行修改和删除。

多页应用

Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面的应用。例如:
pages: {
    admin: {
      entry: 'src/client.js',
      template: 'public/client.html',
      filename: 'client.html'
    },
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },

 

处理静态资源

放置在 public 目录下或通过绝对路径被引用的文件,将会直接被拷贝,而不会经过 webpack 的处理。

模块加载限制

所有 <img src=”…”>、background: url(…) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。
所以,url(./image.png) 会被翻译为 require(‘./image.png’),假设一个页面有100张图片,文件大小不一,为了减少请求数,我们可以设置一个值来决定小于这个值的文件都会放到一起请求。代码如下:
// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
        .use('url-loader')
          .loader('url-loader')
          .tap(options => Object.assign(options, { limit: 10240 }))
  }
}

 

url转换规则

如果 URL 以 ~ 开头,其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源

public 文件夹

任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过 webpack。你需要通过绝对路径BASE_URL来引用它们。
在模板中使用base_url
<img :src="`${publicPath}my-image.png`">
...
data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

 

1. 基础 – Vue CLI

安装

npm install -g @vue/cli

 

升级

npm update -g @vue/cli

 

安装快速原型开发

npm install -g @vue/cli-service-global

 

使用快速原型开发

vue serve vue build

 

创建一个项目

vue create test

 

在现有的项目安装插件

vue add eslint

 

Preset

如果是手动创建的项目,可以使用Preset保存设置,便于下次创建同样配置的项目
在 vue create 过程中保存的 preset 会被放在你的 home 目录下的一个配置文件中 (~/.vuerc)

vue-cli-service

在一个 Vue CLI 项目中,@vue/cli-service 安装了一个名为 vue-cli-service 的命令,可以使用npx来运行
npx vue-cli-service serve npx vue-cli-service build npx vue-cli-service inspect

 

Git Hook

@vue/cli-service 也会安装 yorkie,它会让你在 package.json 的 gitHooks 字段中方便地指定 Git hook:
{ 
    "gitHooks": { 
        "pre-commit": "lint-staged"
         },
...

 

github镜像地址

github经常不能访问,解决这个问题用修改host和挂代理都比较麻烦,如果只是查看的话,直接用镜像访问吧

https://github.com.cnpmjs.org/

https://hub.fastgit.org/

https://github.wuyanzheshui.workers.dev/

最优解,可能稍微要麻烦一下啊

1 安装SwitchHosts,可以更方便的切换 hosts
下载地址:https://github.com/oldj/SwitchHosts/releases

2 获取hosts列表
打开 SwitchHosts,然后添加 hosts 规则:
方案名(Title)随便写
类型(Type)选择远程
URL 地址栏输入https://cdn.jsdelivr.net/gh/521xueweihan/GitHub520@main/hosts
自动更新建议选择 1 小时一更新

3 修改本地hosts文件
sudo vim /etc/hosts

第1章 正面的方法 – 正面管教

1. 七项重要的感知力和技能

  1. 我能行
  2. 大家需要我
  3. 我能够影响我身上的事情
  4. 自律
  5. 善于与他人合作
  6. 整体把控力
  7. 判断力

2. 正面管教三要素

  1. 有规矩也有自由
  2. 有限制的选择
  3. 在尊重别人的前提下,你可以选择

3. 管教的三种类型

  1. 严厉型——我说吃什么就吃什么,浪费半个小时说服孩子吃不喜欢的食物,最好还是被激怒
  2. 骄纵型——你想吃什么,孩子往往选择薯片等垃圾食品
  3. 正面管教型——我们一起制订双赢的规则,共同决定问题的解决方案。如果必须独自做出决断时,我也会坚定而和善,维护你的尊严。

4. 正面管教案例

妈妈让孩子选择吃什么早餐,孩子选了饼干之后,咬了一口说不喜欢吃的时候,妈妈说:“好吧,我们没有办法吧饼干变脆,你出去玩吧,午饭再吃”。
面对孩子发脾气可以使用“冷静期”的方法,没有了观众,表演发脾气也没什么好玩的了。

5. 惩罚和骄纵

惩罚造成的4个R
  1. 愤恨 resentment
  2. 报复 revenge
  3. 反叛 rebellion
  4. 退缩 retreact
经常受惩罚的孩子未来的潜意识里面会形成
  1. 我是个坏孩子:继续扮演坏孩子角色
  2. 讨好者:总是寻求别人的认可,认为自己不配得到爱
骄纵大的孩子总觉得这个世界欠他们的,他们被训练的要用自己的全部精力去操纵大人满足他们的一切欲望。
有些父母或者老师并不喜欢过度控制或者骄纵,但是又不知道还有什么其他办法,他们就会在这两种无效的管教方式之间来回摇摆。他们会在过度控制之后自己都无法忍受自己的专横行为,然后转而骄纵孩子,直到无法忍受孩子被宠的索要无度。
很多人把管教和惩罚划等号,然后管教一词来自拉丁文discipulus或disciplini,意思是真理和原则的追随者或受尊敬的领导人。学生要成为真理和原则的追随者,必须学会自律,而不论惩罚或者奖赏都是来自于外在的控制。

6. 不能严厉也不能骄纵,那该怎么办?

正面管教的不同之处在于,无论是孩子还是大人都不造成羞辱
无论是奖赏还是惩罚,这种外力的方式培养的孩子会非常依赖大人,没办法学会为自己的行为负责。
核心概念之一 —— 孩子们更愿意遵从他们自己参与制定的规则。
有效管教的4个原则:
  1. 是否和善而坚定
  2. 是否有助于孩子感受到归属感和价值感
  3. 是否长期有效
  4. 是否教给孩子有价值的社会技能和人生技能,培养良好的品格

7. 和善与坚定并行

和善即尊重孩子,坚定即尊重自己。严厉缺少和善,骄纵缺少坚定。
和善不是取悦孩子,用语言表达对孩子感受的理解才是尊重:“我看得出来你很失望、生气、心烦,但是我相信你能够经受得住挫折”
与孩子发生冲突时,不要态度强硬,马上走开,等双方都冷静下来之后再谈。
不要直接限定孩子,比如电视只能看1小时,要让孩子参与制定规则,如果孩子没有遵守他自己制定的规则也不要马上惩罚,要问孩子如何解决这个问题,让孩子自己想出来避免下次再犯的解决方案。
如果孩子经常以叛逆的方式回应,以下是一些“和善而坚定”的常用语
  1. 等一下就轮到你了
  2. 我知道你能换一种尊重人的说法
  3. 我很在乎你,我会等到我们能互相尊重的时候再继续谈
  4. 我知道你能想出来一个好办法
  5. 要做,不要说。例如平静的握住孩子的手,向孩子演示怎么做
  6. 我们待会再说这件事,现在该上车了
  7. 当孩子在商店发脾气时,“我们现在要离开,待一会再来”

8. 当两个家长分歧过大时

例如妈妈主张和善,爸爸主张坚定,其实这两种极端都不好,所以要经常开家庭会议,共同解决问题。

9. 帮助孩子体验到归属感和自我价值(心灵纽带)

那些杀害同学和老师的学生,没有一个感受到了归属感和价值感。帮助孩子找到归属感和自我价值感是贯穿这本书的主题。

10. 我们到底要教给孩子那些品格

惩罚教给孩子更多的是暴力、偷偷摸摸、不自尊自爱等负面技能。我们希望帮助孩子培养哪些品格?
好学、责任感、礼貌、自律、诚实、合作、自我控制、开放的思维、耐心、善于客观地思考、幽默感、尊重自己和他人、关心他人、同情心、解决问题的能力、接纳自己和他人、智慧、热爱生活、正直