最近公司由于业务拓展，需要进行小程序相关的开发，本着朝全栈开发者努力，决定学习下Vue，去年csdn送了一本《Vue.js权威指南》，那就从这本书开始练起来吧。哟吼。

一，环境搭建

今天主要说一下如何搭建环境，以及如何运行。

1,npm安装brew install npm

• 1
  

如果brew没有安装的话，大家可以brew如何安装哦，这里就不再详细说明了。

2,安装vue-cli

vue-cli是用node编写的命令行工具，因此需要进行全局安装。

　npm install -g vue-cli

• 1
  

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

vue -V

• 1
  

二，创建并运行项目

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

vue init web pack helloworld

• 1
  

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

cd helloworld//跳转到该目录

• 1
  

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

npm install

• 1
  

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

nom run dev

• 1
  

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

本来是有一个Vue的图标的，被我给去掉了，方便后面的调试。

三，Vue.js 权威指南的第一个demo

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

<template>    <div id = "didi-navigator">        <ul>            <li v-for="tab in tabs">                {{tab.text}}            </li>        </ul>    </div></template><script>export default {name:'HelloWorld',data(){    return {   tabs:[        {text: '巴士'},        {text: '快车'},        {text: '专车'},        {text:'顺风车'},        {text:'出租车'},        {text:'代驾'}        ]  }}}</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
  

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

<template>  <div id="app">    <HelloWorld/>  </div></template><script>import HelloWorld from './components/jk'export default {  name: 'App',  components: { HelloWorld }}</script><style>#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}</style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
  

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

奈斯