Vue3——Vue CLI

吴声子夜歌2026-04-22 9:26

Vue CLI

在开发大型项目时，需要考虑项目的组织结构、项目构建和部署等问题。如果手动完成这些配置工作，工作效率会非常低。为此，Vue.js官方提供了一款脚手架生成工具Vue CLI，通过该工具可以快速构建项目，并实现一些项目的初始配置。

1、Vue CLI简介

Vue CLI是一个基于Vue.js进行快速开发的完整系统。新版本的Vue CLI的包名由原来的vue-cli改成了@vue/cli。

Vue CLI有几个独立的部分，下面分别进行介绍。

  1. CLI

    CLI是全局安装的npm包，提供了一些vue命令。通过vuecreate命令可以快速搭建一个新项目，通过vue serve命令可以构建新想法的原型，通过vue ui命令可以使用图形化界面来管理项目。

  2. CLI服务

    CLI服务(@vue/cli-service)是一个开发环境依赖，它是一个npm包，本地安装在@vue/cli创建的每个项目中。CLI服务构建于webpack和webpack-dev-server之上，包含以下内容：

    • 加载其他CLI插件的核心服务。
    • 一个为绝大部分应用优化过的内部webpack配置。
    • 项目内部的vue-cli-service命令，提供serve、build和inspect命令。

  3. CLI插件

    CLI插件是向Vue项目提供可选功能的npm包。在项目内部运行vue-cli-service命令时，它会自动解析并加载package.json文件中列出的所有CLI插件。CLI插件可以作为项目创建过程的一部分，也可以后期加入项目中。

2、Vue CLI的安装

Vue CLI是应用node编写的命令行工具，需要进行全局安装。如果想安装它的最新版本，需要在命令提示符窗口中输入如下命令：

shell 复制代码 
 npm install -g @vue/cli

如果想安装@vue/cli的指定版本，可以在上述命令的最后添加"@"符号，在"@"符号后添加要安装的版本号。例如，要安装@vue/cli 5.0.6版本，输入如下命令：

npm install -g @vue/cli@5.0.6

安装完成之后，可以在命令行中执行如下命令来检查版本是否正确，并验证Vue CLI是否安装成功：

js 复制代码 
vue --version

如果在窗口中显示了Vue CLI的版本号，则表示安装成功。

3、创建项目

使用Vue CLI创建项目有两种方式，一种是使用vuecreate命令进行创建，另一种是通过vue ui命令启动图形界面进行创建。

3.1、使用vue create命令

在命令提示符窗口中，选择好项目的存储目录。使用vuecreate命令创建一个名称是myapp的项目，输入如下命令：

shell 复制代码 
vue create myapp

执行命令后，会提示选择一个preset（预设）​。一共有3个选项，前两个选项是默认设置，适合快速创建一个项目的原型。第3个选项"Manually select features"需要手动对项目进行配置。这里使用方向键↓选择"Manually select features"选项，如图所示。

按Enter键，此时会显示项目的配置选项。这些配置选项的说明如表所示。

选项 说明
Babel 转码器，用于将ES6代码转换为ES5代码
TypeScript 微软开发的开源编程语言，编译出来的JavaScript可用于任何浏览器
Progressive Web App(PWA) Support 支持渐进式Web应用程序
Router 路由管理
Vuex Vue的状态管理器
CSS Pre-processors CSS预处理器（如Less）
Linter / Formatter 代码风格检查和格式校验
Unit Testing 单元测试
E2E Testing 端到端测试

通过键盘中的上下方向键进行移动，应用空格键进行选择，这里保持默认的Babel和Linter /Formatter的选中状态，如图所示。

按Enter键，此时会提示选择项目中使用的Vue的版本，这里选择默认的3.x版本，如图所示。

按Enter键，此时会提示选择代码格式和校验选项的配置。第一个选项是指ESLint仅用于错误预防，后三个选项是选择ESLint和哪一种代码规范一起使用。这里选择默认选项，如图所示。

按Enter键，此时会提示选择代码检测方式，这里选择默认选项"Lint on save"​（保存时检测）​，如图所示。

按Enter键，此时会提示选择配置信息的存放位置。第一个选项是指在专门的配置文件中存放配置信息，第二个选项是将配置信息存储在package.json文件中。这里选择第一个选项，如图所示。

按Enter键，此时会询问是否保存当前的配置。如果选择了保存，以后再创建项目时，就会出现保存过的配置，直接选择该配置即可。输入y表示保存，如图所示。

按Enter键，此时会提示为当前配置定义一个名字，如图所示。

输入名字后按Enter键开始选择使用包管理器，yarn或npm，这里选择npm。

按Enter键开始创建项目。创建完成后的效果如图所示。

根据提示在命令提示符窗口中输入命令cd myapp切换到项目目录，然后输入命令npm run serve运行项目。项目运行后，在浏览器中访问http://localhost:8080/，生成的页面如图所示。

要终止项目的运行，在命令提示符窗口中按Ctrl+C组合键即可。

接下来做一个简单的修改。打开src/App.vue文件，将传递给组件的msg属性的值修改为"快使用Vue CLI构建你的项目吧"​，代码如下：

html 复制代码 
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="快使用Vue CLI构建你的项目吧"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

保存文件后，浏览器会自动刷新页面，结果如图所示。

在应用Vue CLI脚手架创建项目之后，可以根据实际的需求对项目中的文件进行修改，从而构建比较复杂的应用。

3.2、使用图形界面

