Vue学习从入门到精通（一）

  最近公司由于业务拓展，需要进行小程序相关的开发，本着朝全栈开发者努力，决定学习下Vue，去年csdn送了一本《Vue.js权威指南》，那就从这本书开始练起来吧。哟吼。
###一，环境搭建
今天主要说一下如何搭建环境，以及如何运行。
####1,npm安装

brew install npm

如果brew没有安装的话，大家可以brew如何安装哦，这里就不再详细说明了。
####2,安装vue-cli
vue-cli是用node编写的命令行工具，因此需要进行全局安装。

　npm install -g vue-cli

注：node的版本为4.x,及5.x及以上
安装完成后，查看版本

vue -V

###二，创建并运行项目
环境安装后，我们可以使用vue-cli命令快速创建一个webpack构建的项目

vue init web pack helloworld

我在当前目录创建了一个helloworld的项目。然后我执行

cd helloworld//跳转到该目录

执行下面的命令来安装依赖

npm install

我们会看到当前目录生成了很多的文件，其中我们主要是在src这个文件夹下进行相关的操作的。执行如下命令，启动项目

npm run dev

打开浏览器，输入http://localhost:8080可以看到系统默认生成的页面了。

本来是有一个Vue的图标的，被我给去掉了，方便后面的调试。
###三，Vue.js 权威指南的第一个demo
一切准备就绪，接下来我们开始练习《Vue.js权威指南》这本书中的demo，在网上找了许久，也没有找到书中的源码，很是遗憾啊。第一个demo的代码保存为jk.vue
我这边将第一个demo的代码如下：

大家可以看到我这里和书上不太一样，主要就是我这里app.js已经创建过了，所以我这边没有必要执行new Vue这些操作了，具体原因后续会详细说明。
App.vue中代码如下：

由于style还有学到，大家不要介意样式不好看啊。嘿嘿
运行结果如下：

更多优质文章，可以微信扫码关注：