一悯蝉、初始Vue-Cli
win
1. 安裝
win 鍵 + r 輸入 cmd
然后復(fù)制一下代碼：
npm install -g @vue/cli
OR
yarn global add @vue/cli
2.查看版本
vue --version
3.升級(jí)
npm update -g @vue/cli
或者
yarn global upgrade --latest @vue/cli
3.打開控制臺(tái)
創(chuàng)建一個(gè)項(xiàng)目:(vue create ···)
輸入npm create demo
（創(chuàng)建的名字不能是漢字或大寫字母）
創(chuàng)建項(xiàng)目完成如圖
1212122122.jpg
public :
靜態(tài)目錄一般不動(dòng)它
src :代碼目錄--開發(fā)目錄
打開src文件，最核心的是main.js文件
在src目錄下堪旧，App.vue文件
node_modules :包項(xiàng)目依賴
gitignore :里面存放的是在這個(gè)git倉庫中的忽略文件或目錄
babel.congig.js : （作用） Es6轉(zhuǎn)化為Es5 【有的Es6語法在瀏覽器環(huán)境是無法識(shí)別的，這時(shí)候需要去轉(zhuǎn)換】
2323232323.jpg
生產(chǎn)依賴和開發(fā)依賴
依賴1.jpg
生產(chǎn)依賴：是將來你項(xiàng)目打包的時(shí)候要參與打包
開發(fā)依賴：你在開發(fā)項(xiàng)目的時(shí)候需要依賴
package-lock.json文件可以刪除
發(fā)送項(xiàng)目給別人時(shí)祥楣，可以把node_modules刪除簿晓，(文件太大)
main.js文件
cd demo 跳轉(zhuǎn)到demo
npm run serve 再開發(fā)環(huán)境中運(yùn)行
ctrl + 鼠標(biāo)左鍵 打開預(yù)覽網(wǎng)址（Local：http://localhost:8080/）
開發(fā).jpg
// 導(dǎo)入vue
import Vue from 'vue'
// 導(dǎo)入App組件
import App from './App.vue'
// 導(dǎo)入ElementUI組件庫
import ElementUI from 'element-ui';
// 導(dǎo)入ElementUI組件庫的樣式
import 'element-ui/lib/theme-chalk/index.css';
// 由于ElementUI組件庫是插件始鱼，所有必須要use
Vue.use(ElementUI);
// 不顯示生產(chǎn)提示
Vue.config.productionTip = false
// 創(chuàng)建vue實(shí)例
new Vue({
// render是渲染函數(shù)
render: h => h(App),
}).$mount('#app')
App.vue文件
<template>
<div id="app">
<h2>{{title}}</h2>
<p>汽車信息：{{car}}</p>
<p>飛機(jī)信息：{{planeName}}-{{planePrice}}</p>
<!-- 3.使用組件 -->
<Child :car="car" :planeName="planeName" :planePrice="planePrice"
@updatePName="planeName=$event" @updatePPrice="planePrice=$event"></Child>
<Element></Element>
<Charts></Charts>
</div>
</template>
<script>
// xxx.vue是vue的單文件組件
// 每個(gè)vue的單文件組件由三個(gè)部分組成：template里面放置模板內(nèi)容，script里面放置js代碼鸯旁，style里面放置樣式
// 使用組件的步驟：
// 1.導(dǎo)入組件
import Child from './components/Child.vue'
import Element from './components/ELement.vue'
import Charts from './components/Charts.vue'
export default {
// name選項(xiàng)定義組件的名稱
name: 'App',
// data選項(xiàng)定義組件的數(shù)據(jù)
data() {
return {
title:'歡迎學(xué)習(xí)Vue噪矛，月薪過萬不是夢',
//定義一輛車的信息
car:{
name:'奔馳',
price:'50W'
},
//飛機(jī)信息
planeName:'波音747',
planePrice:'10Y'
}
},
// 2.注冊組件
components:{
Child,
Element,
Charts
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#app {
border: 1px solid #eee;
margin: 10px;
padding: 10px;
}
</style>
在components 創(chuàng)建Child.vue文件
<template>
<div class="child">
<h3>{{title}}</h3>
<hr>
<p>車名：<input type="text" v-model="car.name"></p>
<p>車價(jià)：<input type="text" v-model="car.price"></p>
<hr>
<p>飛機(jī)名稱：<input type="text" v-model="myPlaneName"></p>
<p>飛機(jī)價(jià)格：<input type="text" v-model="myPlanePrice"></p>
</div>
</template>
<script>
// 每個(gè)組件，其實(shí)就是一個(gè)導(dǎo)出的對(duì)象
export default {
name:'Child',
props:['car','planeName','planePrice'],
// 注意：組件里面的data一定要是一個(gè)方法铺罢，由方法返回一個(gè)對(duì)象
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)
}
}
}
</script>
<style>
.child{
border: 1px solid red;
padding: 10px;
}
hr{
margin: 10px 0;
}
</style>
創(chuàng)建Element.vue文件
<template>
<div class="el">
<h3>Element-UI組件庫</h3>
<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>
<el-pagination background layout="prev, pager, next" :total="1000">
</el-pagination>
</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: green solid 1px;
padding: 10px;
margin-top: 10px;
}
</style>
創(chuàng)建Charts.vue文件
在項(xiàng)目中使用ECharts
<template>
<div class="charts">
<h3>在vue項(xiàng)目中使用ECharts</h3>
<div id="main"></div>
</div>
</template>
<script>
// 導(dǎo)入echarts對(duì)象
import * as echarts from "echarts";
export default {
name: "Charts",
data() {
return {
list:[
{
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
}
]
}
},
mounted() {
// 基于準(zhǔn)備好的dom艇挨，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById("main"));
// 繪制圖表
myChart.setOption({
title: {
text: "產(chǎn)品銷售信息",
subtext:'2021-12-8'
},
legend:{
},
tooltip: {},
xAxis: {
// 獲取X軸的數(shù)據(jù)
data: this.list.map(r=>r.title)
},
yAxis:{},
// 獲取系列數(shù)據(jù)
series: [
// 第一個(gè)系列顯示銷量信息
{
name: "銷量",
type: "bar",
data: this.list.map(r=>r.xl)
}
,
// 第二個(gè)系列顯示庫存信息
{
name: "庫存",
type: "bar",
data: this.list.map(r=>r.kc)
}
],
});
},
};
</script>
<style>
.charts {
border: 1px solid blue;
padding: 10px;
margin-top: 10px;
}
.charts #main {
width: 500px;
height: 300px;
border: 1px solid red;
}
</style>
