在5分钟内开始使用Vue.js

Vue(发音为/vjuː/,类似于视图)是用于构建用户界面的渐进框架。本教程将逐步介绍如何使用Vue.js进行安装和运行。 兴奋吗?

Vuejs功能

  • 服务器端渲染
  • 虚拟DOM
  • 反应数据绑定
  • 简单的API(易于学习

安装

Vuejs可以通过几种方式安装,我将重点介绍每种方式:

  • 使用CDN
  • 使用节点程序包管理器(NPM) $ npm install vue
  • 使用Bower $ bower install vue
  • 使用Vue-cli $ npm install -g vue-cli

就本教程而言,我将使用Vue-cli进行设置。 确保已安装节点和npm。

第一步:运行此代码来安装Vue-cli

$ npm install -g vue-cli

注意:您可以选择在上面的命令中省略-g,仅表示您正在全局安装vue cli。 现在我们已经安装了Vue,下一步就是启动一个新项目。

$ vue init webpack-simple

该命令的作用只是告诉vue将其所有依赖项安装到项目文件夹中,并且vue还预包装了一些模板,对于该项目,我们使用的是webpack-simple模板。

执行命令后,下一步是切换到新目录

$ cd exampleapp

然后通过运行以下命令安装npm依赖项:

$ npm install

安装npm后的最后一步是在开发模式下启动Web服务器,并执行以下命令:

$ npm run dev

运行npm run dev后的输出
示例应用

还有中提琴! 我们刚刚在不到5分钟的时间内创建了Vuejs应用。