异常教程

vue cli创建项目（建议收藏）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在前端开发领域，Vue.js 作为主流框架之一，凭借其简洁的语法和灵活的生态赢得了广泛认可。而 Vue CLI（Vue Command Line Interface）则是 Vue 官方提供的脚手架工具，它能够快速生成标准化的项目结构，帮助开发者高效启动开发流程。无论是构建个人博客、企业级应用，还是尝试新技术实验，Vue CLI 都能大幅减少重复性工作，让开发者聚焦于核心逻辑的实现。

本文将从零开始，分步骤讲解如何使用 Vue CLI 创建项目，并深入剖析项目结构、配置优化及常见问题。即使你是编程初学者，也能通过本文掌握基础技能；而中级开发者则能进一步理解底层原理，提升开发效率。

一、环境准备：安装 Vue CLI

1.1 全局安装 Vue CLI

使用 Vue CLI 的前提是安装 Node.js 和 npm（或 yarn）。若尚未安装，可访问 Node.js 官网 下载对应版本。安装完成后，通过以下命令全局安装 Vue CLI：

npm install -g @vue/cli

比喻：这一步类似于“安装一把多功能螺丝刀”，它将为你后续的项目搭建提供核心工具。

1.2 验证安装

安装完成后，可通过以下命令检查 Vue CLI 是否成功：

vue --version

若输出版本号（如 @vue/cli 5.0.8），则表示安装成功。

二、创建第一个 Vue 项目

2.1 通过交互式界面创建项目

运行以下命令启动 Vue CLI 的交互式界面：

vue create my-project

系统会依次询问以下问题：

  1. 选择 Vue 版本：建议初学者选择默认的 Vue 3.x，因其语法更简洁且功能更强大。
  2. 配置 Babel、Router、Vuex 等插件：
    • Babel：用于兼容旧版浏览器，建议勾选。
    • Router：若项目需要单页应用（SPA）的路由功能，勾选此选项。
    • Vuex：若需要状态管理，可勾选。
  3. 保存预设配置：若后续需复用当前配置，可保存为预设。

案例：假设你正在开发一个电商网站，需要路由跳转商品详情页和购物车页，此时应勾选 Router。

2.2 查看项目结构

创建完成后，进入项目目录：

cd my-project

通过 ls 或 dir 命令查看文件结构，核心目录如下：

目录/文件功能描述
src/存放源代码，是项目的“心脏”
public/存放静态资源（如 logo.png）
node_modules/安装的依赖包，由 npm 管理
package.json项目配置文件，记录依赖和脚本命令

三、项目核心文件解析

3.1 src 目录详解

3.1.1 main.js

这是项目的入口文件，负责挂载 Vue 实例到 HTML 的根元素：

import { createApp } from 'vue'  
import App from './App.vue'  

createApp(App).mount('#app')

比喻：main.js 好比建筑的“地基”，它决定了整个应用的启动方式和基本结构。

3.1.2 App.vue

这是根组件，定义了应用的全局布局：

<template>  
  <div id="app">  
    <h1>欢迎来到 Vue CLI 项目！</h1>  
  </div>  
</template>  

<script setup>  
// 这里可以编写逻辑代码  
</script>

3.1.3 router 和 store 目录

如果勾选了 Router 和 Vuex，则会自动生成对应的目录：

  • router/index.js：定义路由规则，如 /home 对应 Home.vue 组件。
  • store/index.js：管理全局状态，如用户登录信息。

3.2 启动开发服务器

运行以下命令启动本地服务器：

npm run serve

浏览器会自动打开 http://localhost:8080，显示你的项目页面。

四、配置优化：自定义项目

4.1 使用 vue.config.js

在项目根目录新建 vue.config.js，可自定义 Vue CLI 的行为。例如：

module.exports = {  
  // 修改端口号  
  devServer: {  
    port: 8000  
  },  
  // 配置部署时的公共路径  
  publicPath: './'  
}

案例：若需解决开发环境的跨域问题，可添加代理配置：

devServer: {  
  proxy: {  
    '/api': {  
      target: 'http://localhost:3000',  
      changeOrigin: true,  
      pathRewrite: { '^/api': '' }  
    }  
  }  
}

4.2 使用图形化界面 vue ui

通过以下命令启动 Vue CLI 的图形化界面：

vue ui

它提供项目创建、依赖管理、构建配置等功能，适合对命令行不熟悉的开发者。

五、实战案例：构建一个计数器组件

5.1 创建组件

在 src/components/ 目录下新建 Counter.vue：

<template>  
  <div>  
    <p>当前计数：{{ count }}</p>  
    <button @click="increment">+1</button>  
    <button @click="decrement">-1</button>  
  </div>  
</template>  

<script setup>  
import { ref } from 'vue'  

const count = ref(0)  

const increment = () => {  
  count.value++  
}  

const decrement = () => {  
  count.value = Math.max(count.value - 1, 0)  
}  
</script>

5.2 在 App.vue 中使用组件

<template>  
  <div id="app">  
    <h1>计数器示例</h1>  
    <Counter />  
  </div>  
</template>  

<script setup>  
import Counter from './components/Counter.vue'  
</script>

保存后，页面会显示一个可增减的计数器。

六、常见问题与解决方案

6.1 npm install 卡住或报错

  • 问题：依赖安装失败，提示 ECONNRESET 或 ETIMEDOUT。
  • 解决：尝试更换 npm 镜像源： 
    npm config set registry https://registry.npmmirror.com

6.2 端口被占用

若启动时提示 Port 8080 is already in use，可通过以下方式解决：

  1. 修改 vue.config.js 中的端口号（如 port: 8081）。
  2. 直接在启动命令中指定端口： 
    npm run serve -- --port 8081

七、进阶技巧：版本升级与社区资源

7.1 升级 Vue CLI

随着 Vue 生态的快速发展，建议定期升级工具链：

npm install -g @vue/cli@latest

7.2 探索官方插件市场

Vue CLI 提供丰富的插件生态，例如：

  • @vue/cli-plugin-eslint：集成代码规范工具。
  • @vue/cli-plugin-unit-jest：集成单元测试框架。

安装插件可通过以下命令：

vue add plugin-name

八、结论：Vue CLI 的核心价值

通过本文，我们完成了从安装、创建到优化 Vue CLI 项目的全过程。Vue CLI 的核心价值在于：

  1. 标准化：提供统一的项目结构，减少开发者的学习成本。
  2. 灵活性：支持按需配置，适配不同规模的项目需求。
  3. 高效性：通过预设配置和插件机制，加速开发流程。

无论是构建个人作品集，还是参与企业级项目，掌握 Vue CLI 都是前端开发者的必备技能。建议读者通过实际动手实践，逐步探索更多高级功能，如代码分割、性能优化等。

最后提醒：避免直接修改 node_modules 目录内的文件，所有配置均应通过项目根目录的配置文件或命令行完成。

通过本文，读者不仅能掌握 vue cli创建项目 的具体步骤，还能理解其背后的逻辑与最佳实践，为后续的前端开发奠定坚实基础。

最新发布

查看更多文章