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 开发之旅!如果你有任何问题或经验分享,欢迎在评论中讨论哦!

相关推荐
江城开朗的豌豆27 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆32 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
试图让你心动11 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_11 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏11 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
小毛驴85013 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
JSON_L16 小时前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊16 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js
奇舞精选17 小时前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly
Britney⁺♛&?ꪶꪫꪜꫀ20 小时前
Vue2上
vue.js·npm