Vue.js2.0 入门实例

好好学习，天天向上！哈哈！好吧！我最近也在学习Vue.js。

Vue.js 是用于构建交互式的 Web 界面的库。

Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。

既然是入门，那就一步一步来吧。

一、安装NodeJS。

       简单，百度，官网下载，安装就行。反正我装过了的。不信看图。

       


       比较新，是因为我更新了它。

二、全局安装webpack、vue-cli。

       npm install -g webpack   //全局安装webpack

       npm install -g vue-cli   //全局安装vue-cli

       你要有淘宝的cnpm也可以使用cnpm安装。

三、安装vue-devtools 

       vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。

       1.github下载地址：https://github.com/vuejs/vue-devtools。

       2.下载好后解压，进入vue-devtools工程，执行npm install，再执行npm run build。

       3.在谷歌浏览器的地址栏输入chrome://extensions/后回车。进入扩展程序。

       4.勾选开发者模式，点击“加载已解压的扩展程序...”按钮，选择工程下的shells下的chrome文件夹。或者直接拖动shells过来。两条路，自己选。

四、用vue-cli构建项目

       vue init webpack demo        //生成项目名为demo的模板

       


       cd demo&npm install      //初始化和安装依赖

       npm run dev    //运行项目

      项目运行成功后，浏览器会自动打开localhost:8080，会看到如下所示界面。

      


       项目运行成功，可喜可贺。好了，今天就到这咯。哈哈