vue-cli腳手架使用-- 初學者

第一步:

    安裝環境:

   1. npm install webpack -g

   2. npm install vue-cli -g

   3. vue init webpack-simple

   出現

    

 

    4. npm install 

    5. npm install vue-router vue-resource --save

    6. npm run dev 

    出現下圖  說明成功

    

 

    寫代碼正式開始：

         最簡單的寫法：

         直接在App-vue寫如你的代碼  如：

         

    2.使用組件寫代碼：component

        a. 在src目錄下先建一個component目錄  在目錄裏面建立一個firstcomponent.js文件 如圖

   

        

       

第一步，引入。在<script></script>標籤內的第一行寫

import firstcomponent from './component/firstcomponent.vue'

第二步，註冊。在<script></script>標籤內的 data 代碼塊後面加上 components: { firstcomponent }。記得中間加英文逗號!!!

export default { data () { return { msg: 'Hello Vue!' } }, components: { firstcomponent } }

第三步，使用。
在<template></template>內加上<firstcomponent></firstcomponent>

<template>

    <div id="app">

    <img src="./assets/logo.png"> <h1>{{ msg }}</h1> <firstcomponent></firstcomponent> </div>

</template>

   完整代碼：

   

 

 

路由：

  第一種： 在 main.js中路由  不推薦

   在component目錄中建立secondconponent 文件

   在App.vue中寫如  如圖；

     

  在main.js中的代碼：