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的圖示的，被我給去掉了，方便後面的除錯。

三，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還有學到，大家不要介意樣式不好看啊。嘿嘿
執行結果如下：

更多優質文章，可以微信掃碼關注：