npm install -g 包名              # 安裝模組   -g表示全域性安裝，如果沒有-g，則表示在當前專案安裝
npm list                        # 檢視當前目錄下已安裝的node包
npm view 包名 engines            # 檢視包所依賴的Node的版本 
npm outdated                    # 檢查包是否已經過時，命令會列出所有已過時的包
npm update 包名                  # 更新node包
npm uninstall 包名               # 解除安裝node包
npm 命令 -h                      # 檢視指定命令的幫助文件

安裝Vue-sli

npm install -g vue-cli

如果安裝速度過慢，一直超時，可以考慮切換npm映象源：http://npm.taobao.org/

使用Vue-處理初始化建立起那段專案

生成專案目錄

使用vue-cli自動化工具可以快速搭建單頁應用專案目錄.

該工具為現代化德前端開發工作提供了開箱即用的結構配置.只需要幾分鐘即可建立並啟動一個帶熱過載,儲存時靜態檢查以及可用於生產環境的結構配置的專案:

// 生成一個基於 webpack 模板的新專案
vue init webpack 專案目錄名
例如：
vue init webpack myproject


// 啟動開發伺服器 ctrl+c 停止服務
cd myproject
npm run dev           # 執行這個命令就可以啟動node提供的測試http伺服器

請訪問:http://localhost:8080/

專案目錄結構

src 主開發目錄,要開發的單檔案元件全部在這個目錄下的components目錄下

static 靜態資源目錄,所有的css,js 圖片等資原始檔放在這個資料夾.

dest專案打包釋出資料夾,最後要上線單檔案專案檔案都要在這個資料夾中(後面打包專案,讓專案中的vue元件經過編譯變成js程式碼以後,dist就出現了)

node_modules目錄是node的依賴包目錄

config是配皮目錄

build是專案打包是依賴的目錄

sec/router路由,後面需要我們在使用Router路由的時候,自己宣告

cue專案執行流程圖

缺個圖

整個專案是一個主檔案index.html,index.html中會引入src資料夾中的main.js,main.js中會匯入頂級單檔案元件App.vue,App.vue中會通過元件巢狀或者路由來引用components資料夾中的其他單檔案元件。

單檔案元件的使用

元件有倆種: 普通元件,單檔案元件

