君玉自牧 君玉自牧
首页
  • Linux
  • Nginx
  • MySQL
  • Redis
  • Kafka
  • Docker
  • Jenkins
  • Oneindex
  • Bitwarden
  • Confluence
  • Photogallery
  • 智能手机
  • 上古卷轴
  • 健身记录
  • 站点相关
  • 未完待续
GitHub (opens new window)
首页
  • Linux
  • Nginx
  • MySQL
  • Redis
  • Kafka
  • Docker
  • Jenkins
  • Oneindex
  • Bitwarden
  • Confluence
  • Photogallery
  • 智能手机
  • 上古卷轴
  • 健身记录
  • 站点相关
  • 未完待续
GitHub (opens new window)
  • 技术架构

  • 桌面维护

  • 网络工程

  • 系统运维

  • 环境搭建

  • 容器编排

  • 持续集成

  • 监控告警

  • 项目实践

  • 脚本开发

  • 前端开发

    • Windows 系统搭建 Node.js 环境
      • 搭建环境
        • 安装 Node.js
        • 环境变量
        • 安装 npm
        • 安装 yarn
        • 其他命令
      • 新建项目
        • 安装 Vue
        • 创建项目
    • Vue 开发入门
    • 搭建 VuePress:Github & Aliyun
    • 本地开发:泛(内网)域名解析
    • SSL 证书申请以及自动续期
    • 自动跳转 https 访问网站
    • asar 文件解包、修改再打包
  • 后端开发

  • 效率工具

目录

Windows 系统搭建 Node.js 环境

# 搭建环境

官网下载 (opens new window) & 历史版本 (opens new window)
image.png

# 安装 Node.js

下载二进制版本,解压到指定位置并打开文件夹,新建 node_global 和 node_cache 两个文件夹

cd D:\APP\Node
D:
mkdir node_global,node_cache
1
2
3

image.png

# 环境变量

setx /M Path "%Path%" "D:\APP\Node"
setx /M Path "%Path%" "D:\APP\Node\node_global"
setx /M NODE_PATH "D:\APP\Node\node_modules"
setx /M NODE_NEV ""
node -v
1
2
3
4
5

image.png

设置 Prefix(全局)和 Cache(缓存)路径

#设置全局模块存放路径
npm config set prefix "D:\APP\Node\node_global"
npm config get prefix
#设置缓存文件夹
npm config set cache "D:\APP\Node\node_cache"
npm config get cache
1
2
3
4
5
6

设置成功后,之后安装的模块就存放在 node_global 文件夹里,如:安装 cnpm(淘宝镜像)

# 安装 npm

npm install cnpm -g --registry=https://registry.npmmirror.com
#查看 yarn 源
cnpm config get registry
1
2
3

# 安装 yarn

npm install yarn -g --registry=https://registry.npmmirror.com
#查看配置
yarn config list
#查看 yarn 源
yarn config get registry
#修改 yarn 源,默认是 https://registry.yarnpkg.com
yarn config set registry https://registry.npmmirror.com
1
2
3
4
5
6
7

修改镜像源

#查看配置
npm config list
#设置淘宝镜像源
npm set registry https://registry.npmmirror.com
#删除淘宝源,镜像源重置为默认
npm config rm registry
1
2
3
4
5
6

安装 nrm 来管理和快速切换私人配置的 registry

npm install nrm -g
#查看所有源
nrm ls
#切换源
nrm use taobao
#添加源
nrm add <源名称> <源地址>
nrm add taobao https://registry.npmmirror.com
#删除源
nrm del taobao
#测试所有源的延迟,后接<源名称>测试单个
nrm test
#更多参数
nrm -h
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 其他命令

#查看安装列表
npm ls -g
npm ls
#清理缓存
npm cache clean -f
#升级到最新版
npm install npm@latest
npm install npm
#安装指定版本
npm install npm@8.6.1
#卸载
npm uninstall vue
1
2
3
4
5
6
7
8
9
10
11
12

# 新建项目

# 安装 Vue

cnpm install vue -g
1

安装 Vue 命令行工具,即 vue-cli 脚手架

cnpm install vue-cli -g
1

# 创建项目

image.png
安装工程依赖,为了速度把 npm 换成淘宝的 cnpm

cnpm install
cnpm run dev
1
2
网页编辑 (opens new window)
最近提交: 2023/03/22, 11:52:35
Bash 脚本备忘
Vue 开发入门

← Bash 脚本备忘 Vue 开发入门→

Theme by Vdoing | Copyright © 2011-2023 | 君玉自牧
粤ICP备15057965号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式