文档章节

vue.js 的起步

oschina_00
 oschina_00
发布于 2016/12/07 14:19
字数 1591
阅读 21
收藏 0

介绍

vue.js 是一个客户端js库,可以用来开发单页应用。为了一个项目的选型,我前前后后的看了angular、react、vuejs ,对前两者是佩服,对后者是爱。因为它简洁干净利索,并且还有高大上的web components实现。即使文档不多,我也愿意选择它。接下来,我们首先建立一个开始的项目,并且撸一遍开发过程中涉及到的概念和组件。

vue.js

稍微像样一点的vuejs的开发过程几乎总是搭配webpack、babel一起的,喜欢从头hack的人,我告诉你配置是极为繁琐的,幸好vue.js 提供了一个工具,叫做vue-cli 。可用于快速搭建单页应用起步代码。只需一分钟即可启动常用的开发特性:

  1. 可用的脚手架代码。

  2. 热重载。组件代码更新后自动重新加载

  3. 静态代码检查。

  4. 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组件,未来需要一些篇幅去详细说明它们。

 

本文转载自:作者:伯乐在线专栏作者 - 1000copy

共有 人打赏支持
oschina_00
粉丝 5
博文 101
码字总数 0
作品 0
廊坊
私信 提问
Electron-vue 起步

起步 ---该样板代码被构建为 vue-cli 的一个模板,并且包含多个选项,可以自定义你最终的脚手架程序。本项目需要使用 node@^7 或更高版本。electron-vue 官方推荐 yarn 作为软件包管理器,因...

17CTO
2017/10/18
0
0
vue+iview+vuex初探(1)

听朋友推荐说iview结合vue做后台管理系统很不错,然后我就研究研究了。以下是我学习过程中的一些记录: 没有用官方推荐的iview-cli而是用的vue-cli 起步,一系列下载后在main.js 中有如下配置...

南山有台
07/26
0
0
微信小程序mpvue+vantUI+flyio+vuex入坑(1)

简单介绍一下mpvue mpvue是美团团队开发的一个基于vue.js核心开发小程序的前端框架,可以使用vue的语法来写小程序页面。对于我这种只会vue全家桶的前端来说,算是福音了。 介绍一下vantUI 因...

txl1123
10/19
0
0
Avue 是一个后台集成解决方案支持SSR(服务端渲染)和SPA(单例页面),

https://gitee.com/smallweigit/avue.git vue只是刚起步,很多功能还在开发中敬请期待...... 简体中文 欢迎加入QQ交流群,互相学习 一键加群: 简介 是一个后台集成解决方案支持SSR(服务端渲...

Smallwei小伟
02/08
0
0
VUE前端框架

Vue 入门实战项目——知乎日报 这是一个基于 Vue 全家桶开发的知乎日报 WebApp,页面样式主要参考 iOS 版知乎日报 APP Vue 超大数据列表解决方案 vue-recyclerview 开源 Vue 超大数据列表解决...

掘金官方
01/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

手写一个重试机制程序(使用Callable)

java.util.concurrent.Callable<V>接口可以实现多线程,同时还能实现一个简易重试机制。 查看Callable接口源码可知,它内部的call()方法带返回值,同时抛出了异常。 public interface Cal...

哥本哈根的小哥
8分钟前
0
0
能否通过反射修改被 final 修饰的成员变量?

一、背景 日常磨刀 二、阅前须知知识点: 当final修饰的成员变量在定义的时候初始化值,反射就不能动态修改它的值了。 当final修饰的成员变量在定义的时候没有初始化值,就还能通过反射来动态...

jack__0023
26分钟前
0
0
方之熙博士被任命为RISC-V基金会中国顾问委员会主席,加速RISC-V ISA在中国的应用

中国顾问委员会将就RISC-V基金会的教育和应用推广战略提供指导 今天在中国乌镇举行的世界互联网大会(World Internet Conference)上,RISC-V基金会(RISC-V Foundation)宣布,半导体行业资深人...

whoisliang
40分钟前
1
0
为了用户体验,不要做浏览器兼容

读者看到这篇文章的标题也许会感到奇怪,按照通常的经验来说,为了用户体验应该做浏览器兼容,以便让不同的浏览器用户都能有好的体验,从而增加网站的流量,但是我认为做浏览器兼容属于同样的...

Bob2100
40分钟前
1
0
分布式定时任务架构 (二) xxl-job二次开发实践

4个月前,公司有任务调度的需求,需要一周内完成,时间非常紧。 需求有三点: web界面编辑cron表达式,启动,停止任务 接入公司的rpc成本较低,公司有自研的rpc,研发人员希望共用同一套注解 ...

勇哥和你一起学技术
57分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部