一、CLI 的介紹

Vue CLI 是一個基于 Vue.js 進行快速開發(fā)的完整系統(tǒng)，提供：

• 通過 @vue/cli 實現(xiàn)的交互式的項目腳手架。
• 通過 @vue/cli + @vue/cli-service-global 實現(xiàn)的零配置原型開發(fā)。
• 一個運行時依賴 (@vue/cli-service)，該依賴：
  ①可升級；
  ②基于 webpack 構(gòu)建，并帶有合理的默認配置；
  ③可以通過項目內(nèi)的配置文件進行配置；
  ④可以通過插件進行擴展。
• 一個豐富的官方插件集合，集成了前端生態(tài)中最好的工具。
• 一套完全圖形化的創(chuàng)建和管理 Vue.js 項目的用戶界面。
  CLI (@vue/cli) 是一個全局安裝的 npm 包，提供了終端里的 vue 命令。
  官方文檔：https://cli.vuejs.org/zh/

二、安裝

使用下列任一方法進行包的安裝:

   npm install -g @vue/cli
   # OR
   yarn global add @vue/cli

注意：安裝cli包 本地必須要有node環(huán)境和npm（yarn，cnpm）工具（npm是node環(huán)境里面的包管理工具）
安裝之后，你就可以在命令行中訪問 vue 命令。你可以通過簡單運行 vue，看看是否展示出了一份所有可用命令的幫助信息，來驗證它是否安裝成功。

查看版本：

  vue --version

升級
如果需要升級全局的vue cli包，就運行

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

三、基本使用

1、創(chuàng)建項目

單擊右鍵打開終端（終端配置文件為cmd）

vue create demo      //demo 為項目名

注意：項目名不能有中文和大寫字母
點擊回車后會出現(xiàn)以下選項（選擇Default ([Vue 2] babel, eslint) ）

image.png

image.png

編輯器中的空文件夾會變成一個完整的文件夾
node_model：包（項目依賴）
public：靜態(tài)目錄
src：代碼目錄
assets：靜態(tài)資源目錄（整個項目中的圖片，樣式，以及字體圖標(biāo)）
components：組件目錄
App.vue：全局組件
main.js：入口文件
.gitignore：git的忽略文件
babel.config.js：作為 ES6轉(zhuǎn)ES5的轉(zhuǎn)化工具
package-lock.json：npm的包的詳情文件（可刪除（不刪除的優(yōu)勢：））
package.json：包的描述文件（包括包的包名、版本、調(diào)試腳本、依賴（生產(chǎn)依賴和開發(fā)依賴），不可刪除）
README.md：項目文檔

image.png

2、使用示例

在components文件夾中添加組件文件
（1）父子組件傳值
定義一個Child 組件

<template>
    <div class="child">
        {{title}}
        <hr style="margin:10px 0">
        <p>車名：<input type="text" v-model="car.name"></p>
        <p>車價：<input type="text" v-model="car.price"></p>
        <hr style="margin:10px 0">
        <p>飛機名稱：<input type="text" v-model="myplaneName"></p>
        <p>飛機價格：<input type="text" v-model="myplanePrice"></p>
    </div>
</template>
<script>
// 每個組件其實就是一個導(dǎo)出的默認對象
export default {
    name:'Child',
    props:['car','planeName','planePrice'],
    // 注意：組件里面的data一定要是一個方法，由方法返回一個對象
    data() {
        return {
            title:'我是Child組件',
            // 中轉(zhuǎn)父組件傳遞過來的值
            myplaneName:this.planeName,
            myplanePrice:this.planePrice
        }
    },
    watch:{
        myplaneName(val){
            this.$emit('updatapName',val)
        },
        myplanePrice(val){
            this.$emit('updatapPrice',val)
        },
    }
}
</script>
<style>
.child{
    border: 1px solid red;
    padding: 10px;
}
</style>

在App.vue全局組件中使用子組件Child

<template>
  <div id="app">
    {{ title }}
    <p>汽車信息：{{car}}</p>
    <p>飛機信息：{{planeName}}--{{planePrice}}</p>
    <hr style="margin-top:10px;border:none">
    <!-- 3、使用組件 -->
    <Child :car="car" :planeName="planeName" :planePrice="planePrice" @updatapName="planeName=$event" @updatapPrice="planePrice=$event"></Child>
  </div>
</template>

<script>
// xxx.vue是vue的單文件組件
// 每個vue的單文件組件由三和部分組成：template里面方式模板內(nèi)容，script里面放置js代碼，style里面放置樣式
// 使用組件的步驟
// 1、導(dǎo)入
import Child from './components/Child.vue'
export default {
  // name選項定義組件的名稱
  name: 'App',
  // data選項定義組件的數(shù)據(jù)
  data() {
    return {
      title:'歡迎學(xué)習(xí)vue-cli!',
      car:{
         name:'奔馳',
         price:'50w'
      },
      planeName:'波音747',
      planePrice:'10Y'
    }
  },
  // 2、注冊組件
  components:{
     Child,
  }

}
</script>
<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
#app {
  margin: 10px;
  padding: 10px;
  border: 1px solid #eee;
}
</style>

image.png

(2) 第三方組件ElementUI
定義一個ElementUI組件

<template>
  <div class="el">
    <h4>ElementUI</h4>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "Element",
  data() {
      return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1516 弄'
          }]
      }
  },
};
</script>
<style>
.el {
  border: 1px solid green;
  padding: 10px;
}
</style>

在App.vue全局組件中使用定義的子組件

<template>
  <div id="app">
    <Element></Element>
  </div>
</template>

<script>
// xxx.vue是vue的單文件組件
// 每個vue的單文件組件由三和部分組成：template里面方式模板內(nèi)容，script里面放置js代碼，style里面放置樣式

// 使用組件的步驟
// 1、導(dǎo)入
import Element from './components/Element.vue'
export default {
  // name選項定義組件的名稱
  name: 'App',
  // data選項定義組件的數(shù)據(jù)
  data() {
    return {
  },
  // 2、注冊組件
  components:{
     Element,
  }

}
</script>
<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
#app {
  margin: 10px;
  padding: 10px;
  border: 1px solid #eee;
}
</style>

image.png

更多使用可參考官方文檔：