Windows下搭建VUE开发环境

Windows下搭建VUE开发环境

第一步 安装nodejs

下载nodejs

官网下载https://nodejs.org/

安装nodejs

一直下一步就好，我安装的路径为：D:\Program Files\nodejs

配置环境变量

此电脑（右键）=> 属性 => 高级系统设置 => 环境变量 => 新建

设置一个NODE_HOME环境变量，设置成nodejs的安装路径，我的是D:\Program Files\nodejs

然后编辑Path环境变量,额外添加两个环境变量%NODE_HOME%和%NODE_HOME%\node_global

环境变量配置后，好像不能立即生效，重启后才能在PowerShell中才能使用，由于已经重启生效了，就没有研究怎么不重启生效。

如果还是不行，可以通过一下命令查看环境的值

echo $env:Path
echo $env:NODE_HOME

安装测试

直接node -v 和npm -v

配置npm的路径

在安装目录创建两个文件夹node_cache和node_global

使用npm配置缓存和全局安装路径(注：配置环境变量时已经配置全局安装路到Path)
npm config set cache "D:\Program Files\nodejs\node_cache"
npm config set prefix "D:\Program Files\nodejs\node_global"

PS D:\Program Files\nodejs> npm config set cache "D:\Program Files\nodejs\node_cache"
PS D:\Program Files\nodejs> npm config set prefix "D:\Program Files\nodejs\node_global"
PS D:\Program Files\nodejs> npm config list
; "builtin" config from D:\Program Files\nodejs\node_modules\npm\npmrc; prefix = "C:\\Users\\yjkht\\AppData\\Roaming\\npm" ; overridden by user; "user" config from C:\Users\yjkht\.npmrccache = "D:\\Program Files\\nodejs\\node_cache"
prefix = "D:\\Program Files\\nodejs\\node_global"; node bin location = D:\Program Files\nodejs\node.exe
; node version = v20.11.0
; npm local prefix = D:\Program Files\nodejs
; npm version = 10.2.4
; cwd = D:\Program Files\nodejs
; HOME = C:\Users\yjkht
; Run `npm config ls -l` to show all defaults.
PS D:\Program Files\nodejs>

npm config list 查看是否配置成功

配置npm的国内代理

我使用的是腾讯云镜像站
npm config set registry=https://mirrors.cloud.tencent.com/npm

PS D:\Program Files\nodejs> npm config set registry=https://mirrors.cloud.tencent.com/npm
PS D:\Program Files\nodejs> npm config list
; "builtin" config from D:\Program Files\nodejs\node_modules\npm\npmrc; prefix = "C:\\Users\\yjkht\\AppData\\Roaming\\npm" ; overridden by user; "user" config from C:\Users\yjkht\.npmrccache = "D:\\Program Files\\nodejs\\node_cache"
prefix = "D:\\Program Files\\nodejs\\node_global"
registry = "https://mirrors.cloud.tencent.com/npm"; node bin location = D:\Program Files\nodejs\node.exe
; node version = v20.11.0
; npm local prefix = D:\Program Files\nodejs
; npm version = 10.2.4
; cwd = D:\Program Files\nodejs
; HOME = C:\Users\yjkht
; Run `npm config ls -l` to show all defaults.

安装必要工具

npm安装时会有么有权限创建目录的问题，改用管理员打开就可以解决

npm install -g yarn
npm install -g typescript
npm install -g webpack
npm install -g webpack-cli
npm install -g pnpm
npm install -g cnpm

测试工具安装的使用

PS D:\workspace\vue_learn> pnpm -v
9.12.2
PS D:\workspace\vue_learn> cnpm -v
cnpm@9.4.0 (D:\Program Files\nodejs\node_global\node_modules\cnpm\lib\parse_argv.js)
npm@9.9.2 (D:\Program Files\nodejs\node_global\node_modules\cnpm\node_modules\npm\index.js)
node@20.11.0 (D:\Program Files\nodejs\node.exe)
npminstall@7.12.0 (D:\Program Files\nodejs\node_global\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=D:\Program Files\nodejs\node_global
win32 x64 10.0.22631
registry=https://registry.npmmirror.com

完成安装，可以使用，目前不太完美的是必须管理员身份运行。

第二步 安装vscode

下载vscode

https://code.visualstudio.com/Download
直接下一步下一步就好，
注意：打开vscode是也需要以管理身份打开，否则缺失目录的写权限，会导致一些命令提示没有权限。

安装插件

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

ID: MS-CEINTL.vscode-language-pack-zh-hans
说明: Language pack extension for Chinese (Simplified)
版本: 1.94.2024101609
发布者: Microsoft
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans

Vue - Official

ID: Vue.volar
说明: Language Support for Vue
版本: 2.1.6
发布者: Vue
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=Vue.volar

第三步 创建项目

使用vite创建项目

可以参考官方网站：https://www.vitejs.net/guide/

PS D:\workspace\vue_learn> pnpm create vite
√ Project name: ... vite-project
√ Select a framework: » Vue
√ Select a variant: » TypeScriptScaffolding project in D:\workspace\vue_learn\vite-project...Done. Now run:cd vite-projectpnpm installpnpm run dev

使用vscode打开目录

按照提示

PS D:\workspace\vue_learn\vite-project> pnpm install
Packages: +48
++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 86, reused 0, downloaded 48, added 48, done
node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild: Running postinstall script, done in 564msdependencies:
+ vue 3.5.12devDependencies:
+ @vitejs/plugin-vue 5.1.4
+ typescript 5.6.3
+ vite 5.4.9
+ vue-tsc 2.1.6Done in 11.5s
PS D:\workspace\vue_learn\vite-project> pnpm run dev

按照提示，代开页面http://localhost:5173/