Vue.js 2.0 轻松入门(一)

Vue — 渐进式 JavaScript 框架

介绍

Vue.js 是什么

vue.js 是一套构建用户界面的渐进式框架,采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

渐进式框架

Vue 分层设计,每层都可灵活的接入其他方案。

  1. Declarative Rendering -- 声明式渲染
  2. Component System -- 组件系统
  3. Client-Side Routing -- 客户端路由
  4. Large Scale State Management -- 状态管理
  5. Build System -- 构建系统

例如你不想使用 vue 的路由,可以自由替换为你喜欢或者熟悉的路由。而当你都想用官方的实现时,会发现都早已准备好,各层之间包括配套工具都能比接入其他方案更便捷地协同工作。

总结来说:vue 给你提供足够多的 options,但并不主张更多的 required。

安装 vue

vue 有两种安装方式,一种是直接在 html 中引用,另一种是通过脚手架工具进行安装。

直接在 html 中使用 vue

尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。或者你也可以创建一个本地的 .html 文件,然后通过如下方式引入 Vue:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

主要讲述下面这种安装方式,之后都是基于 vue-cli 构建的项目进行讲解。

通过 vue-cli 脚手架工具安装 vue

1.安装 Node.js

因为需要使用到 Node.js 的包管理工具 npm,所以先检查自己电脑是否安装了 node

node.js 的官方下载地址:点我进入 node.js 的官方下载地址

下载电脑系统对应文件,然后进行安装,安装成功之后通过命令行工具进入 node.js 安装目录。

如果还不了解命令行工具,建议先去百度搜索一下,先学习一些基本的命令再进行后面的操作,这里就不多做介绍了。

注:windows 系统命令行工具通过开始菜单输入 cmd 打开,mac 系统为终端。

1.1.替换 npm 镜像源

安装好 node.js 之后,npm 工具也随之安装了。

npmnode.js 自带的包管理工具,通过 npm 可以下载前端资源,默认镜像源为国外镜像源,下载速度慢,容易下载超时导致下载失败。

所以首先通过命令行更换 npm 的镜像源为淘宝镜像源:

1. $ npm config set registry http://registry.cnpmjs.org
2. $ npm info underscore

2.安装 vue-cli

vue-cli 是用于构建 vue 应用的脚手架,通过它可以快速构建 vue 项目。

通过 npm 安装 vue-cli 脚手架:

// 全局安装 vue-cli
$ npm install --global vue-cli

3.构建 vue 项目

// 通过命令行进入你期望创建项目的目录
// 创建一个基于 webpack 模板的新项目,my-project 为项目名称,可自定义
$ vue init webpack my-project

执行上述命令之后,还需对项目进行一些设置(按个人需要选择):

// 项目名
Project name my-project
// 项目描述
Project description A Vue.js project
// 作者
author hechengzhang
// 构建方式(独立构建、运行时构建,默认为独立构建)
Vue build standalone
// 是否安装路由(Y)
Install vue-router?(Y/N)
// 是否使用 ESLint 检测你的代码(N)
Use ESLint to lint your code?(Y/N)
// 是否使用 Karma + Mocha 进行单元测试(N)
Setup unit tests with Karma + Mocha?(Y/N)
// 是否使用 Nightwatch 进行 e2e 测试(N)
Setup e2e tests with Nightwatch? (Y/N)

然后通过命令进入项目,安装依赖:

// 进入项目
$ cd my-project
// 安装依赖
$ npm install
// 运行项目
$ npm run dev

运行项目会自动打开浏览器,当你看到 vue 的欢迎界面时,项目就已经搭建成功了:

项目运行时,命令行状态如下图(下图截自 mac 终端,windows 有稍微区别):

注:通过 control + c 可以终止运行项目

结语

到这里 vue 已经成功安装了,下一篇介绍基于 vue-cli 搭建的应用的项目文件介绍。

附:Vue.js 中文官网

原文地址:https://www.cnblogs.com/homehtml/p/12222849.html

时间: 2024-11-06 09:33:36

Vue.js 2.0 轻松入门(一)的相关文章

vue.js 2.0 从入门到放弃 --- 入门案例(一)

最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api...废话不多说了,把我踩过的坑,在这里跟大家说说,希望对初学者有所帮助.ps:高手请绕道. 既然是入门实例,那肯定从最基础的开始了,希

Vue.js 60 分钟快速入门

Vue.js 60 分钟快速入门 转载 作者:keepfool 链接:http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为V

更轻更快的Vue.js 2.0与其他框架对比(转)

更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0 在性能上有显著的提升,同时保持轻量的文件下载: 渲染层基于一个轻量级的Virtual DOM实现进行了重写,该Virtual DOM实现fork自snabbdom.新的渲染层相比v1带来了巨大的性能提升,也让Vue 2.0成为了最快速的框架之一. 根据1.0到2.0迁移指南,“大约90%的API是相

Vue.js 2.0 参考手册.CHM下载

下载地址 Vue.js 2.0 参考手册.CHM下载链接: http://pan.baidu.com/s/1kVbhd4b 密码: wxfh

Vue.js 2.0版

Vue.js 2.0版升级,更改了好多方法或指令 new Vue({ el:'#demo', data:{ msg:"vue2.0" } }) v-model lazy number debounce (2.0版废弃)  新加 lazy .lazy - 取代 input 监听 change 事件 .number - 输入字符串转为数字 .trim - 输入首尾空格过滤 <input v-model.lazy="msg" /> v-for v-for迭代语

vue.js 2.0 --- 安装node环境和脚手架(入门篇)

1.环境搭建 1.1.安装node.js 1.2 安装过程很简单,一路“下一步”就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功. 1.3 修改npm为淘宝镜像 因为npm的仓库有许多在国外,访问的速度较慢,建议修改成cnpm,换成taobao的镜像. 打开命令行工具,复制如下配置: npm install -g cnpm --registry=https://registry.npm.taobao.org

Vue.js——60分钟快速入门

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 本文摘自:http://www.cnblogs.com/keepfool/p/5619070.html 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将

【翻译】Vue.js 2.0 教程 起步

第一次在博客园上翻译东西,因为现在还没有中文的Vue.js2.0文档,很多英语不好的同学就郁闷了.以后有时间就翻译一些,不过等我翻译完,官方中文文档肯定就上线了......大家可以打开英文原网站,因为里面有些例子可以直接演示. 官方英文文档链接 正文: 起步 什么是Vue.js? Vue(发音类似view)是一个紧跟时代潮流的框架,为构建用户界面而生.不同于其他庞大的框架,Vue的设计是从底层向上逐步递增的(译者附:刚开始使用Vue不需要太多依赖).Vue的核心库不仅仅聚焦于视图层,它还非常容易

Vue.js&mdash;&mdash;60分钟快速入门

Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM