vue+vite安装加常见问题；
9374 2023/6/21 vuevitevue3NaiveUI
文章日期 2023-06-21 参考链接 (opens new window) 参考链接 (opens new window)
# 跟上步骤，开始！
# 1.项目环境
Node16++++(版本高一些总是比较好的，避免出现一些依赖和环境不匹配的烦恼)
vue-cli（vue搭建项目必备的脚手架，你值得拥有）
# 安装
在自己心仪的文件夹打开cmd输入以下命令。vue脚手架可以直接帮你把很多基础的配置全部搞定，推荐推荐
npm init vue@latest
# or
pnpm create vue@latest
1
2
3
4
5
2
3
4
5
这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示，我们的选择如下：
✔ Project name（项目名）: projectName//自定义
✔ Add TypeScript（添加TS）? : No
✔ Add JSX Support（添加JSX支持）? : No
✔ Add Vue Router for Single Page Application development（添加Vue-router）? : Yes
✔ Add Pinia for state management（添加状态管理Pinia）? : Yes
✔ Add Vitest for Unit testing（为单元测试添加Vitest）? : No
✔ Add Cypress for both Unit and End-to-End testing（为单元测试与端到端测试添加Cypress）? : No
✔ Add ESLint for code quality（为代码质量添加ESLint）? : Yes
✔ Add Prettier for code formatting（为代码格式添加Prettier）? : Yes
Scaffolding project in ./tooldog...
Done.
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 配置项目
进入我们项目文件夹，先cnpm install
# 启动
# 移动到项目根目录
cd projectName
# 安装依赖
npm install
# 启动项目
npm run dev
#or
cd projectName
pnpm install
pnpm dev
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
当然，还有一些同学是启不起来的，估计很多的报错是这个：
Error: Cannot find module 'node:url'
1
这是因为我们创建的项目下载的包里用了 node 较高版本的语法，比如
// vite.config.js 中引入 node url 模块时使用了 'node:url'
// 详见：https://nodejs.org/dist/latest-v16.x/docs/api/url.html#url
import { fileURLToPath, URL } from 'node:url'
1
2
3
2
3
Vue 官方文档上明确说了开始项目之前，请确保安装了最新版本的 NodeJS，我们的 node 版本要在 v16+ ，所以出现这种问题你的电脑 node 版本可能有些老了，赶快 node -v 查看一下自己电脑的 node 版本吧！