在 vue/react/angular 出现之前，前端开发是这样的：

• 在一个 html 文件里编写网页内容，
• 在一个 css 文件里编写样式，
• 在一个 js 文件里编写 js 代码去请求数据、控制页面内容

将 css 、js 引入到 html ，在三者的共同作用之下，我们就得到了想要的网页。

随着项目规模的变大，各个文件之间的关联会变得越来越复杂，我们的项目也会越来越难以维护。

现在，我们可以使用上述前端框架更方便地进行前端开发，我们可以：

• 对相同（类似）的页面元素进行复用
• 更容易地对数据的显示进行控制
• 统一管理各页面用到的所有数据
• 在大型项目中更好地组织、维护代码

接下来，我们了解一下如何用 Vue.js 快速创建一个 web 项目

1. 安装Node.js

安装 node 会同时为你的电脑安装 node 的包管理器 npm （01 - What is npm? | npm Documentation）

2. 全局安装命令行接口工具 vue-cli

1
2

# 安装 vue-cli
$ npm install --global vue-cli

vue-cli 可以帮你快速搭建一个初始的 vue 项目（无需关心搭建细节，专注于自己的业务代码）。

3. 通过 vue-cli 生成项目

1
2

# 使用 "webpack" 模板创建一个新项目
$ vue init webpack my-project

vue-cli 提供了一个终端命令：vue，这使得你可以通过 vue init 去生成一个项目

上面代码里的 webpack 部分是用来指定生成的项目所使用的模版。

• webpack是 web 前端的一个构建工具，在这里是指包含了这个构建工具的一套项目模版，vue-cli 还提供了其他模版。

最后的 my-project 显然就是项目文件夹（项目名称）。

4. 运行项目

1
2

$ cd my-project
$ npm run dev

进入项目根目录下，执行 npm run dev 即可启动项目。这个时候就可以在浏览器里看到一个初始的 vue 项目了。