Vue.js的入门
介绍
vue.js 是一个客户端js库,可以用来开发单页应用。为了一个项目的选型,我前前后后的看了angular、react、vuejs ,对前两者是佩服,对后者是爱。因为它简洁干净利索,并且还有高大上的web components实现。即使文档不多,我也愿意选择它。接下来,我们首先建立一个开始的项目,并且撸一遍开发过程中涉及到的概念和组件。
vue.js
稍微像样一点的vuejs的开发过程几乎总是搭配webpack、babel一起的,喜欢从头hack的人,我告诉你配置是极为繁琐的,幸好vue.js 提供了一个工具,叫做vue-cli 。可用于快速搭建单页应用起步代码。只需一分钟即可启动常用的开发特性:
可用的脚手架代码。
热重载。组件代码更新后自动重新加载
静态代码检查。
ES6语言特性
工具准备
我们需要使用vue-cli来创建一个脚手架项目。
安装 vue-cli
$ npm install -g vue-cli
确认node版本
我的版本是
$ node -v
v5.0.0
$ npm -v
3.10.6
很多问题如果出现,可能和版本有关,建议和我一致 。
创建新项目
执行:
$ vue init webpack my-project
第二个参数webpack,指明创建一个基于 “webpack” 模板的vuejs项目。此模板会创建一个webpack的脚手架代码。
然而,webpack是啥?它本身是一个打包工具,可以把js、css、image打包成一个或者多个js文件,并且可以支持各种loader作为插件对不同类型的文件做转换处理。实际上webpack就是通过插件vue-loader在加载vue类型的文件时做格式转换,把vue类型文件翻译为浏览器可以识别的js文件。
中国用户注意:vue init命令使用了npm, npm的仓库经常缓慢或者被阻断,可以使用国内镜像,只要编辑 ~/.npmrc 加入下面内容:
registry = https://registry.npm.taobao.org
这个的做法可以快得多。
当前可以使用的模板有:
webpack - 通过webpack和vue-loader插件,可以调用babel把.vue文件编译为客户端可以识别的js文件。默认还可以提供热加载、代码检查、测试。
webpack-simple - 最简单的webpack和vue-loader插件。
browserify - 通过Browserify + vueify 的组合,可以调用babel把.vue文件编译为客户端可以识别的js文件。默认还可以提供热加载、代码检查、测试。
browserify-simple - 最简单的Browserify + vueify 插件。
理论上webpack和browserify的功能类似,都可以做打包工具。但是webpack就是那个文档特少,但是大家都争着使用的热门工具。所以,我们就不管那么多,先使用webpack啦。
安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
到http://localhost:8080查看效果。
查看vue文件
vue文件是三位一体的。就是说css、html、js都在一个文件内,使用标签做出分割。为了更好的查看结构,建议首先安装对应编辑器的高光插件。
安装语法高光
我习惯使用的编辑器是sublime text,安装插件就可以识别所有扩展名为.vue的vuejs组件代码,给予高光显示,便于代码的阅读和编写。这个插件叫做 vue-syntax-highlight,是vuejs官方提供的。它位于github.com。只要把它克隆到你的Sublime包目录内。在我的电脑上,Sublime包目录是/Users/lcj/Library/Application Support/Sublime Text 3/Packages ,所以安装的过程就是
cd /Users/lcj/Library/Application\ Support/Sublime\ Text\ 3/Packages
git clone https://github.com/vuejs/vue-syntax-highlight
然后重新启动即可。之后阅读代码,所有的扩展名为.vue文件都会有相应的高光显示。
查看vue
起步代码中有一个组件代码,在src/hello.vue内。查看:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello World!'
}
}
}
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>
文件内分为三个部分, <template>标签包围内的是html代码; <script>内包围的是js代码,并且可以使用ES6的语法。 <style>内的则是css代码。使用这个组件的代码在app.vue内。只要首先在脚本内声明标签
import Hello from './components/Hello'
export default {
components: {
Hello
}
}
随后在html内使用标签即可
<hello></hello>
非常大的一个亮点!一个vue文件,内部js、css、html就都齐了,可以作为一个完整的、自包含的组件了。非常有趣的、我个人极为欣赏的web components就在此处了。
vue文件内的语法,当然不是浏览器所可以支持的,浏览器不认识它!魔术在于webpack+vue-loader+babel 。webpack加载vue文件首先调用vue-loader,vue-loader会调用babel转换ES6代码为ES5代码,把css和html作为模块也转换为客户端js代码。这些js代码浏览器就可以识别了。
另外,我们看看热加载。把hello组件的msg值改改。然后保存。浏览器会自动刷新的。这就是热加载了。对于频繁修改调试的程序员,有了热加载,得轻松不少。
安装chrome开发工具
我习惯使用的浏览器是chrome,可以安装vue的开发工具到chrome插件内。在chrome市场内查询vue-developertools 。有了它,可以在chrome console内看到更加友好的vue错误提示。
回归日常
我们所有的编辑修改一旦完成需要更新网站时,最终需要把所有的vue,ES6代码等编译出来到ES5的js文件。现在可以构建这些webpack代码:
npm run build
此命令会把我们已经有的开发成果,编译到dist目录下,就是说编译成前端可以直接使用的html、js、css。
有了它们,我就可以使用一个http 静态服务器,在dist目录内执行:
cd dist
npm install http-server -g
http-server
然后,到http://localhost:8080查看效果。和运行npm run dev
看到的一模一样。
更多
vue还有两个插件,对开发者很有价值
加强版 ,访问服务器
npm install vue-resource --save
安装路由
npm install vue-router --save
细节展开
我们走马观花的看了webpack、vue-loader、babel 、vue组件,未来需要一些篇幅去详细说明它们。
注:本文转自微信公众号前端大全的文章
Vue.js的入门的更多相关文章
- Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
- vue.js初级入门之最基础的双向绑定操作
首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...
- Vue.js 快速入门
什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...
- Vue的理解:Vue.js新手入门指南----转
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...
- Vue.js新手入门指南
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...
- Vue.js快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
- Vue.js 介绍入门
Vue.js 的目标 是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.Vue.js 是一个用于创建 Web 交互界面的库.它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件. ...
- Vue.js—快速入门
Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...
- 98、vue.js简单入门
本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
随机推荐
- cmder git bash 使用
cmder 是一款 windows 下的命令集合软件,它可以集合各种系统下的命令,并且操作非常快速方便. 安装有两个版本,一个是简化版(4.27M),一个是完全版(75.7M),它们的唯一区别:完全版 ...
- 查看当前数据库正在运行的Session
当数据库运行比较缓慢时,我们需要实时查看当前有什么Session在运行,获得信息越完整,对于分析低性能的原因越有帮助.根据之前调优的经历,简单几步分析如下: 1.通过SQL Server内置的Sp_w ...
- 用Github pages搭建自己制作的网页,方法最简单,适用于新手
本文固定链接http://blog.csdn.net/pspgbhu/article/details/51205264 本人自学前端一个多月,写个几个网页想要用来应聘,网上搜各种搭建网站的方法,发现不 ...
- Federated Identity Pattern 联合身份模式
Delegate authentication to an external identity provider. This pattern can simplify development, min ...
- Java进击C#——语法之IO操作
本章简言 上一章我们对线程同步进行讲解.了解如何去处理可能发生的脏数据.而本章就要讲有关于C#在读取IO文件的时候,常常用到的操作类.这一章的内容会比较少.但是笔者还是总结出来让读者们有一个学习的方向 ...
- 手把手教从零开始在GitHub上使用Hexo搭建博客教程(二)-Hexo参数设置
前言 前文手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置介绍了github注册.git相关设置以及hexo基本操作. 本文主要介绍一下hexo的常用参数设置. ...
- JavaScript弹窗
警告框: alert("警告信息!"); alert("警告\n信息!"); 确认框: var t=confirm("请确认!"); // ...
- h1、h2、h3标签及strong标签对页面seo的影响
今天和大家来聊下h1,h2,h3,strong几个标签,在网页中的使用对页面seo的影响,也阐述了个人的一些想法. 首先简要讲下H标签及strong标签的含义:<h1>.<h2> ...
- 数据库表结构设计方法及原则(li)
数据库设计的三大范式:为了建立冗余较小.结构合理的数据库,设计数据库时必须遵循一定的规则.在关系型数据库中这种规则就称为范式.范式是符合某一种设计要求的总结.要想设计一个结构合理的关系型数据库,必须满 ...
- Matlab 之 find()函数
当我第一次用matlab语言编写一个工程项目时,发现自己编写的脚本里循环特别多,导致编程效率很低,这让我特别苦恼.有一次导师让我阅读他编写的一个Matlab脚本,并按照新要求对其进行更改.我发现脚本里 ...