Vue.js 安装学习笔记

Vue.js 是一款流行的 JavaScript 前端框架，它能够轻松实现组件化开发，提高开发效率。在本文中，我们将学习如何安装 Vue.js 并创建一个简单的示例项目。

安装 Vue.js

首先，我们需要在终端中使用 npm 命令安装 Vue.js：

bashCopy Code
npm install vue

安装完成后，我们可以在项目中使用 Vue.js 的各种功能。

创建 Vue 项目

创建 Vue 项目非常容易。我们可以使用 Vue CLI 工具快速创建一个全新的 Vue 项目：

首先，需要安装 Vue CLI：
```
bashCopy Code
npm install -g @vue/cli
```
然后，在终端中使用以下命令创建一个新项目：
```
bashCopy Code
vue create my-project
```
其中，“my-project”是你自己想要取的项目名称。
等待一段时间，命令行提示符会让你选择一些选项来配置你的项目。按照提示进行选择即可。
最后，在终端中使用以下命令进入项目目录：
```
bashCopy Code
cd my-project
```

编写 Vue 示例代码

我们可以在创建的 Vue 项目中的 "src/App.vue" 文件中编写示例代码：

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

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

<style>
h1 {
  color: blue;
}
</style>

这段代码创建了一个简单的 Vue 应用程序，它在页面上显示了一个标题。当你在浏览器中打开 "http://localhost:8080" 时，你应该可以看到一个蓝色标题，上面写着“Hello, Vue!”。

运行 Vue 示例代码

最后，我们使用以下命令在本地启动 Vue 项目：

bashCopy Code
npm run serve

现在，在浏览器中打开 "http://localhost:8080" 就可以看到你编写的 Vue 示例代码啦！