Vue开发相关环境搭建(nvm 、nrm、serve)

1、安装node.js

1-1：通过nvm管理node的版本(推荐)：

nvm:node version management

第一步(如果没有安装过，直接跳过该步骤)：node -v 查看node版本：

如果安装了node 就会有相应的版本号，就必须要把node卸载了：

 在卸载程序里面找到node.js,卸载掉。

第二步：下载nvm:

地址：Releases · coreybutler/nvm-windows · GitHub

 第三步安装：nvm（下一步，下一步...默认安装就可以了）

第四步：查看node 版本列表 

nvm list available

 查看列表的官网地址：Previous Releases | Node.js

第五步：安装指定版本，比如版本号为6.16.0

nvm install 16.16.0

第六步：查看已经安装的版本

nvm ls

 第七步：使用指定版本：

nvm use 16.16.o

1-2、单版本安装（不推荐）
Node.js 中文网 历史版本选择：Index of /dist/

安装过程中选择add to path选择 

安装完毕:
node -v 查看node版本

2：npm -v查看node package management 版本

npm设置和查看仓库源:

查看源，可以看到设置过的所有的源 npm config get registry

设置仓库源：

 npm config set registry http://registry.npmjs.org

npm config set registry 仓库地址

node 包仓库管理工具： nrm

第一步：全局安装nrm

npm i nrm -g

第二步：查看镜像源地址

nrm ls

 第三步：设置镜像源

nrm use xxx(npm| yarn | tencent | cnpm | taobao | npmMirror) ,

比如:nrm use npm 

添加镜像源：

 nrm add “xx” http://registry.npm.frp.trmap.cn/

nrm use xx

2、安装vue脚手架：介绍 | Vue CLI

npm install -g @vue/cli

查看版本：vue --version

创建新项目：vue create xxx 

Vite 创建项目：

npm create vue yourproject

npm  install sass -D

3、本地运dist包 ： 

3-1、安装 npm install -g serve 

3-2、再dist目录下打开命令工具 输入serve命令

或者：npm install http-server -g    输入http-server

4、安装git:

4-1:生成密钥：

1、打开 git Bash Here

2、输入配置命令：

2-1：$ git config --global user.name "Your Name"（你的用户名）

2-2：$ git config --global user.email "email@example.com" （是你自己的邮箱）

以上2步完成之后，此时会在C:\Users\Administrator目录下生成.gitconfig配置文件(此文件不能删除)；

3、继续在Git命令窗口中输入如下命令,连续按4词回车（enter），即可生成SSH公钥和私钥

ssh-keygen -t rsa -C "email@example.com"（刚刚配置的邮箱地址）

4、查看公钥的命名：cat ~/.ssh/id_rsa.pub查看

5、选择HBuilderX :HBuilderX-高效极客技巧

6、截图工具sinpaste:Snipaste Downloads

脚手架官网：浏览器兼容性 | Vue CLI

Vue CLI 内部使用了 PostCSS。

你可以通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。

默认开启了 autoprefixer。如果要配置目标浏览器，可使用 package.json 的 browserslist 字段。

关于 CSS 中浏览器前缀规则的注意事项

在生产环境构建中，Vue CLI 会优化 CSS 并基于目标浏览器抛弃不必要的浏览器前缀规则。因为默认开启了 autoprefixer，你只使用无前缀的 CSS 规则即可。

browserslist： 

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

现在查阅这里了解如何指定浏览器范围。

 Vue CLI 项目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器

配置css自动前缀：

Vite :开始 | Vite 官方中文文档