图文详解Vue框架安装步骤

1. 确认运行环境

在安装Vue框架之前，需要先确认已经安装了node.js，并且其版本号为6以上。

可以通过以下命令来检查node.js的版本：

node -v

如果确认已经安装了node.js，那么就可以继续进行后续的操作了。

2. 安装Vue CLI

Vue CLI是专门用于Vue开发的脚手架工具，可以快速搭建Vue项目。

npm install -g @vue/cli

上面的命令会全局安装Vue CLI，安装完成之后，可以通过以下命令来检查是否安装成功：

vue --version

3. 创建Vue项目

安装完成Vue CLI之后，就可以使用它来创建一个新的Vue项目了。

vue create my-project

上面的命令会在当前目录下创建一个名为my-project的Vue项目。

在创建过程中，会提示你选择一些配置项，可以根据自己的需要进行选择。

如果不想手动选择配置项，可以通过以下命令来快速创建一个默认配置的Vue项目：

vue create my-project --default

4. 运行Vue项目

完成Vue项目的创建之后，可以使用以下命令来运行项目：

cd my-project
npm run serve

上面的命令会启动一个开发服务器，并且会自动打开浏览器，在浏览器中输入http://localhost:8080即可访问Vue应用。

示例1

我们可以创建一个简单的Vue项目来演示上述步骤：

vue create my-app

然后在项目根目录下创建一个HelloWorld.vue文件，内容如下：

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

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

最后，在App.vue文件中引入HelloWorld组件，并在模板中使用它：

<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./HelloWorld.vue";

export default {
  components: {
    HelloWorld
  }
};
</script>

运行项目，可以在页面中看到Hello World!这个文本。

示例2

我们可以通过Vue CLI快速生成一个默认配置的Vue项目：

vue create my-project --default

然后在src/components/目录下创建一个Counter.vue文件，内容如下：

<template>
  <div>
    <button @click="count++">点击增加</button>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  }
};
</script>

最后，在App.vue文件中引入Counter组件，并在模板中使用它：

<template>
  <div>
    <Counter />
  </div>
</template>

<script>
import Counter from "./components/Counter.vue";

export default {
  components: {
    Counter
  }
};
</script>

运行项目，可以在页面中看到一个点击增加按钮和一个0的文本，每点击一次按钮，数字就会加一。

以上就是安装和使用Vue框架的基本步骤和示例。