Vue3：安装配置
发布时间:2026-04-21 17:01
Vue3项目从零到跑起来：Node.js环境+NPM配置+项目创建
一、前言
搞过的人都知道，Vue3装环境最烦的不是Vue本身，是Node.js版本乱、npm装包慢到怀疑人生、还有那该死的权限问题让你在服务器上装全局包装不上。本教程搞定Node.js安装、NPM镜像配置、项目创建，一条龙服务。
二、操作步骤
第一步：检查当前环境（看看有没有旧版本的Node）
$ node -v
-bash: node: command not found
干净机器，没有Node。先查系统版本。
$ cat /etc/os-release
NAME="Ubuntu"
VERSION="22.04.1 LTS (Jellyfish)"
$ uname -m
x86_64
第二步：安装Node.js（Ubuntu用nodesource，CentOS用Nodesource或者dnf）
Ubuntu/Debian系列：
$ curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
## Installing the NodeSource Node.js 20.x repo...
## Populating apt-get cache...
Exec: apt-get install -y nodejs
Reading package lists... Done
$ apt-get install -y nodejs
Reading package lists... Done
Building dependency tree... Done
nodejs is already the newest version (18.19.0).
系统自带了18版本，Vue3要求Node 14.18+就行，但建议用Node 18或20。继续确认版本。
CentOS/RHEL系列：
$ curl -fsSL https://rpm.nodesource.com/setup_18.x | bash -
## Installing the NodeSource Node.js 18.x repo...
$ yum install -y nodejs
```
第三步：验证Node和NPM版本
$ node -v
v18.19.0
$ npm -v
9.8.1
第四步：配置NPM镜像（不配这个npm install能等五分钟）
$ npm config set registry https://registry.npmmirror.com
$ npm config get registry
https://registry.npmmirror.com
$ npm config set disturl https://npmmirror.com/mirrors/node
$ npm config set electron_mirror https://npmmirror.com/mirrors/electron/
镜像配置好了，以后npm install速度直接起飞。
第五步：创建Vue3项目（用create-vue，比vue-cli更轻量）
$ npm init vue@latest my-vue3-project
Need to install the following packages:
create-vue@3.6.3
Ok to proceed? (y)
$ y
added 1 package in 3s
✔ Project name: … my-vue3-project
✔ Add TypeScript? … No / Yes
✔ Add JSX support? … No / Yes
✔ Add Vue Router for SPA development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
Scaffolding project in ./my-vue3-project... done.
按需选择，方向键切选项，回车确认。选完这些项目结构就出来了。
第六步：安装依赖+启动项目
$ cd my-vue3-project
$ npm install
added 1256 packages, and audited 1256 packages in 45s
128 packages are looking for funding
run information for donating to the open-source maintainers
$ npm run dev
> my-vue3-project@0.0.0 dev
> vite
VITE v5.0.10 ready in 872 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ Network: http://192.168.1.100:5173/
项目跑起来了，打开浏览器访问localhost:5173就能看到Vue3默认页面。
三、常见问题FAQ
Q：npm install报错 EACCES permission denied，咋整？
A：别sudo npm install，那是给自己挖坑。最稳妥的做法是给npm配个prefix，把全局包装到自己目录下：
$ mkdir -p ~/.npm-global
$ npm config set prefix '~/.npm-global'
$ echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
$ source ~/.bashrc
以后全局包就装到自己目录了，不用root不用sudo。
Q：Windows上装Node，用nvm还是直接下msi？
A：新手直接下msi装就行，简单粗暴。搞多项目、需要切换Node版本的话，用nvm-windows。切记不要用中文路径装项目，npm会原地爆炸。
Q：生产环境Docker里Node版本怎么选？
A：用官方镜像就行，别自己装：
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
EXPOSE 3000
CMD ["npm", "run", "preview"]
alpine镜像小，ci只装生产依赖，体积能省不少。
Q：npm卡在sill idealTree不动了怎么办？
A：先清缓存试试，不行就删掉node_modules和package-lock.json重新装：
$ npm cache clean --force
$ rm -rf node_modules package-lock.json
$ npm install
如果还卡，可能是网络问题，开个代理或者换回官方registry试：
$ npm config set registry https://registry.npmjs.org/
四、总结
Vue3环境配置就这么几步：装Node→配镜像→建项目→装依赖→跑起来。核心就三件事：Node版本别太老、NPM镜像配好、别用sudo装全局包。遇到权限问题就配npm prefix，遇到卡住就清缓存换源。开发环境讲究的是快、干净、不折腾。
延伸阅读：