Vue從入門到放棄筆記(3)——使用腳手架開發vue項目

對比React的腳手架工具react-cli， Vue也有一套腳手架工具vue-cli，趕緊來體驗一下吧!

1.首先下載這個腳手架工具(前提把npm或cnpm配好 參考，不然下載就會蛋疼)——打開控制檯，運行如下命令:

npm install -g @vue/cli

2.使用腳手架創建項目——運行如下命令(假設項目名爲"hello-world"，preset初學選"default"就行):

3.進入hello-world目錄並運行項目:

4.用VSCode打開hello-world項目:

    這裏大致猜測一下，main.js應該是項目入口文件，它引用了App.vue這個組件，components目錄應該是放自定義組件的地方，待會用。讓我們修改App.vue並新增一個模板來稍微改造下這個項目。

5.嘗試修改項目。

原有App.vue內容如下(註釋部分是我的猜測，並不嚴謹):

<template>
  <!--這裏應該是和index.html裏那個id爲app的div起綁定的地方-->
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// 這裏引用自定義的模板
import HelloWorld from './components/HelloWorld.vue'

// 這裏epxort出定義的Vue對象
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)

<template>
   <div id="app">
    <ol>
      <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
    </ol>
   </div>
</template>

<script>

import TodoItem from './components/TodoItem.vue'


export default {
  name: 'app',
  data() {
    return {
      groceryList: [
        {
          id:0,
          text:'蔬菜'
        }, {
          id:1,
          text:'水果'
        }, {
          id:2,
          text: '其它'
        }]
      }
    },
    components: {
      TodoItem
    }

}
</script>

引用到的TodoItem.vue外面在components目錄下加入:

<template>
    <li class="text">{{todo.text}}</li>
</template>

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

<!--添加"scoped"屬性是爲了把下面style聲明的css樣式限制在當前這個組件-->
<style scoped>
.text {
    color: #42b983;
}
</style>

效果(這個Demo源自筆記1):

希望修改頁面title的可以在index.html這個文件中改，但是不要動裏面的其它東西。