Vue.js Vue CLI 安装与使用

Vue.js Vue CLI 安装与使用

今天我们来聊聊 Vue CLI 的安装与使用。对于开发 Vue 应用来说,Vue CLI 是一个非常强大的工具,它能帮助你快速创建项目脚手架、配置开发环境、自动化构建流程,从而大大提高开发效率。下面我就和大家一步一步地讲解如何安装和使用 Vue CLI。

什么是 Vue CLI?

Vue CLI 是 Vue.js 的官方脚手架工具,它提供了一个基于命令行的界面,能够让你快速生成一个结构清晰、功能齐全的 Vue 项目。无论你是初学者还是经验丰富的开发者,Vue CLI 都能帮助你减少繁琐的配置工作,让你专注于业务逻辑的开发。

安装 Vue CLI

在开始之前,请确保你已经安装了 Node.js 和 npm。打开终端,输入下面的命令来检查它们是否已安装:

bash 复制代码
node -v
npm -v

如果显示版本号,就说明安装成功了。接下来,我们就可以全局安装 Vue CLI 了。打开终端,执行以下命令:

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

安装完成后,你可以输入下面的命令检查 Vue CLI 是否安装成功:

bash 复制代码
vue --version

如果看到版本号,例如 5.x.x,就表示 Vue CLI 已经安装成功!

创建你的第一个 Vue 项目

安装好 Vue CLI 后,你就可以使用它来创建一个新的 Vue 项目。输入下面的命令:

bash 复制代码
vue create my-vue-app

这里,"my-vue-app" 是你项目的名称,你可以换成任何你喜欢的名字。接下来,CLI 会让你选择预设配置。对于新手来说,选择默认配置(Default)是一个不错的选择,直接回车即可。CLI 会自动下载依赖并生成项目结构,这个过程可能需要几分钟。

创建成功后,你会看到类似下面的信息:

复制代码
🎉  Successfully created project my-vue-app.
👉  Get started with the following commands:
   $ cd my-vue-app
   $ npm run serve

按照提示进入项目目录并启动开发服务器:

bash 复制代码
cd my-vue-app
npm run serve

启动后,你可以在浏览器中访问 http://localhost:8080 ,就能看到 Vue 应用的欢迎页面啦!

项目结构简介

进入项目目录后,你会看到 Vue CLI 自动生成的项目结构。主要目录和文件包括:

  • node_modules/:存放项目依赖。
  • public/:静态资源目录。
  • src/ :项目源代码目录,主要开发代码都在这里。
    • main.js:应用入口文件,负责初始化 Vue 实例并挂载到 DOM 上。
    • App.vue:项目的根组件。
    • components/:存放各种 Vue 组件。
  • package.json:项目配置信息,记录了依赖、脚本等信息。

这种清晰的目录结构能帮助你快速找到需要修改的代码,同时也方便团队协作。

自定义和配置 Vue CLI

Vue CLI 不仅可以快速生成项目骨架,还支持对项目进行灵活配置。例如,你可以通过命令行选择 ESLint、Babel、TypeScript、PWA 等插件。创建项目时选择"Manually select features"选项,可以让你定制项目功能。此外,Vue CLI 还支持插件系统,你可以根据需求安装和配置额外的插件,进一步增强开发体验。

总结

  • Vue CLI 是一个非常强大的脚手架工具,可以帮助你快速创建 Vue 项目。
  • 安装步骤简单,只需全局安装 @vue/cli 并使用 vue create 命令生成项目。
  • 项目结构清晰,默认配置足以满足大多数入门需求,复杂项目可以选择自定义配置。
  • 启动项目后,你可以通过 npm run serve 进入开发模式,享受热更新等便捷功能。

希望这篇文章能帮助你快速上手 Vue CLI,开始你的 Vue 开发之旅!如果你有任何问题或经验分享,欢迎在评论中讨论哦!

相关推荐
清风ai明月9 小时前
vue模板语法中使用冒号: 什么时候使用,什么时候不使用呢?
前端·javascript·vue.js
少卿9 小时前
uniapp run使用指南 - VSCode 开发 Uni-app 项目
前端·vue.js
剑亦未配妥9 小时前
Vue2函数式组件实战:手写可调用的动态组件,适用于toast轻提示、tip提示、dialog弹窗等
前端·vue.js·vue
zoahxmy09299 小时前
Vue3 视频播放与截图功能实现
javascript·vue.js
waylon111139 小时前
【HOC】高阶组件在Vue老项目中的实战应用 - 模块任意排序
前端·vue.js·面试
DJA_CR9 小时前
解决在 TSX 中使用 `RouterView` + `KeepAlive` 不生效问题
前端·vue.js
小旋风012349 小时前
封装可拖动弹窗(vue jquery引入到html的版本)
vue.js·html·jquery
gongzemin10 小时前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
麦麦大数据10 小时前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
三翼鸟数字化技术团队12 小时前
Vue自定义指令最佳实践教程
前端·vue.js