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这个文件夹下进行相关的操作的。执行如下命令，启动项目

nom run dev

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

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

扫描二维码关注公众号，回复： 2649435 查看本文章

三，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>

大家可以看到我这里和书上不太一样，主要就是我这里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>

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

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