Vue.js 是什么

起步

安装

尝试 Vue.js 最简单的方法是使用 SFC Playground。您可以在浏览器新标签页中打开它，跟着例子自己进行一些尝试。

环境准备

VS Code 安装

• 安装 VS Code

开发指南

1. 使用 VS Code 打开项目文件夹。

   提示

   请打开 VS Code 选择菜单栏中的 “文件-打开文件夹”，或在文件夹上 “右键——使用 VS Code 打开” 或在文件夹内部空白处 “右键——使用 VS Code 打开”。

2. 打开终端(快捷键 Ctrl + ` )。

3. 在终端中输入相关指令即可执行相关功能。

介绍

Vue 的单文件组件 (即 *.vue 文件，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。下面是一个单文件组件的示例：

<script>
export default {
  data() {
    return {
      greeting: "Hello World!",
    };
  },
};
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

Mr.Song 已为 inNENU Website 开发了一些常规组件。本文介绍了这些组件的配置。

Vue.js 是什么

观看本节视频讲解

起步

观看本节视频讲解

环境准备

VS Code 安装

• 安装 VS Code

开发指南

1. 使用 VS Code 打开项目文件夹。

   提示

   请打开 VS Code 选择菜单栏中的 “文件-打开文件夹”，或在文件夹上 “右键——使用 VS Code 打开” 或在文件夹内部空白处 “右键——使用 VS Code 打开”。

2. 打开终端(快捷键 Ctrl + ` )。

3. 在终端中输入相关指令即可执行相关功能。

介绍

Vue 的单文件组件 (即 *.vue 文件，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。下面是一个单文件组件的示例：

<script>
export default {
  data() {
    return {
      greeting: "Hello World!",
    };
  },
};
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

创建一个项目

在尝试了单文件的快速开发后，我们就可以开始真正创建一个项目。

vue create

运行以下命令来创建一个新项目:

vue create hello-world

Index 文件

public/index.html 文件是一个会被处理的模板。在构建过程中，资源链接会被自动注入。另外，Vue CLI 也会自动注入打包好的 JavaScript 和 CSS 文件的资源链接。它会最终成为 Vue 应用的页面。

处理静态资源

静态资源可以通过两种方式进行处理:

• 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。

• 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供:

• 通过 @vue/cli 搭建交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖:
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。