vuejs2开始使用vuejs2


备注

Vue.js 2.X是一个快速,轻量级的框架,用于在Javascript中构建用户界面。它在很多方面与Angular和React类似,并且像这些库可以用于为更大的应用程序提供视图层(MVC中的V),或者(与其他工具结合使用)来创建功能齐全的单个页面Web应用程序。

然而,Vue采用比Angular或React更小的方法;它更多地依赖于传统的Web技术(例如,它允许JSX,但鼓励HTML中的模板化)以及使用外部库来补充其核心功能。这使得它比许多其他框架更快地学习,并允许开发人员继续使用他们的首选工具来完成Vue中的任务。

熟悉其他前端框架的Web开发人员将在Vue中找到许多熟悉的功能,从基于组件的范例和虚拟DOM到带有v-ifv-showv-hide等指令的条件渲染。这些功能与单页模板和计算组件属性等创新相结合。

Vue 2.X保留了1.X的90%的API,其中最重要的变化涉及重命名组件生命周期钩子以及删除对片段组件实例的支持。 迁移助手可供希望从早期版本的Vue升级的开发人员使用。

“你好,世界!”程序

它类似于Vue.js版本1,版本2可以直接嵌入到单个html文件中。
要在html文件中包含Vue.js2,请确保HTML中包含脚本文件。例如,使用以下HTML。它应该正确显示Hello消息。

<div id="app">{{message}}</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
<script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js2'
      }
    })
</script>
 

请参阅此示例的jsfiddle 演示

Hello World:vue-cli入门

  1. 安装vue-cli:

    npm install -g vue-cli
     
  2. 开始一个项目,如:

     vue init <template> <project-name>
     

    其中<template>

    1. webpack - 一个功能齐全的Webpack + vue-loader设置,具有热重载,linting,测试和css提取功能。

    2. webpack-simple - 一个简单的Webpack + vue-loader设置,用于快速原型设计。

    3. browserify - 具有热重载,linting和单元测试功能的全功能Browserify + vueify设置。

    4. browserify-simple - 一个简单的Browserify + vueify设置,用于快速原型设计。

    5. simple - 单个HTML文件中最简单的Vue设置

    对于这个例子,我将使用webpack

  3. vue-cli 将让你经历一系列是/否问题,之后你将准备好一个带脚手架的项目。

  4. cd 到项目目录,它是<project-name>vue init <template> <project-name> 和运行npm install

  5. 安装完成后,运行npm run dev

您的hello world应用程序已准备就绪!