Windows下搭建VUE开发环境
文章目录
- Windows下搭建VUE开发环境
- 第一步 安装nodejs
- 下载nodejs
- 安装nodejs
- 配置环境变量
- 安装测试
- 配置npm的路径
- 配置npm的国内代理
- 安装必要工具
- 测试工具安装的使用
- 第二步 安装vscode
- 下载vscode
- 安装插件
- Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
- Vue - Official
- 第三步 创建项目
- 使用vite创建项目
- 使用vscode打开目录
第一步 安装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\.npmrc
cache = "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\.npmrc
cache = "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: » TypeScript
Scaffolding project in D:\workspace\vue_learn\vite-project...
Done. Now run:
cd vite-project
pnpm install
pnpm 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 564ms
dependencies:
+ vue 3.5.12
devDependencies:
+ @vitejs/plugin-vue 5.1.4
+ typescript 5.6.3
+ vite 5.4.9
+ vue-tsc 2.1.6
Done in 11.5s
PS D:\workspace\vue_learn\vite-project> pnpm run dev
按照提示，代开页面http://localhost:5173/
