一剩蟀、CLI 的介紹
Vue CLI 是一個基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)舷夺，提供：
- 通過 @vue/cli 實(shí)現(xiàn)的交互式的項(xiàng)目腳手架苦酱。
- 通過 @vue/cli + @vue/cli-service-global 實(shí)現(xiàn)的零配置原型開發(fā)售貌。
- 一個運(yùn)行時依賴 (@vue/cli-service)，該依賴：
①可升級疫萤；
②基于 webpack 構(gòu)建颂跨，并帶有合理的默認(rèn)配置；
③可以通過項(xiàng)目內(nèi)的配置文件進(jìn)行配置扯饶；
④可以通過插件進(jìn)行擴(kuò)展恒削。 - 一個豐富的官方插件集合，集成了前端生態(tài)中最好的工具尾序。
- 一套完全圖形化的創(chuàng)建和管理 Vue.js 項(xiàng)目的用戶界面钓丰。
CLI (@vue/cli) 是一個全局安裝的 npm 包，提供了終端里的 vue 命令每币。
官方文檔：https://cli.vuejs.org/zh/
二携丁、安裝
使用下列任一方法進(jìn)行包的安裝:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
注意：安裝cli包 本地必須要有node環(huán)境和npm（yarn，cnpm）工具（npm是node環(huán)境里面的包管理工具）
安裝之后兰怠，你就可以在命令行中訪問 vue 命令梦鉴。你可以通過簡單運(yùn)行 vue，看看是否展示出了一份所有可用命令的幫助信息揭保，來驗(yàn)證它是否安裝成功肥橙。
查看版本：
vue --version
升級
如果需要升級全局的vue cli包，就運(yùn)行
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
三秸侣、基本使用
1存筏、創(chuàng)建項(xiàng)目
單擊右鍵打開終端（終端配置文件為cmd）
vue create demo //demo 為項(xiàng)目名
注意：項(xiàng)目名不能有中文和大寫字母
點(diǎn)擊回車后會出現(xiàn)以下選項(xiàng)（選擇Default ([Vue 2] babel, eslint) ）
image.png
image.png
編輯器中的空文件夾會變成一個完整的文件夾
node_model：包（項(xiàng)目依賴）
public：靜態(tài)目錄
src：代碼目錄
assets：靜態(tài)資源目錄（整個項(xiàng)目中的圖片，樣式塔次，以及字體圖標(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：項(xiàng)目文檔
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>飛機(jī)名稱：<input type="text" v-model="myplaneName"></p>
<p>飛機(jī)價格：<input type="text" v-model="myplanePrice"></p>
</div>
</template>
<script>
// 每個組件其實(shí)就是一個導(dǎo)出的默認(rèn)對象
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>飛機(jī)信息：{{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選項(xiàng)定義組件的名稱
name: 'App',
// data選項(xiàng)定義組件的數(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選項(xiàng)定義組件的名稱
name: 'App',
// data選項(xiàng)定義組件的數(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
更多使用可參考官方文檔：
