初学者入门 Vue.js

Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面和单页应用程序。它以简单、灵活和易于与其他库或项目集成而闻名。对于想要以最少的努力构建动态 Web 应用程序的初学者和经验丰富的开发人员来说，Vue.js 是一个绝佳的选择。

设置您的第一个 Vue.js 项目

要开始使用 Vue.js，您需要设置开发环境。最简单的方法是使用 Vue CLI（命令行界面），它可以帮助您创建和管理 Vue.js 项目。请按照以下步骤设置您的第一个 Vue.js 项目：

安装 Node.js 和 npm：Vue.js 需要在您的系统上安装 Node.js 和 npm（Node 包管理器）。您可以从官方 Node.js 网站下载并安装它们。
安装 Vue CLI： 安装 Node.js 和 npm 后，打开终端或命令提示符并运行以下命令以全局安装 Vue CLI：

npm install -g @vue/cli

创建一个新的 Vue 项目： 安装 Vue CLI 后，通过运行以下命令创建一个新的 Vue.js 项目：

vue create my-vue-app

系统将提示您选择预设。对于初学者，请按 Enter 选择默认预设。Vue CLI 将创建一个名为 my-vue-app 的新文件夹并为您设置项目结构。

导航到项目文件夹： 通过运行以下命令转到项目文件夹：

cd my-vue-app

运行开发服务器： 要启动本地开发服务器并查看新的 Vue.js 应用程序，请运行：

npm run serve

此命令将在 http://localhost:8080（或其他可用端口）启动开发服务器。打开浏览器并导航到此 URL 以查看 Vue.js 应用程序的运行情况！

了解 Vue.js 项目结构

新创建的 Vue.js 项目具有组织良好的结构。以下是最重要的文件和文件夹的快速概览：

src: 此文件夹包含应用程序的源代码。所有 Vue 组件、样式和其他资源都放在此处。
public: 此文件夹包含静态资产，例如图像、字体和 index.html 文件。 index.html 文件可作为应用程序的入口点。
src/main.js: 此文件是 Vue.js 应用程序的入口点。它初始化 Vue 实例并将其挂载到 DOM。
src/App.vue: 这是您应用程序的根组件。您可以自定义此文件来创建应用程序的主布局。
src/components: 此文件夹包含示例 Vue 组件，例如 HelloWorld.vue。您可以在此文件夹中创建新组件并将其导入到您的应用程序中。

创建你的第一个 Vue.js 组件

Vue.js 是一个基于组件的框架，这意味着您的应用程序是使用可重复使用且独立的组件构建的。让我们创建一个简单的 Vue.js 组件来显示问候消息。

创建新组件： 在 src/components 文件夹中，创建一个名为 Greeting.vue 的新文件，并添加以下代码：

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
  </div>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

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

该组件分为三个部分：'<template>' 用于 HTML 标记，'<script>' 用于 JavaScript 逻辑，'<style>' 用于范围 CSS 样式。

导入并使用组件： 打开 src/App.vue 并修改它以导入并使用新的 Greeting 组件：

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

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

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

<style>
#app {
  text-align: center;
}
</style>

保存更改，您的开发服务器将自动重新加载。您现在应该会看到页面上显示的问候消息“Hello, Vue.js!”。

结论

您已成功设置 Vue.js 开发环境、创建新项目并构建第一个组件。Vue.js 是一个功能强大且灵活的框架，可让您快速创建动态且交互式的 Web 应用程序。随着您继续学习，您将发现更多高级功能，例如 Vue Router、Vuex 和 Composition API，这些功能将使您能够构建更强大的应用程序。

立即开始使用 Vue.js 构建并释放现代 Web 开发的全部潜力！

vuejs 设置组件 cli 安装项目模板脚本样式导入模块构建部署范围