Write the Code. Change the World.

分类目录
5月 07

npm 简单介绍

npm 中文文档

npm 英文官网

npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,包含超过 600000 个 包(package) (即,代码模块)。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。

npm 由三个独立的部分组成:

  • 网站
  • 注册表(registry)
  • 命令行工具 (CLI)

网站 是开发者查找包(package)、设置参数以及管理 npm 使用体验的主要途径。

注册表 是一个巨大的数据库,保存了每个包(package)的信息。

CLI 通过命令行或终端运行。开发者通过 CLI 与 npm 打交道。

npm 下载安装

https://nodejs.org/en/download/

下载对应的系统对应的版本安装即可。

配置淘宝镜像

# 配置为淘宝镜像(旧的)
npm config set registry https://registry.npm.taobao.org

# 配置为淘宝镜像(新的)
npm config set registry  https://registry.npmmirror.com
# 查看镜像
npm config get registry

# 切回默认镜像
npm config set registry https://registry.npmjs.org

更新升级 node, 方式一

# 查看当前 node 版本 
node -v

# 查看 node 的版本
npm view node versions

# 安装 n
sudo npm install -g n

# 通过 n 来更新 node 到最新版本
sudo n latest

# 通过 n 来更新 node 到稳定版本
sudo n stable

# 通过 n 来更新 node 到具体版本
sudo n 15.0.0

更新升级 node, 方式二

# 最新版本
npm install npm@latest -g

# 下一个版本
npm install npm@next -g

yarn 简单介绍

yarn1 中文文档

yarn2 中文文档

Yarn 对你的代码来说是一个软件包管理器, 你可以通过它使用全世界开发者的代码,或者分享自己的代码给全世界的开发者。Yarn 做这些事情快捷、安全、可靠,所以你不用担心什么。

通过 Yarn 你可以使用其他开发者针对不同问题的解决方案,简化你开发软件的过程。 如果使用过程中遇到问题,你可以将其上报或者贡献解决方案。一旦问题被修复, 你可以使用 Yarn 更新。

代码通过 软件包(package) 的方式被共享。一个软件包里包含了所有需要共享的代码,以及一个描述软件包信息的文件 package.json (叫做 清单)。

安装 yarn

npm install -g yarn

yarn -v

# 更新 yarn 到最新版本
yarn set version latest

yarn 用法

yarn 镜像

# 查看
yarn config get registry

# 设置为淘宝镜像
yarn config set registry https://registry.npmmirror.com

# 设置为默认官方镜像
yarn config set registry https://registry.yarnpkg.com

pnpm 简单介绍

pnpm 中文文档

知乎

安装

# 安装
sudo npm install pnpm -g

# 查看镜像
pnpm config get registry

# 设置为淘宝镜像
pnpm config set registry https://registry.npmmirror.com/

# 更新升级
pnpm add -g pnpm

# 获取 pnpm安装位置
which pnpm

# 查找更多 pnpm
mdfind -n pnpm

使用

pnpm install 包  // 
pnpm i 包
pnpm add 包    // -S  默认写入dependencies
pnpm add -D    // -D devDependencies
pnpm add -g    // 全局安装

移除

pnpm remove 包                            //移除包
pnpm remove 包 --global                   //移除全局包

更新

pnpm up                //更新所有依赖项
pnpm upgrade 包        //更新包
pnpm upgrade 包 --global   //更新全局包

设置存储路径

pnpm config set store-dir /path/to/.pnpm-store
3月 25

在使用 <style scoped>,我们可以保护其他元素不受该样式的影响。如果我们附加动态元素,我们应该使用 parent-class /deep/ current-class。 但是我如何通过SCSS使用它呢:

<style scoped lang="scss">

::v-deep .frame {
}

</style>
3月 14

 # 新增一个 index 参数(方便浏览器刷新)
 const value = 3

 this.$router.push({
     path: this.$route.path,
     query: { ...this.$route.query, index: value }
 })
1月 24

准备

安装 node.js

https://nodejs.org/en/

下载 LTS 的即可。配置环境变量

常用命令:

node -v

npm -v

# 设置镜像
sudo npm install -g cnpm --registry="https://registry.npm.taobao.org"

# 安装 yarn
sudo npm install -g yarn

# 设置镜像
yarn config set registry https://registry.npm.taobao.org --global

# 安装 vue cli
yarn global add @vue/cli

vue cli

安装初始化 vue 项目

# 会让你选择 vue 的版本
vue create test

基本配置

创建的 vue 项目的时候,目录里是没有 vue.config.js 文件的,我们需要手动加入。

在根目录下创建以下三个文件。

– src/settings.js
– .env.development
– .env.production
– vue.config.js

然后,填充内容。请参考:https://blog.vini123.com/525

安装 vue-router 以及 vuex

yarn add vue-router
yarn add vuex
yarn add axios
yarn add js-cookie

https://blog.csdn.net/weixin_43974265/article/details/114181405

12月 02

web 页面自适应处理。 其实,要说的是移动端网页自适应。只要设计图宽度标准化(有固定宽度,一般是 750px 宽度为标准),就方便实现整个页面的自适应。
继续阅读

8月 28

如上图,在调试的时候,你会看到 user agent stylesheet 定义的样式,而且是不能改的。

user agent stylesheet是浏览器自动加上的格式,user agent stylesheet将被你在自己的css中设置的任何内容覆盖。它们只是最底层:在没有页面或用户提供的任何css的情况下,浏览器仍然必须以某种方式呈现内容,而css只是描述了这一点。

因此,如果你认为css存在问题,那么你的HTML或css或两者(您没有写任何内容)确实存在问题。

解决方法

  • 方法一

由于 user agent stylesheet 的优先级很低,自己写样式覆盖即可。在你的css中添加被user agent stylesheet所覆盖了的样式,例如,我这可以重新定义div的样式:

div{
    display: inline-block;
}

继续阅读