Vue CLI 简介使用启动 Vue 项目创建好项目后启动开发服务器
一、Vue CLI 简介
Vue CLI 是 Vue.js 官方推荐的快速搭建 Vue 项目的工具。它就像是一个项目模板，帮你省去了很多繁琐的设置，让开发更高效。
二、安装 Vue CLI
你得安装 Vue CLI。有两种方式：使用 npm 或 yarn。
| 使用 npm 安装 | npm install -g @vue/cli |
|---|---|
| 使用 yarn 安装 | yarn global add @vue/cli |
三、创建 Vue 项目
安装好 Vue CLI 后，就可以创建新项目了。
- 进入你想要创建项目的目录。
- 使用以下命令创建项目：
vue create my-project
- 选择预设或手动选择配置。
选择默认预设（如 babel, eslint）或手动选择你想要的功能。
四、启动 Vue 项目
创建好项目后，启动开发服务器。
- 进入项目目录。
- 使用以下命令启动：
npm run serve 或 yarn serve
终端会显示项目的访问地址，通常是 。
五、理解 Vue CLI 的启动命令
命令 npm run serve 或 yarn serve 实际上是运行了项目中的一个脚本，这个脚本定义在 package.json 文件中。
脚本通常如下：
"scripts": {
"serve": "vue-cli-service serve"
}其中，vue-cli-service serve 是 Vue CLI 提供的一个命令，用于启动开发服务器。
六、Vue CLI 的其他命令
除了 serve 命令，Vue CLI 还提供了其他一些常用命令：
| 命令 | 功能 |
|---|---|
| build | 构建项目 |
| test | 运行单元测试 |
| e2e | 运行端到端测试 |
| lint | 运行代码检查 |
七、常见问题及解决方法
在使用 Vue CLI 时，可能会遇到一些常见问题。
- 端口冲突：开发服务器默认使用 8080 端口，如果该端口被占用，可以通过以下方式修改端口：
- 依赖问题：如果遇到依赖安装失败的问题，可以尝试删除 node_modules 目录和 package-lock.json 文件，然后重新安装依赖：
npm run serve -- --port 8081 或 yarn serve -- --port 8081
rm -rf node_modules
rm package-lock.json
npm install 或 yarn install
八、总结与建议
通过本文的介绍，相信你已经了解了如何使用 Vue CLI 启动一个 Vue 项目。以下是一些建议：
- 熟悉 Vue CLI 的各项功能。
- 探索 Vue 生态系统，了解 Vue Router、Vuex 等常用库和工具。
- 持续学习，关注 Vue.js 官方文档和社区。
这些步骤将帮助你更好地理解和应用 Vue.js，提升开发效率。
相关问答FAQs
Q: Vue用什么启动？
A: Vue可以通过不同的方式启动，具体取决于你的项目需求和开发环境。
- 使用 Vue CLI：这是官方推荐的，可以快速搭建和管理 Vue 项目。
- 使用 CDN：适合快速尝试 Vue，不需要构建复杂项目。
- 使用模板：使用预设模板或第三方模板快速启动项目。
无论哪种方式，都需要确保你的开发环境中安装了 Node.js 和 npm。