详解如何运行vue项目

下面是详解如何运行 Vue 项目的完整攻略。

环境准备

在运行 Vue 项目之前，我们需要先准备好开发环境，主要包括以下三个部分：

Node.js

Vue 项目需要 Node.js 环境支持，请先安装 Node.js，安装方法可以参考Node.js官方网站。

Vue CLI

Vue CLI 是 Vue.js 官方提供的脚手架工具，用于初始化和快速搭建 Vue.js 项目。安装 Vue CLI，可以通过以下命令：

npm install -g @vue/cli

安装过程完成后，可以通过以下命令验证是否安装成功：

vue --version

Code Editor

在准备好 Node.js 和 Vue CLI 后，我们还需要选择一个合适的编辑器进行开发。常用的编辑器有 VS Code、Sublime Text、Atom 等，这里以 VS Code 为例。

创建 Vue 项目

安装好上述环境后，我们就可以开始创建 Vue 项目了。通过以下命令创建一个新的 Vue 项目：

vue create my-project

"my-project"是你项目的名称，你可以自定义。

Vue CLI 会询问一些配置选项，比如选择预设、是否使用ESLint等。按需选择即可。

等待 Vue CLI 完成项目初始化后，我们就可以进入到项目的目录，查看项目文件结构。

cd my-project
ls

运行 Vue 项目

完成了 Vue 项目的创建，我们就可以运行它了。运行 Vue 项目有两种方式：

1. 通过命令行运行

我们可以通过命令行运行一个开发服务器，来进行开发调试：

npm run serve

这个命令会启动一个在 http://localhost:8080 上监听的本地开发服务器，你可以在浏览器上访问它来预览你的项目。

2. 通过编辑器运行

VS Code 可以通过安装 Vue.js Extension Pack 这个插件，来支持运行 Vue 项目。

安装完成后，可以在 VS Code 的侧边栏中找到 "Explorer" 面板，展开 "Vue" 下的 "my-project"，点击 "public" 目录下的 "index.html" 文件，在浏览器中打开即可。

示例说明

下面是两个示例说明：

示例一：HelloWorld

以 HelloWorld 为例，使用 Vue CLI 创建一个新项目：

vue create hello-world

默认选择了 "Default ([Vue 2] babel, eslint)" 预设，然后一路回车即可。创建完成后，进入到项目目录，并启动开发服务器：

cd hello-world
npm run serve

在浏览器中访问 http://localhost:8080，可以看到 Vue 的欢迎页面。

示例二：TodoList

以 TodoList 为例，我们可以手动创建一个 Vue 项目，并添加一个简单的 TodoList 功能。

mkdir todo-list
cd todo-list

创建项目文件：

创建 index.html 文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Todo List</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="(todo, index) in todos" :key="index">{{ todo }}</li>
      </ul>
      <input type="text" v-model="inputValue">
      <button @click="addTodo">Add Todo</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
  </body>
</html>

创建 main.js 文件：

var app = new Vue({
  el: '#app',
  data: {
    todos: [],
    inputValue: ''
  },
  methods: {
    addTodo: function() {
      if (this.inputValue !== '') {
        this.todos.push(this.inputValue);
        this.inputValue = '';
      }
    }
  }
})