Win10 Vue 环境搭建以及项目初始化

文章目录

1. Node 下载和安装
- 1.1 安装验证
1.2 添加 `NODE_PATH` 环境变量
2. 使用 cnpm 的两种方式
- 2.1 下载安装 cnpm
- 2.2 通过改变地址来使用淘宝镜像
3. npm 镜像源管理工具 nrm
- 3.1 nrm : 无法将“nrm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。
- 3.2 nrm：[TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string.
4. 安装 vue-cli 脚手架和 webpack
5. 使用 vue-cli 创建项目并测试

1. Node 下载和安装

进入 Node 官网：https://nodejs.org/en/download/ 选择合适的版本下载。

直接点击msi 文件安装，一路 Next 即可，注意安装路径。可选择默认路径 C:\Program Files\nodejs .

Automatically install the necessary tools. Note that this will also install Chocolatey. The script will pop-up in a new window after the inatallation completes. 可勾选，自动下载所需的工具。

1.1 安装验证

安装成功，自动弹出如下 CMD 窗口

打开自带的 PowerShell 或 CMD，输入 node -v 和 npm -v , 显示相应的版本，表示已安装成功，安装完 node 后，npm 也会beu Node 下载和安装
进入 Node 官网：https://nodejs.org/en/download/ 选择合适的版本下载。直接点击msi 文件安装，一路 Next 即可，注意安装路径。可选择默认路径 C:\Program Files\nodejs .Automatically install the necessary tools. Note that this will also install Chocolatey. The script will pop-up in a new window after the inatallation completes. 可勾选，自动下载所需的工具。安装验证安装成功，自动弹出如下 CMD 窗口打开自带的 PowerShell 或 CMD，输入 node -v 和 npm -v , 显示相应的版本，表示已安装成功，安装完 node 后，npm 也会被自动安装，不再需要独立安装。

通过npm config ls 查看 npm 配置信息

PS C:\Windows\system32> npm config ls
; cli configs
metrics-registry = "https://registry.npmjs.org/"
scope = ""
user-agent = "npm/6.14.11 node/v14.16.0 win32 x64"; builtin config undefined
prefix = "C:\\Users\\Tuzaza\\AppData\\Roaming\\npm"; node bin location = C:\Program Files\nodejs\node.exe
; cwd = C:\Windows\system32
; HOME = C:\Users\Tuzaza
; "npm config ls -l" to show all defaults.

可知，npm 的全局模块默认安装在 C:\\Users\\Tuzaza\\AppData\\Roaming\\npm，可以通过 npm config set prefix "ypur path" 修改安装目录. 在 nodejs 安装目录下新建 ``node_cache 和 node_global 文件夹，用来修改路径.

修改 npm 配置默认路径

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

之后使用 npm install XXX -g 安装后，模块都会存储在这两个文件夹里

1.2 添加 `NODE_PATH` 环境变量

2. 使用 cnpm 的两种方式

2.1 下载安装 cnpm

淘宝团队做的国内镜像，因为 npm 的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10 分钟一次以保证尽量与官方服务同步。
安装：命令提示符执行
npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm -v 来测试是否成功安装

如果出现以下错误

cnpm : 无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确
，然后再试一次。
所在位置 行:1 字符: 1
+ cnpm -v
+ ~~~~+ CategoryInfo          : ObjectNotFound: (cnpm:String) [], CommandNotFoundException+ FullyQualifiedErrorId : CommandNotFoundException

可用以下方式解决：将 cnpm 文件夹与 npm 不在同一个文件夹下
cnpm 所在文件夹：C:\Program Files\nodejs\node_global\node_modules\cnpm
npm 所在文件夹：C:\Program Files\nodejs\node_modules\npm

将 cnpm 文件夹移至 npm 所在的文件夹 C:\Program Files\nodejs\node_modules\ 下，再将 cnpm 和 cnpm.cmd 文件移至 npm 和 npm.cmd 所在的文件夹 C:\Program Files\nodejs 即可解决问题.

安装完成之后，可以使用 cnpm 代替 npm 下载依赖，与 npm 用法没什么不同，只是执行命令时将 npm 改为cnpm .

2.2 通过改变地址来使用淘宝镜像

npm 的默认地址是 https://registry.npmjs.org/
可以使用 npm config get registry 查看 npm 的仓库地址
可以使用 npm config set registry https://registry.npm.taobao.org 来改变默认下载地址，达到可以不安装 cnpm 就能采用淘宝镜像的目的，然后使用上面的 get 命令查看是否成功。

PS C:\Windows\system32> npm config get registry
https://registry.npmjs.org/
PS C:\Windows\system32> npm config set registry https://registry.npm.taobao.org
PS C:\Windows\system32> npm config get registry
https://registry.npm.taobao.org/

3. npm 镜像源管理工具 nrm

nrm 包安装命令： npm install -g nrm
nrm 能够管理所用可用的镜像源地址以及当前所使用的镜像源地址，但是只是单纯的提供了几个 url 并能够让我们在这几个地址之间方便切换
nrm ls 即 nrm list，查看所有可用的镜像，并可以切换。* 号表示当前 npm 使用的地址，可以使用命令 nrm use taobao 或 nrm use npm 来进行两者之间的切换。

3.1 nrm : 无法将“nrm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

按 cnpm 同类报错处理方式处理，见以上。

3.2 nrm：[TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string.

如果安装遇到以下错误

PS C:\Windows\system32> nrm list
internal/validators.js:124throw new ERR_INVALID_ARG_TYPE(name, 'string', value);^[TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefinedat validateString (internal/validators.js:124:11)at Object.join (path.js:375:7)at Object.<anonymous> (C:\Program Files\nodejs\node_modules\nrm\cli.js:17:20)at Module._compile (internal/modules/cjs/loader.js:1063:30)at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)at Module.load (internal/modules/cjs/loader.js:928:32)at Function.Module._load (internal/modules/cjs/loader.js:769:14)at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)at internal/main/run_main_module.js:17:47
] {code: 'ERR_INVALID_ARG_TYPE'
}

