Vue.js安装教程

vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。

Vue是一套用于构建用户界面的渐进式框架，这个很火的前端MVVM库框架，因为它十分简单的，而且又不简单的。只要用心地学习Vue基础知识，容易上手的，但必须学习JavaScript基础知识。开发Vue应用过程的时候，要看vue文档。

命令行工具：

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

创建新的项目

# 创建一个基于 webpack 模板的新项目
$ vue init webpack vue_demo

  This will install Vue 2.x version of template.

  For Vue 1.x use: vue init webpack#1.0 vue_demo

? Project name vue_demo
? Project description A Vue.js project
? Author jinzita007 <jinzita007@yahoo.com>
? Vue build standalone
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "vue_demo".

   To get started:
   
     cd vue_demo
     npm install
     npm run dev
   
   Documentation can be found at

安装依赖

# 安装依赖
$ cd vue_demo
$ npm install

然后开启服务，自动打开浏览器去看一下Vue默认的页面

# 开启服务
$ vue_demo zhouyulong
> vue_demo@1.0.0 dev /Users/zhouyulong/web/vue_demo
> node build/dev-server.js

Listening at http://localhost:8080

webpack: wait until bundle finished: /index.html
webpack built 8220b02c3e43b4436897 in 7569ms
Hash: 8220b02c3e43b4436897
Version: webpack 1.14.0
Time: 7569ms
     Asset       Size  Chunks             Chunk Names
    app.js     953 kB       0  [emitted]  app
index.html  250 bytes          [emitted]  
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  1.47 MB       0       
webpack: bundle is now VALID.

浏览器localhost:8080

如果是Atom编辑器的话，需要安装vue高亮插件吧

然后去打开Atom编辑器的设置

在对话框中安装Vue高亮的插件

安装完成了，去看看有没有高亮代码吧