前端 vue 安装指南：深入浅出，轻松上手

2023-11-26 21:19:29

Vue.js：初学者在 Windows 上的安装和演示

安装 Vue.js

1. 安装 Node.js

Vue.js 依赖 Node.js，一个 JavaScript 运行时环境。前往 Node.js 官网下载并安装与您的操作系统兼容的版本。

2. 安装 npm

npm 是 Node.js 的包管理器。如果您尚未安装，请运行：

npm install -g npm

3. 安装 Vue CLI

Vue CLI 是一个命令行工具，用于创建和管理 Vue.js 项目。运行：

npm install -g @vue/cli

4. 创建 Vue.js 项目

使用 Vue CLI 创建一个新的 Vue.js 项目：

vue create vue-project

创建演示项目

1. 导航到项目目录

cd vue-project

2. 运行项目

npm run serve

3. 打开浏览器

访问 http://localhost:8080 查看演示项目。

理解 Vue.js 的组件结构

演示项目中的 App.vue 文件是主组件。它包含以下部分：

<template>： 声明 HTML 结构。
<script>： 定义 JavaScript 逻辑。
<style>： 声明 CSS 样式。

<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello World!'
    }
  }
}
</script>

<style>
#app {
  font-family: Arial, sans-serif;
  text-align: center;
}
</style>