vue相关环境配置nvm/node/yarn/cnpm/node-sass/webpack-cli/http-server

vue相关环境配置

1.序言

vue开发时安装的不同环境配置，方便更换设备时进行当前版本的固定化。

2. 版本查询

//版本查询
nvm               -> nvm -v             --> 1.1.8
node              -> node -v            --> 14.17.5
cnpm              -> cnpm -v            --> 7.1.1
yarn              -> yarn -v            --> 14.17.5
node-sass         -> node-sass -v       --> 4.14.1
http-server       -> http-server -v     --> 14.1.0
vue               -> vue -V             --> 4.5.15
webpack-cli       -> webpack-cli -v     --> 4.9.2

3. NVM相关

介绍nvm管理node版本，因为node版本上下版本不兼容，采用nvm进行对node管理方便切换。

3.1 nvm的node切换与安装

// nvm的路径
nvm root
// nvm切换node版本
nvm list 查看已经安装的版本
nvm list installed 查看已经安装的版本
nvm list available 查看网络可以安装的版本
nvm install xxx  先下载想用的版本
nvm use <version> ## 切换使用指定的版本node

3.2 nvm的node配置

// nvm的node配置
// 在nvm下载的版本node的根目录下，创建node_global和node_cache
npm config ls 查看当前的node配置路径
npm config set prefix "D:\xxx\node_global"
npm config set cache "D:\xxx\node_cache"

3.2 nvm切换node后对本地的环境修改配置

<------------ 引用(3.1 nvm的node切换与安装) start --------------------------->  

// nvm的路径
nvm root
// nvm切换node版本
nvm list 查看已经安装的版本
nvm list installed 查看已经安装的版本
nvm list available 查看网络可以安装的版本
nvm install xxx  先下载想用的版本
nvm use <version> ## 切换使用指定的版本node

<------------ 引用(3.1 nvm的node切换与安装) end ----------------------------->  

// 环境配置
- npm config ls 查看当前的node配置路径
// 修改配置路径
npm config set prefix "D:\runTimeEnvironment\nvm\v10.13.0\node_global" 
npm config set cache "D:\runTimeEnvironment\nvm\v10.13.0\node_cache"
nvm use 10.13.0
// 例如：
// v14.17.5版本
npm config set prefix "D:\runTimeEnvironment\nvm\v14.17.5\node_global" 
npm config set cache "D:\runTimeEnvironment\nvm\v14.17.5\node_cache"
// v10.14.0版本
npm config set prefix "D:\runTimeEnvironment\nvm\v10.14.0\node_global" 
npm config set cache "D:\runTimeEnvironment\nvm\v10.14.0\node_cache"
// v18.16.0版本
npm config set prefix "D:\runTimeEnvironment\nvm\v18.16.0\node_global"
npm config set cache "D:\runTimeEnvironment\nvm\v18.16.0\node_cache"

// 配置电脑环境
修改  NODE_USE_PATH 配置到指定版本的目录，在电脑的环境变量配置里进行配置

4. npm中cnpm的设置

//建议使用淘宝镜像

//下载cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

查看当前镜像地址： npm get registry
切换为淘宝镜像： npm config set registry http://registry.npm.taobao.org/
切换为原本的npm镜像： npm config set registry https://registry.npmjs.org/

5. vue项目启动

// 项目启动
npm run dev
npm run server
// 其实 npm run dev 或者是 npm run serve 等 npm run xxx 并不是一定要这么写，npm run XXX是执行配置在 package.json 中的脚本，比如
"scripts": {
　　"serve": "vue-cli-service serve",
　　"build": "vue-cli-service build",
　　"lint": "vue-cli-service lint"
}

5. vue项目启动问题

遇见的问题：类似权限
方案1、
由于报错是 The operation was rejected by your operating system. npm ERR! It's possible that the file was already in use (by a text editor or antivirus),本能的想法就是权限不够，所以直接使用管理员权限打开了命令行然后执行 npm install命令，结果并不能解决我的问题，但是不代表不能解决你的问题，所以可以先行尝试。
方案2、
通过网上查找资料，发现删除本机电脑用户目录下的.npmrc文件，可以解决当前问题，于是进行了尝试，果然解决了问题，文件 具体路径为 C:\Users\{当前登录的用户名}\.npmrc。

6. 具体的环境安装环境变量配置

正在更新中。。。