Vue-cli文檔 =>火速一鍵進入學(xué)習(xí)
一围俘、初始Vue-cli
1.介紹&安裝
Vue-cli就是Vue的開發(fā)者工具(腳手架工具)
電腦中打開cmd楷拳，首先先檢查node及npm是否安裝吏奸，用node -v 及 npm -v來檢測版本號
① 首先在全局cmd中安裝 npm install -g @vue/cli 奋蔚，
后使用vue --version來檢測版本號是否正確，需4.5.以上的版本坤按。
② 如何創(chuàng)建項目： 使用vue create +項目名(名稱內(nèi)不能有中文及大寫字母)例如vue create demo馒过，選擇Default Vue2，即可創(chuàng)建完成来累。
其中
public是靜態(tài)目錄窘奏，
src為代碼目錄
（其中assets為靜態(tài)資源目錄着裹，一般項目中的樣式，字體摔竿，圖標(biāo)都放在assets中；components為組件存放的包但金；App.vue是全局組件郁季；main.js是入口文件，main.js中的#app實例在public的index.html中）梦裂，
node_modules是項目依賴(包)年柠，
babel.config.js是es6轉(zhuǎn)es5的文件，
package.json是包的描述文件答憔。
如何運行網(wǎng)頁：首先跳轉(zhuǎn)到根目錄掀抹，再 npm run serve 指令。
③ components中每個文件就是一個組件蓉驹，每個組件由三個部分組成揪利；
xxx.vue是vue的單文件組件疟位，template放置模板內(nèi)容，script里面放置js代碼绍撞，style里面放置樣式代碼罢吃。一般習(xí)慣組件的首字母大寫尿招。
2.創(chuàng)建組件
① 單文件組件
單文件組件：把一個組件全部內(nèi)容匯合到一個文件中阱驾，文件名字是以 .vue 結(jié)尾怪蔑，這個文件就是單文件組件缆瓣。
xxx.vue是vue的單文件組件。
每個vue的單文件組件由三個部分組成：template里面放置模板內(nèi)容隧甚，script里面放置js代碼渡冻，style里面放置樣式族吻。
<template>
<div>
</div>
</template>
<script>
export default {
name:'Child'
}
</script>
<style>
</style>
② 使用組件的步驟
（1）導(dǎo)入組件：
import Child from './components/Child.vue'
（2）注冊組件：
export default {
// name選項定義組件的名稱
name: 'App',
components:{
Child
}
}
③ 使用組件
<div id="app">
<Child></Child>
</div>
3.父子組件之間傳值
(1) 子組件
子組件通過props定義屬性，接收父組件傳過來的數(shù)據(jù)砍艾。
props中定義的屬性是只讀巍举、不可修改的禀综，不過可以在data中對父組件傳遞過來的值進行中轉(zhuǎn)苔严，以修改data中的數(shù)據(jù)届氢。如果屬性是一個對象，可以通過 obj.屬性名 修改對象的屬性值岖妄。
子組件通過$emit()觸發(fā)自定義事件寂祥，將最新的數(shù)據(jù)作為事件對象傳回去丸凭。
<div class="child">
<h3>{{title}}</h3>
<hr>
<p>車名：<input type="text" v-model="car.name"></p>
<p>車價：<input type="text" v-model="car.price"></p>
<hr>
<p>飛機名稱：<input type="text" v-model="myPlaneName"></p>
<p>飛機價格：<input type="text" v-model="myPlanePrice"></p>
</div>
// 每個組件腕铸，其實就是一個導(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('updatePName',val)
},
myPlanePrice(val){
this.$emit('updatePPrice',val)
}
}
}
(2) 父組件
父組件可以通過綁定屬性汽烦，將數(shù)據(jù)傳給子組件撇吞。
父組件通過綁定自定義事件，更新數(shù)據(jù)言疗。
<div id="app">
<h2>{{title}}</h2>
<p>汽車信息：{{car}}</p>
<p>飛機信息：{{planeName}}-{{planePrice}}</p>>
<Child :car="car" :planeName="planeName" :planePrice="planePrice"
@updatePName="planeName=$event" @updatePPrice="planePrice=$event"></Child>
</div>
import Child from './components/Child.vue'
export default {
// name選項定義組件的名稱
name: 'App',
// data選項定義組件的數(shù)據(jù)
data() {
return {
//定義一輛車的信息
car:{
name:'奔馳',
price:'50W'
},
//飛機信息
planeName:'波音747',
planePrice:'10Y'
}
},
components:{
Child
}
}
4.如何在腳手架的環(huán)境中噪奄，使用第三方組件庫 =>>> Element-UI組件庫導(dǎo)入并使用
ElementUI用法
(1) 安裝 npm i element-ui -S
(2) 在main.js文件中：
導(dǎo)入ElementUI組件庫import ElementUI from ' element-ui'
導(dǎo)入ElementUI組件庫的樣式import 'element-ui/lib/theme-chalk/index.css'
由于ElementUI組件庫是插件人乓，所以必須要use一哈 Vue.use(ElementUI)
后續(xù)將第三方組件庫中的代碼及data數(shù)據(jù)引入componetns文件中
(1) 安裝
npm i element-ui -S
(2) 導(dǎo)入
// 導(dǎo)入element-ui組件庫
import ElementUI from 'element-ui';
// 導(dǎo)入element-ui組件庫的樣式
import 'element-ui/lib/theme-chalk/index.css';
// 注意：element-ui組件庫色罚，是一個插件，所有的插件都要由Vue去use
Vue.use(ElementUI);
(3) 使用
<template>
<div class="el">
<h3>Element-UI組件庫</h3>
<el-pagination background layout="prev, pager, next" :total="1000">
</el-pagination>
</div>
</template>
<script>
export default {
name: "Element"
};
</script>
<style>
.el {
border: green solid 1px;
padding: 10px;
margin-top: 10px;
}
</style>
5.如何在vue的工程化的環(huán)境中去使用可視化Echarts呢
(1) 在創(chuàng)建的項目demo安裝
npm install echarts --save
(2) 在需要使用圖表庫的組件中導(dǎo)入echarts對象
import * as echarts from 'echarts';
(3) 在需要使用圖表庫的組件中準(zhǔn)備容器
<div class="charts">
<h3>在vue項目中使用ECharts</h3>
<div id="main"></div>
</div>
(4) 選擇示例圖
在官網(wǎng)找到想要的示例，下載示例腌且。
(5) 引入 ECharts
基于準(zhǔn)備好的dom初始化echarts實例铺董，繪制圖表精续。因為該項目是基于vue，所以需要在mounted生命周期中進行這一步（獲取dom顷级，需要在頁面掛載完成后進行）确垫。
- 柱狀圖實例
在需要使用ECharts圖表庫的組件(components下的xxx.vue)中export default對外輸出本模塊變量
export default {
name: "Charts",
data(){
return {
list:[
{
title:'襯衫',
sale:5,
stock:9
},
{
title:'羊毛衫',
sale:20,
stock:19
},
{
title:'雪紡衫',
sale:36,
stock:55
},
{
title:'褲子',
sale:10,
stock:2
},
{
title:'高跟鞋',
sale:10,
stock:5
},
{
title:'襪子',
sale:20,
stock:35
},
]
}
},
mounted() {
// 基于準(zhǔn)備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById("main"));
// 繪制圖表
myChart.setOption({
title: {
text: "產(chǎn)品銷售信息",
subtext:'2021-12-18'
},
legend:{
},
tooltip: {},
xAxis: {
// 獲取x軸的數(shù)據(jù)
data: this.list.map(r=>r.title)
},
yAxis: {},
// 獲取系列數(shù)據(jù)
series: [
// 第一個系列顯示銷量信息
{
name: "銷量",
type: "bar",
data: this.list.map(r=>r.sale)
},
// 第二個系列顯示庫存信息
{
name: "庫存",
type: "bar",
data: this.list.map(r=>r.stock)
},
],
});
},
};
</script>
然后在App.vue中三部曲1.導(dǎo)入組件 2.注冊組件3.使用組件
import Charts from './components/Charts.vue'
export default {
name: 'App',
data() {
return {
}
},
components:{
Charts
}
}
<div id="app">
<Charts></Charts>
</div>
彳亍嚣镜，結(jié)束
以下是正經(jīng)的丁老師的代碼了(￣▽￣)～■干杯□～(￣▽￣)：通過axios獲取后臺數(shù)據(jù)菊匿。（注意：axios需要先安裝计福，再導(dǎo)入）
// 導(dǎo)入axios
import axios from "axios";
export default {
name: "Test",
data() {
return {
// 定義一份數(shù)據(jù)
list: [],
};
},
methods: {
// 加載數(shù)據(jù)的方法
async getList() {
// 向后臺發(fā)送請求象颖，獲取一份數(shù)據(jù)
let {data} = await axios.get("data/data2.json");
this.list = data
this.showdata()
},
// 渲染數(shù)據(jù)的方法
showdata() {
// 基于準(zhǔn)備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById("main"));
// 繪制圖表
myChart.setOption({
title: {
text: "產(chǎn)品銷售信息",
// 副標(biāo)題
subtext: "2021-12-08",
},
// 圖例組件
legend: {},
tooltip: {},
// X軸信息
xAxis: {
// 產(chǎn)品名稱數(shù)據(jù)作為X軸信息展示
data: this.list.map((r) => r.title),
},
// Y軸信息
yAxis: {},
// 系列
series: [
{
name: "銷量",
type: "bar",
data: this.list.map((r) => r.xl),
},
{
name: "庫存",
type: "bar",
data: this.list.map((r) => r.kc),
},
],
});
},
},
// 頁面掛載完成
mounted() {
this.getList();
},
};
數(shù)據(jù)：
[
{
"title": "襯衫",
"xl": 5,
"kc": 9
},
{
"title": "羊毛衫",
"xl": 20,
"kc": 19
},
{
"title": "雪紡衫",
"xl": 36,
"kc": 55
},
{
"title": "褲子",
"xl": 10,
"kc": 2
},
{
"title": "高跟鞋",
"xl": 10,
"kc": 5
},
{
"title": "襪子",
"xl": 20,
"kc": 35
}
]
ps：
export主要用于對外輸出本模塊變量的接口，一個文件就可以被理解為一個模塊陶冷。export就是導(dǎo)出埂伦。
import就是在一個模塊中加載另一個含有export接口的模塊， import就是導(dǎo)入膊毁。
export default和export都能導(dǎo)出一個模塊里面的常量基跑，函數(shù)，文件缭召，模塊等逆日，在其它文件或模塊中通過import來導(dǎo)入常量室抽，函數(shù)靡努，文件或模塊晓折。這樣就可以使用它們了漓概。但是病梢，在一個文件或模塊中，export,import可以有多個觅彰，export default卻只能有一個钮热。
通過export方式導(dǎo)出隧期，在導(dǎo)入的時候需要加{}大括號，export default 就不需要{}
原文鏈接
ps:可以在pachage.json 里off 掉半吊子提示（改了之后必須CTRL+C退出終端读拆，重新npm run serve
Echarts是一個基于 JavaScript 的開源可視化圖表庫檐晕。
=>> 一鍵進入 Echarts官方
=>> 文檔-查看API手冊....去舊版本
