vue.js 的起步
Posted 前端大全
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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组件，未来需要一些篇幅去详细说明它们。
专栏作者简介 （ ）
1000copy：简介还没来得及写 :）
关注「前端大全」
看更多精选前端技术文章
↓↓↓
以上是关于vue.js 的起步的主要内容，如果未能解决你的问题，请参考以下文章