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 版本吧!