根据 at Object.<anonymous> (C:\Program Files\nodejs\node_modules\nrm\cli.js:17:20) 修改 cli.js 17 行

打开文件找到报错的第17行，注释掉原17行

//const NRMRC = path.join(process.env.HOME, '.nrmrc');
const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc');

再用管理员模式运行 Powershell

PS C:\Windows\system32> nrm ls* npm -------- https://registry.npmjs.org/yarn ------- https://registry.yarnpkg.com/cnpm ------- http://r.cnpmjs.org/taobao ----- https://registry.npm.taobao.org/nj --------- https://registry.nodejitsu.com/npmMirror -- https://skimdb.npmjs.com/registry/edunpm ----- http://registry.enpmjs.org/

4. 安装 vue-cli 脚手架和 webpack

使用 cnpm install -g @vue/cli 或 cnpm install vue-cli -g 安装 vue-cli 脚手架

安装完毕后，输入 vue -V 查看版本，如果出现以下错误

PS C:\Windows\system32> vue -V
vue : 无法加载文件 C:\Program Files\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?L
inkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ vue -V
+ ~~~+ CategoryInfo          : SecurityError: (:) []，PSSecurityException+ FullyQualifiedErrorId : UnauthorizedAccess

请删除 C:\Program Files\nodejs\node_global\vue.ps1 注解文件即可，对项目不影响。

下载安装 webpack

cnpm install -g webpack

5. 使用 vue-cli 创建项目并测试

新建目录，用于存放项目，并在 cmd 或 powershell 上 cd 到项目目录

PS C:\Windows\system32> cd D:\Documents\CodeDevops\test-depository\vue-one-step

根据模板创建新项目

vue init webpack  vuetest

初始化项目完成后的目录结构如下

各个项目文件夹说明

build: 最终发布代码存放位置
config：配置目录，包括端口
node_modules：执行 npm install 后产生的，里面包含了 Node.js 和 npm 依赖的文件以及后续安装的第三方组件或者第三方功能
src：用于开发的目录，存放页面相关的文件，基本上要做的事情都在这个目录里
src\App.vue 主文件，项目入口文件，也可直接将组件写这里，而不使用 components
src\assets：放置一些图片，如 logo 等
src\components：存放了一个组件文件
src\router：其实包括 index.js，为项目路由
static：一般用于存放静态资源，如图片、字体等
.babelrc文件：用于设置转码的规则和插件的，一般不需要设置

安装项目工程依赖

cd vuetest
cnpm install

运行项目，测试项目是否正常工作，通过 nodejs 启动

cd vuetest
cnpm run dev

浏览器访问 http://localhost:8080/#/

Vue 全家桶
vue（整体架构） + vuex（状态管理） + vue-router（路由） + vue_resource || axios（ajax请求） + mint-UI(移动端UI框架库) || elementUI || iview

参考文章：

npm 和 cnpm