使用图形界面创建项目需要使用vue ui命令。在命令提示符窗口中输入vue ui命令，按Enter键后，会在浏览器窗口中打开创建Vue项目的图形界面管理程序。在管理程序中可以创建新项目、管理项目、配置插件和执行任务等。通过图形界面创建新项目的界面如图所示。

左上角选择项目管理器->新建项目：

根据图形界面中的提示，就可以分步完成项目的创建。

4、项目结构

前面通过Vue CLI创建的项目在创建完成后，在当前目录下会自动生成项目文件夹myapp。项目目录结构如图所示。

下面对几个关键的文件代码进行解析，包括src文件夹下的App.vue文件和main.js文件、public文件夹下的index.html文件。

4.1、App.vue文件

该文件是一个单文件组件，在文件中包含了模板代码、组件代码和CSS样式规则。代码如下：

html 复制代码 
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="快使用Vue CLI构建你的项目吧"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在上述代码中，使用import语句引入了HelloWorld组件，并且在<template>元素中使用了该组件。

App组件是项目的根组件。在实际开发中，可以修改代码中的import语句，将引入的组件替换为其他组件即可。

4.2、main.js文件

该文件是程序入口的JavaScript文件，主要用于加载公共组件和项目需要用到的各种插件，并创建Vue的根实例。代码如下：

js 复制代码 
import { createApp } from 'vue'
import App from './App.vue'

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

在上述代码中，使用import语句引入createApp。与HTML文件中使用<script>标签引入Vue的js文件不同，使用Vue CLI创建的项目，引入模块都采用这种方式。

4.3、index.html文件

该文件为项目的主文件，文件中有一个id属性值为app的div元素，组件实例会自动挂载到该元素上。代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

5、编写一个单文件组件

将一个组件的HTML、JavaScript和CSS应用各自的标签写在一个文件中，这样的文件即为单文件组件。单文件组件是Vue自定义的一种文件，以.vue作为文件的扩展名。

下面以之前创建的项目myapp为基础，通过一个实例来说明如何在应用中使用单文件组件。

示例：输出电影信息。

在项目中使用单文件组件定义电影信息，包括电影图片、电影名称和电影简介。具体步骤如下。

  1. 在src/assets文件夹下新建images文件夹，并存入一张图片ald.jpg。

  2. 在src/components文件夹下创建MyMovie.vue文件，代码如下：

html 复制代码 
<template>
    <div>
       <img :src="imgUrl">
       <div class="movie_name1">电影名称：{{name}}</div>
       <div class="movie_des1">电影简介：{{ intro }}</div>
    </div>
</template>

<script>
    export default{
        data() {
            return {
                imgUrl: require('@/assets/images/ald.jpg'),
                name: '阿拉丁',
                intro: '超越原版动画的真人电影'
            }
        }
    }

</script>

<style scoped lang="scss">
    body{
        font-family: 微软雅黑;
    }
    img{
        width: 30px;
    }
    .movie_name{
        padding-left: 10px;
        font-style: 18px;
        color: #333;
        margin-top: 8px;
    }
    .movie_des{
        padding-left: 10px;
        font-style: 14px;
        margin-top: 5px;
    }
</style>

在默认情况下，单文件组件中的CSS样式是全局样式。如果需要使CSS样式仅在当前组件中生效，需要设置<style>标签的scoped属性。

  1. 打开App.vue文件，将HelloWorld组件替换为MyMovie组件。修改后的代码如下：
html 复制代码 
<template>
  <MyMovie></MyMovie>
</template>

<script>
import MyMovie from './components/MyMovie.vue';

export default {
  name: 'App',
  components: {
    MyMovie
  }
}
</script>

import语句中的"@"表示src目录，该字符可以简化路径。引入的MyMovie组件可以不写扩展名.vue，因为项目内置的webpack可以自动添加扩展名.vue。

运行项目，在浏览器中访问http://localhost:8080/，输出结果如图所示。

相关推荐
禅思院2 小时前
总篇：异步组件加载的演进之路
前端·架构·前端框架
我的世界洛天依2 小时前
洛天依讲编程：调音教学｜调性 ——MIDI 里的「钩子函数」
linux·前端·javascript
IT_陈寒2 小时前
JavaScript性能优化完全指南
前端·人工智能·后端
上海云盾-小余2 小时前
游戏账号盗刷、数据篡改防护全攻略：前端加密 + 后端 WAF 双重加固
前端·游戏
Cobyte2 小时前
7.响应式系统比对：手写一个响应式状态库并应用在 React 上
前端·javascript·vue.js
渔舟小调2 小时前
P18 | Element Plus 通用 CRUD 页面模板：一个模板覆盖 80% 管理页面
javascript·vue.js·elementui
深海鱼在掘金2 小时前
2026年前端开发工程师转型AI Agent开发工程师全指南
前端·人工智能
Beginner x_u2 小时前
前端八股整理｜浏览器｜高频小题 01
前端
恋猫de小郭2 小时前
Copilot 下架 opus ，Qwen 开始按量计费，GLM 限制非代码使用，Token都在涨价，人还比 Token 便宜吗？
前端·人工智能·ai编程
热门推荐
012026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点032026年4月AI大事件深度解读：大模型竞争进入“深水区“042026 年 AI 编程助手全面对比评测：Cursor vs Copilot vs Claude Code vs GitHub Copilot Free05近期有什么ai的新消息，新动态？ 2026.4月06AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析07Claude Code Windows 兼容性问题：指定版本 2.1.112 可解决08从限购到畅通：GLM-5.1 Coding Plan接入攻略09UBUNTU Claude Code 报错 claude native binary not installed10免费！不限量！用opencode接入英伟达（NVIDIA）大模型，轻松打造你的 AI 编程助手