第一步：配置環境

安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝@vue/cli

cnpm install -g @vue/cli

檢查版本是否正確

vue --version

使用vue.server和vue.build對*.vue檔案進行快速原型開發，需要安裝vue serve

cnpm install -g @vue/cli-service-global

新建一個App.vue檔案測試安裝是否成功：

<template>2 <h1>Hello world!</h1>3 </template>

在該檔案當前路徑執行：

vue serve App.vue

開啟瀏覽器輸入localhost:8080看到如下畫面則執行成功

環境安裝到此結束，接下來用一個簡單案例來學習vue的單檔案元件開發。

第二步：簡單案例實戰

以一個物品清單為例：

該案例由4個元件構成，分別是：

1. addItem.vue 新增物品

2. item.vue 物品例項

3. items.vue 物品列表

4. changeTitle 改變標題

首先，建立一個專案demo：

vue create demo

專案預設目錄如下，啟動主頁在public， vue原始碼(包括元件)都存放到src

然後分別編寫各元件程式碼

1. addItem.vue：

<template>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="add shopping list item" v-model="newItem">
    <span class="input-group-btn">
      <button class="btn btn-primary" @click="emitAdd">
        <i class="fa fa-plus-square-o fa-lg"></i><span>Add</span>
      </button>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: ''
    }
  },methods: {
    emitAdd() {
      this.$emit('addItem',this.newItem);
    }
  }
}
</script>

<style>
</style>

2. item.vue：

<template>
  <li :class="{'removed': item.checked}" class="list-group-item">
    <div class="checkbox">
      <label>
        <input type="checkbox" v-model="item.checked">
        <span>{{ item.text }}</span>
      </label>
    </div>
  </li>
</template>

<script>
export default {
  props: ['item']
}
</script>

<style>
.removed {
  color: gray;
}

.removed span {
  text-decoration: line-through;
}
</style>

3. items.vue：

<script>
import item from './item'

export default {
  props: ['items'],components: {
    item
  }
}
</script>

<template>
  <ul class="list-group">
    <item v-for="item in items" :key="item.id" :item="item"></item>
  </ul>
</template>

<style>
</style>

4. changeTitle.vue：

<template>
  <div>
    <em>Change the title here:</em>
    <input type="text" :value="title" @input="onInput">
  </div>
</template>

<script>
export default {
  props: ['title'],methods: {
    onInput(event) {
      this.$emit('input',event.target.value);
    }
  }
}
</script>

最後修改App.vue，匯入上面的元件：

<template>
  <div id="app" class="container">
    <h1>{{ title }}</h1>
    <add-item @addItem="add"></add-item><br>
    <items :items="items"></items>
    <div class="footer">
      <hr>
      <change-title :title="title" v-model="title"></change-title>
    </div>
  </div>
</template>

<script>
import addItem from './components/addItem'
import items from './components/items'
import changeTitle from './components/changeTitle'

export default {
  name: 'app',components: {
    addItem,items,changeTitle
  },data() {
    return {
      items: [
        {id: 1,text: 'Bananas',checked: true},{id: 2,text: 'Apples',checked: false}
      ],title: 'My Items List'
    }
  },methods: {
    add(text) {
      this.items.push({
        text: text,checked: false
      });
    }
  }
}
</script>

<style>
</style>

需要注意的是：每個元件必須只有一個根元素。我這裡需要在public/index.html引入bootstrap樣式和font-awesome圖示字型。

執行程式：

cnpm run serve

最後附上執行截圖：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。