《Vue-CLI 强势来袭!2024 前端新潮流,从 0 到 1 快速入门,开启高效 Vue 项目开发奇幻之旅》

简介: 【8月更文挑战第21天】在前端开发领域,Vue.js 因其简洁高效广受欢迎。本文引导你快速掌握 vue-cli,轻松启动 Vue 项目。首先全局安装 vue-cli (`npm install -g @vue/cli`) 并验证安装 (`vue --version`)。接着使用 `vue create my-project` 创建项目,选择预设配置。项目结构清晰,包含源码、静态资源及依赖。运行 `npm run serve` 启动本地服务器,即可在浏览器预览。最后,通过简单示例代码展示组件创建与引用。跟随本文,你将迅速上手 vue-cli,开始 Vue 开发之旅。

在当今的前端开发领域,Vue.js 以其简洁、高效的特点受到了广泛的欢迎。而 vue-cli 是一个快速构建 Vue 项目的强大工具。本文将带你从 0 到 1 快速入门 vue-cli,让你轻松开启 Vue 项目开发之旅。

一、安装 vue-cli

首先,确保你已经安装了 Node.js 和 npm。打开终端,输入以下命令安装 vue-cli:

npm install -g @vue/cli

安装完成后,可以通过以下命令检查版本,以确认安装成功:

vue --version

二、创建项目

安装好 vue-cli 后,就可以使用它来创建项目了。在终端中,进入你想要创建项目的目录,然后输入以下命令:

vue create my-project

这里的“my-project”是你项目的名称,可以根据实际情况进行修改。执行命令后,vue-cli 会提供一些预设选项,你可以根据自己的需求进行选择。例如,你可以选择默认的“default”预设,或者选择“Manually select features”来手动选择需要的功能。

三、项目结构

创建项目后,我们来看一下项目的结构:

my-project
├── node_modules
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   ├── components
│   ├── App.vue
│   └── main.js
├──.gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

其中,“public”目录下存放着静态资源,如 favicon.ico 和 index.html 文件。“src”目录是项目的源代码目录,包含了组件、资产、入口文件等。“node_modules”目录存放着项目的依赖包。

四、运行项目

在项目目录下,输入以下命令来运行项目:

npm run serve

项目会在本地启动一个开发服务器,你可以在浏览器中访问 http://localhost:8080 来查看项目。

五、示例代码

下面是一个简单的 Vue 组件示例:

在“src/components”目录下创建一个名为“HelloWorld.vue”的文件,内容如下:

<template>
  <div>
    <h1>{
  { message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

然后在“src/App.vue”文件中引入这个组件:

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

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

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

通过以上步骤,你已经成功创建了一个 Vue 项目,并运行了起来。在实际开发中,你可以根据自己的需求不断扩展和完善项目。希望本文能帮助你快速入门 vue-cli,开启精彩的 Vue 开发之旅。

相关文章
|
4月前
|
JavaScript 前端开发
vue3教程,如何手动获取后端数据(入门到精通3,新人必学篇)
本文提供了一个Vue 3教程,讲解了如何使用axios库手动从后端获取数据,包括安装axios、配置后端访问地址、编写路由地址、发起HTTP请求以及在组件中读取和打印响应数据的步骤。
687 0
vue3教程,如何手动获取后端数据(入门到精通3,新人必学篇)
|
4月前
|
JavaScript
vue3完整教程从入门到精通(新人必学2,搭建项目)
本文介绍了如何在Vue 3项目中安装并验证Element Plus UI框架,包括使用npm安装Element Plus、在main.js中引入并使用该框架,以及在App.vue中添加一个按钮组件来测试Element Plus是否成功安装。
146 0
vue3完整教程从入门到精通(新人必学2,搭建项目)
|
6月前
|
缓存 监控 JavaScript
vue从安装到熟练 2022流畅无痛版(第一季:入门篇)
该文章是《vue从安装到熟练 2022流畅无痛版》系列的第一季入门篇,介绍了Vue的基本概念、环境配置、项目创建与运行,并通过修改HelloWorld.vue和App.vue文件内容展示了如何在页面上显示"Hello World",最后还提供了Vue官方文档链接和介绍了Vue的常用内置指令和模板语法等基础知识。
vue从安装到熟练 2022流畅无痛版(第一季:入门篇)
|
6月前
|
JavaScript 前端开发 开发者
Vue.js的未来已来:掌握最新功能,驾驭前端开发的新浪潮!
【8月更文挑战第30天】Vue.js作为前端开发领域的明星框架,凭借其轻量级、响应式及组件化特性,深受全球开发者喜爱。它持续进化,引入新功能并优化性能,如提升渲染速度和减小打包体积,增强TypeScript支持,简化组件编写流程,进一步提升应用响应性和加载速度,改善开发者体验。活跃的社区和丰富的开源项目如“vuejs-challenges”推动其不断发展。未来,Vue.js将探索更多新特性,如宏和非虚拟DOM模式,巩固其在现代前端框架中的领先地位。
84 0
|
6月前
|
JavaScript 前端开发 测试技术
Vue.js开发者必看!Vue Test Utils携手端到端测试,打造无懈可击的应用体验,引领前端测试新风尚!
【8月更文挑战第30天】随着Vue.js的普及,构建可靠的Vue应用至关重要。测试不仅能确保应用质量,还能提升开发效率。Vue Test Utils作为官方测试库,方便进行单元测试,而结合端到端(E2E)测试,则能构建全面的测试体系,保障应用稳定性。本文将带你深入了解如何使用Vue Test Utils进行单元测试,通过具体示例展示如何测试组件行为;并通过Cypress进行E2E测试,确保整个应用流程的正确性。无论是单元测试还是E2E测试,都能显著提高Vue应用的质量,让你更加自信地交付高质量的应用。
105 0
|
前端开发
前端学习笔记202305学习笔记第二十一天-vue3.0-产品开发流程2
前端学习笔记202305学习笔记第二十一天-vue3.0-产品开发流程2
53 0
|
9月前
|
自然语言处理 JavaScript 前端开发
【前端学习指南】第一站 Vue 生命周期初探
【1月更文挑战第26天】【前端学习指南】第一站 Vue 生命周期初探
|
9月前
|
前端开发 JavaScript 大数据
❤️[前端学习]大数据全栈工程师之一文快速上手vue3❤️
❤️[前端学习]大数据全栈工程师之一文快速上手vue3❤️
100 0
|
前端开发
前端学习笔记202305学习笔记第二十一天-vue3.0-产品开发流程1
前端学习笔记202305学习笔记第二十一天-vue3.0-产品开发流程1
51 0
|
设计模式 开发框架 JavaScript
了解Vue框架的大致学习方向(第一课)(一)
了解Vue框架的大致学习方向(第一课)(一)
86 0