5月
08
升级 node，vue-cli 到最新版本
node -v
# 更新 node 到最新版本
sudo n stable
# 更新 pnpm
pnpm add -g pnpm
# 更新 yarn
yarn set version latest
# pnpm 安装 @vue/cli
pnpm install @vue/cli -g
# 或使用 yarn 安装
yarn global add @vue/cli
# 创建项目,指定包管理工具
vue create -m pnpm demo
创建 vue 项目
这里就建一个 ts 的，使用 sass 的 vue3.x 项目,使用手动选择模式，包管理工具使用 yarn 。一路选择和回车即可：
vue create -m yarn zeipan
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
❯ Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
◉ Babel
◉ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
❯◉ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 3.x
2.x
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
Less
Stylus
一路选择回车后，提示安装成功。进入项目，运行项目。
cd zeipan
yarn serve
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
5月
03
4月
25
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
}
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
