创建vue3项目

原创于 2025-03-05 11:03:54 发布 · 1.4k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#vue

安装 Node.js 和 npm
确保你已经安装了 Node.js 和 npm。如果没有安装，请按照以下步骤操作：
1)访问 Node.js 官网。
2)下载并安装 LTS 版本（推荐）。
3)安装完成后，打开终端（或命令提示符）并运行以下命令，检查是否安装成功：
```
node -v
npm -v
```
安装 Vue CLI
Vue CLI 是 Vue 官方提供的脚手架工具，用于快速创建和管理 Vue 项目。
运行以下命令全局安装 Vue CLI：
```
npm install -g @vue/cli
```
创建 Vue 3 项目
使用 Vue CLI 创建一个新的 Vue 3 项目。
运行以下命令：
```
vue create my-vue3-project
```
my-vue3-project 是你的项目名称，可以根据需要修改。
创建项目时的选项:
a.选择预设（Preset）：
选择 Manually select features（手动选择功能）
b.选择功能：
使用空格键选择需要的功能，例如：
Babel（用于编译 ES6+ 代码）
Router（路由）
Vuex（状态管理）
Linter / Formatter（代码格式化工具）
按回车确认。
c.选择 Vue 版本：
选择 3.x。
d.选择路由模式：
选择 History mode for router? (Y/n)，输入 Y 启用历史模式。
e.选择代码格式化工具：
选择 ESLint + Prettier（推荐）。
f.选择代码检查时机：
选择 Lint on save（保存时检查代码）。
g.选择配置文件存放位置：
选择 In dedicated config files（将配置放在单独的文件中）。
h.是否保存为预设：
选择 N（不保存为预设）。
进入项目目录
项目创建完成后，进入项目目录：
```
cd my-vue3-project
```
启动开发服务器
运行以下命令启动开发服务器：
```
npm run serve
```
启动后，你会看到类似以下的输出：

打开浏览器，访问 http://localhost:8080，即可看到 Vue 的欢迎页面。

项目结构
创建的项目结构如下：

	my-vue3-project/
├── node_modules/       # 依赖包
├── public/             # 静态资源
├── src/                # 源代码
│   ├── assets/         # 图片、字体等资源
│   ├── components/     # 组件
│   ├── views/          # 页面
│   ├── App.vue         # 根组件
│   ├── main.js         # 入口文件
│   ├── router/         # 路由配置（如果选择了 Router）
│   └── store/          # Vuex 状态管理（如果选择了 Vuex）
├── .gitignore          # Git 忽略文件
├── babel.config.js     # Babel 配置
├── package.json        # 项目依赖和脚本
├── README.md           # 项目说明
└── vue.config.js       # Vue 项目配置
	```

安装依赖（如果需要）
如果你在创建项目时没有选择某些功能（例如 Vuex 或 Axios），可以手动安装：
```
npm install vuex       # 安装 Vuex
npm install axios      # 安装 Axios
```
开发与构建
开发模式：运行 npm run serve，代码修改后会实时更新。
生产构建：运行 npm run build，生成优化后的代码，存放在 dist/ 目录中。
其他常用命令
A.检查代码格式：npm run lint
B.运行单元测试：npm run test:unit
C.运行端到端测试：npm run test:e2e