[普通元件的缺點:

1. HTML程式碼是作為js 的字串進行編寫,所以組裝和開發的時候不易理解,而且沒有高亮效果.

2. 普通元件用在小專案中非常適合,但是複雜的大專案中,如果把更多的元件放在html檔案中,那麼維護成本就會變得非常昂貴.

3. 普通元件只是整合了js 和html,但是css程式碼被剝離出去了. 使用的時候不好處理.

將一個元件相關的HTML結構,css樣式,以及互動的JavaScript程式碼從檔案中剝離出來,形成

一個檔案,這種檔案就是單檔案元件,相當於一個元件具有了結構,表現和行為的完善功能,方便元件之間隨意組合以及元件的重用,這種溫江的寬展名為'vue',比如: 'Home.vue'.

template 編寫HTML程式碼的地方

<template>
  <div id="Home">
    <span @click="num--" class="sub">-</span>
    <input type="text" size="1" v-model="num">
    <span @click="num++" class="add">+</span>
  </div>
</template>

script編寫vue,js程式碼

<script>
  export default {
    name:"Home",
    data: function(){
      return {
        num:0,
      }
    }
  }
</script>

style編寫當前元件的樣式程式碼

<style scoped>
  .sub,.add{
    border: 1px solid red;
    padding: 4px 7px;
  }
</style>

完成案例-點選加減數字

建立Homes.vue

<template>
  <div class="add_num">
      <span @click="num++">+</span>
      <input type="text" size="2" v-model="num">
      <span @click="num--">-</span>
  </div>
</template>

<script>
  export default{
    name:"AddNum",
    data: function(){
      return {
        num: 0,
      }
    }
  }
</script>

<style scoped>
   .add_num{
      font-size: 32px;
   }
</style>

在App.vue元件中呼叫上面的元件

<template>
  <div id="Home">
    <span @click="num--" class="sub">-</span>
    <input type="text" size="1" v-model="num">
    <span @click="num++" class="add">+</span>
  </div>
</template>


<script>
  export default {
    name:"Home",
    data: function(){
      return {
        num:0,
      }
    }
  }
</script>

<style scoped>
  .sub,.add{
    border: 1px solid red;
    padding: 4px 7px;
  }
</style>

在開發vue專案之前,需要手動把 App.vue的HelloWorld元件程式碼以及預設的css樣式,

元件的巢狀

有時候開發vue專案時,頁面也可以算是一個大元件,同時頁面也可以分成多個子元件.

因為,產生了父元件呼叫子元件的情況.

例如,我們可以宣告一個元件,作為父元件

在components/建立一個儲存子元件的目錄HomeSon

在HomeSon目錄下,可以建立當前頁面的子元件,例如,是Menu.vue

//  元件中程式碼必須寫在同一個標籤中
<template>
    <div id="menu">
      <span>{{msg}}</span>
      <div>hello</div>
  </div>
</template>

<script>
  export default {
    name:"Menu",
    data: function(){
      return {
        msg:"這是Menu元件裡面的選單",
      }
    }
  }
</script>

然後，在父元件中呼叫上面宣告的子元件。

最後,父元件被App.vue呼叫,就可以看到頁面效果.

傳遞資料

父元件的資料傳遞給子元件

例如,我們希望把父元件的資料傳遞給子元件.

可以通過props屬性來進行資料傳遞.

傳遞資料三個步驟：

1. 在符元件中,呼叫子元件的組名處,使用屬性值的方式往下傳遞資料

<Menu :mynum="num" title="home裡面寫的資料"/>

# 上面表示在父元件呼叫Menu子元件的時候傳遞了2個數據：
  如果要傳遞變數[變數可以各種型別的資料]，屬性名左邊必須加上冒號:，同時，屬性名是自定義的，會在子元件中使用。
  如果要傳遞普通字串資料，則不需要加上冒號:

2.在子元件中接受上面父元件傳遞的資料，需要在vm元件物件中，使用props屬性類接受。

<script>
  export default {
    name:"Menu",
    props:["mynum","title"],
    data: function(){
      return {
        msg:"這是Menu元件裡面的選單",
      }
    }
  }
</script>

// 上面 props屬性中表示接受了兩個資料。

3.在子元件中的template中使用父元件傳遞過來的資料.

<template>
    <div id="menu">
      <span>{{msg}}，{{title}}</span>
      <div>hello，{{mynum}}</div>
  </div>
</template>

使用父元件傳遞資料給子元件時, 注意一下幾點:

傳遞資料是變數,則需要在屬性左邊新增冒號.

傳遞資料是變數,這種資料稱之為"動態資料傳遞"

傳遞資料不是變數,這種資料稱之為"靜態資料傳遞"
父元件中修改了資料,在子元件中會被同步修改,但是,子元件中的資料修改了,是不是影響到父元件中的資料.

這種情況,在開發時,也被稱為"單向資料流"

子元件傳遞資料給父元件

1.在子元件中，通過this.$emit()來呼叫父元件中定義的事件.

<template>
    <div>
      <p>Post的子元件</p>
      <h2>{{fnum}}</h2>
      <p>data={{data}}</p>
      <p>fnum={{fnum}}</p>
      <div><input type="text" v-model="fnum"></div>
    </div>
</template>

<script>
    export default {
        name: "PostSon",
        // 父元件傳遞資料給子元件: 1. 在父元件中呼叫子元件的元件名稱標籤上面宣告屬性和傳遞值，2. 在子元件中通過props進行接收
        props:["data","fnum"],  // 接受父元件中傳遞過來的資料
        // 子元件傳遞資料給父元件[事件的方式進行傳遞]：
        watch:{
          fnum(){
            console.log(this.fnum);
            // this.$emit("父元素的自定義事件","要傳遞的資料");  // 通過this.$emit()方法，子元件可以把資料傳遞給父元件

            this.$emit("postparentdata",this.fnum);
          }
        }
    }
</script>

<style scoped>

</style>

2. 父元件中宣告一個和子元件中this.$emit("自定義事件名稱")對應的事件屬性。

<template>
    <div>
      <h1>num={{num}}</h1>
      <Son data="我是付元件裡面的內容" :fnum="num" @postparentdata="getsondata"></Son>
    </div>

</template>

3.父元件中，宣告一個自定義方法，在事件被呼叫時，執行的。

<script>
    import Son from "./PostSon"
    export default {
        name: "Post",
        data(){
          return {
            num: 100,
          }
        },
        components:{
          Son:Son,
        },
        methods:{
          getsondata(message){
            console.log("父元件"+message);
            this.num = message;
          }
        }
    }
</script>

在元件中使用axios獲取資料

預設情況下，我們的專案中並沒有對axios包的支援，所以我們需要下載安裝。

在專案根目錄中使用 npm安裝包

npm install axios

接著在main.js檔案中，匯入axios並把axios物件掛載到vue屬性中多為一個子物件，這樣我們才能在元件中使用。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App' // 這裡表示從別的目錄下匯入 單檔案元件
import axios from 'axios'; // 從node_modules目錄中匯入包
Vue.config.productionTip = false

Vue.prototype.$axios = axios; // 把物件掛載vue中

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
});

在元件中使用axios獲取資料

<script>
  export default{
    。。。
    methods:{
      get_data:function(){
         // 使用axios請求資料
        this.$axios.get("http://wthrcdn.etouch.cn/weather_mini?city=深圳").then((response)=>{
            console.log(response);
        }).catch(error=>{
            console.log(error);
        })
      }
    }
  }
</script>

Vue(學習第三部 自動化工具 [vue-cli])

目錄

Vue自動化工具(Vue-cli)

單檔案元件的使用

在元件中使用axios獲取資料

Vue自動化工具(Vue-cli)

安裝nide.js

npm

安裝Vue-sli

使用Vue-處理初始化建立起那段專案

生成專案目錄

專案目錄結構

cue專案執行流程圖

缺個圖

單檔案元件的使用

template 編寫HTML程式碼的地方

script編寫vue,js程式碼

style編寫當前元件的樣式程式碼

完成案例-點選加減數字

建立Homes.vue

在App.vue元件中呼叫上面的元件

元件的巢狀

傳遞資料

父元件的資料傳遞給子元件

子元件傳遞資料給父元件

在元件中使用axios獲取資料

在元件中使用axios獲取資料

相關推薦

Vue(學習第三部自動化工具 [vue-cli])