Vue入门:构建你的第一个Vue应用程序

简介: 【4月更文挑战第22天】Vue.js 入门教程:安装 Node.js 和 npm,使用 Vue CLI (`npm install -g @vue/cli`) 创建项目,选择预设或自定义配置。在 `src/components/` 创建 `HelloWorld.vue` 组件,显示数据属性。在 `App.vue` 中引入并注册组件,启动开发服务器 (`npm run serve`) 预览。开始你的 Vue 之旅!

在前端开发的世界中,Vue.js 以其轻量级、高性能和易用性著称。对于初学者来说,学会构建一个基础的 Vue 应用程序是迈向前端开发之路的关键一步。本文将引导您通过一系列步骤来创建您的第一个 Vue 应用。

准备工作

在开始之前,确保您的环境满足以下条件:

  • 安装了最新版本的 Node.js (推荐使用 Node Version Manager, nvm, 来管理不同版本的 Node)
  • 安装了 npm (Node.js 自带的包管理器)

您可以在命令行中输入 node -vnpm -v 来检查它们的版本。

安装 Vue CLI

Vue CLI 是一个官方发布的脚手架工具,可以帮助我们快速生成 Vue 项目结构。在终端中运行以下命令来全局安装它:

npm install -g @vue/cli
# 或者使用 yarn
yarn global add @vue/cli

安装完成后,您可以通过 vue --version 来确认其安装成功。

创建一个 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目非常简单。打开您的终端,运行以下命令:

vue create my-first-vue-app

这里的 my-first-vue-app 是您应用的名称,您可以根据喜好进行修改。

接着,CLI 会提示您选择预设配置。对于初学者,推荐选择 "Manually select features" 以便自定义配置。您可以使用方向键选择,然后按回车键确认。

接下来,选择需要的功能,比如 Babel、Router、Vuex 等。对于入门项目,建议至少勾选 "Babel" 和 "Linter / Formatter"。选择完毕后,CLI 将自动为您安装相关依赖并创建项目。

项目结构概览

进入项目文件夹:

cd my-first-vue-app

在此处,您会看到以下目录结构:

  • node_modules/ - 项目的依赖库
  • public/ - 公共资源文件夹,包含 index.html
  • src/ - 源代码文件夹,我们将在这里编写 Vue 代码
    • assets/ - 资源如样式、图片等
    • components/ - Vue 组件文件夹
    • App.vue - 主组件文件
    • main.js - 入口文件

编写第一个组件

src/components/ 目录下创建一个名为 HelloWorld.vue 的新文件,并写入以下内容:

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

<script>
export default {
  data() {
    return {
      message: '欢迎来到 Vue.js!'
    }
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

这里,我们定义了一个名为 message 的数据属性,并在模板中使用插值将其显示出来。scoped 样式表示这些样式只作用于当前组件。

在 App 组件中使用它

接下来,打开 src/App.vue 文件,并用以下内容替换其内容:

<template>
  <div id="app">
    <HelloWorld />
  </div>
</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>

这里,我们导入了刚刚创建的 HelloWorld 组件并将其注册到 App 组件的 components 对象中。然后在模板中使用 <HelloWorld /> 标签来实例化它。

启动开发服务器

现在,我们可以启动开发服务器来预览我们的应用了。在终端中运行以下命令:

npm run serve
# 或者使用 yarn
yarn serve

一旦服务器启动成功,打开浏览器并访问 http://localhost:8080。你应该能看到页面上显示着 "欢迎来到 Vue.js!"。

总结

恭喜您!您已经成功构建并运行了您的第一个 Vue 应用程序。在这个过程中,您了解了如何设置开发环境、使用 Vue CLI、创建组件以及在应用中注册和使用组件。这只是 Vue.js 旅程的开始,您还有更多强大的功能等着去探索。继续实践,不断学习,很快您就可以创建更复杂和有趣的 Vue 应用了。

相关文章
|
2天前
|
存储 缓存 JavaScript
谈谈你对vue的了解
谈谈你对vue的了解
12 3
|
3天前
|
JavaScript API
Vue axjx 跨域请求
Vue应用中解决跨域问题可通过配置代理服务器。方法一是设置`devServer.proxy`到目标服务器端口,如`http://localhost:3000`,然后使用axios发送请求。方法二是为多个代理配置,如`/api`和`/api2`,分别指向不同端口,利用`pathRewrite`重写路径。请求时需加上相应前缀,如`/api/index`。
11 1
|
3天前
|
JavaScript 前端开发 Java
JavaSE精选-Vue
JavaSE精选-Vue
7 1
|
3天前
|
JavaScript
vue知识点
vue知识点
16 2
|
3天前
|
JavaScript
Vue父子组件传值
<!-- 父组件向子组件传地值 -->
14 2
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
993 0
|
10天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
30 0
|
11天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
4天前
|
JavaScript Java
Vue : v-if, v-show
Vue : v-if, v-show
13 0
Vue : v-if, v-show
|
4天前
|
JavaScript 前端开发
Vue : 监视属性
Vue : 监视属性
9 0