一、全局安裝vue-cli
打開Vue-Cli官網(wǎng)塘慕，找到安裝界面，復(fù)制安裝包的代碼蒂胞。再Windows+R打開電腦終端图呢，輸入cmd，粘貼安裝指令骗随。
Vue-Cli官網(wǎng)：https://cli.vuejs.org/zh/guide/installation.html
可以使用下列任一命令安裝這個新的包：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安裝之后蛤织，你就可以在命令行中訪問 vue 命令。你可以通過簡單運行 vue鸿染，看看是否展示出了一份所有可用命令的幫助信息指蚜，來驗證它是否安裝成功。
你還可以用這個命令來檢查其版本是否正確：
vue --version
如需升級全局的 Vue CLI 包涨椒，請運行：
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
二摊鸡、創(chuàng)建項目
1绽媒、在文件夾中打開終端，創(chuàng)建文件名為demo的項目柱宦。注意：要在cmd環(huán)境下安裝
在當(dāng)前文件目錄中輸入以下代碼
vue create demo
2些椒、創(chuàng)建成功后
在package.json文件中，可以看見有生產(chǎn)環(huán)境依賴（dependencies: 可以參與項目打包）和開發(fā)環(huán)境依賴（devDependencies:不能參與項目打包）
components文件夾中可以存放組件掸刊，App.vue是全局組件，main.js是入口文件赢乓。
注意：xxx.vue是vue的單文件組件忧侧。每個vue的單文件組件由3個部分組成，template里面放置模板內(nèi)容牌芋，script里面放置js代碼蚓炬，style里面放置樣式。
main.js文件中寫入以下代碼
//導(dǎo)入vue
import Vue from 'vue'
//導(dǎo)入app組件
import App from './App.vue'
//不顯示生產(chǎn)提示
Vue.config.productionTip = false
//創(chuàng)建vue實例
new Vue({
//render是渲染函數(shù)
render: h => h(App),
}).$mount('#app')
在開發(fā)環(huán)境中運行可以在當(dāng)前終端文件目錄里輸入以下代碼
npm run serve
執(zhí)行完成后躺屁，會出現(xiàn)以下界面肯夏，點擊任何一條網(wǎng)址并按住Ctrl鍵來運行項目。
在開發(fā)環(huán)境中打包可以在當(dāng)前文件目錄里輸入以下代碼
npm run build
在components文件中創(chuàng)建一個新的組件Child.vue犀暑。注意：組件名稱一般開頭大寫驯击。在組件里寫入以下代碼。
<template>
<div class="child">
<h3>{{title}}</h3>
<p>車名：<input type="text" v-model="car.name"></p>
<p>車價：<input type="text" v-model="car.price"></p>
<hr>
<p>飛機(jī)名稱：<input type="text" v-model="myPlaneName"></p>
<p>飛機(jī)價格：<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!',
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 black;
padding: 10px;
}
hr{
margin: 10px 0;
}
</style>
在全局組建中引入广辰、注冊暇矫、使用子組件。
template>
<div id="app">
<h2>{{title}}</h2>
<p>汽車信息：{{car}}</p>
<p>飛機(jī)信息：{{planeName}}--{{planePrice}}</p>
<Child :car='car' :planeName='planeName' :planePrice='planePrice' @updatePName='planeName=$event' @updatePPrice='planePrice=$event'></Child>
</div>
</template>
<script>
//xxx.vue是vue的單文件組件
//每個vue的單文件組件由3個部分組成择吊，template里面放置模板內(nèi)容李根，script里面放置js代碼，style里面放置樣式几睛。
//導(dǎo)入其他組件的步驟：
//1.導(dǎo)入組件
import Child from './components/Child.vue'
export default {
//name選項定義組件的名稱
name: 'App',
//data選項定義組件的數(shù)據(jù)房轿。
data(){
return {
title:'好好學(xué)習(xí)，爭取拿高薪Ｍ鞒ぁ＜叫！',
//定義一輛車的信息
car:{
name:'奔馳',
price:'30W'
},
//飛機(jī)信息
planeName:'波音747',
planePrice:'2000W'
}
},
//2.注冊組件
components:{
Child
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#app {
border: 1px solid blue;
padding: 10px;
}
</style>
在components文件夾里在創(chuàng)建一個新的子組件Element-UI組件必峰。首先需要重新開啟一個終端洪唐，并在當(dāng)前demo文件目錄里安裝Element-UI包。
Element-UI官網(wǎng)地址：https://element.eleme.cn/#/zh-CN/component/installation
npm i element-ui -S
在 main.js 中寫入以下內(nèi)容：
//導(dǎo)入Element-UI組件庫
import ElementUI from 'element-ui';
//導(dǎo)入Element-UI組件庫的樣式
import 'element-ui/lib/theme-chalk/index.css';
//由于Element-UI組件庫是插件吼蚁，所以必須要use
Vue.use(ElementUI);
在Element.vue文件里面可以直接從官網(wǎng)上復(fù)制代碼來使用凭需。
<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
:page-size="20"
:pager-count="11"
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: 1px solid red;
margin: 10px 0;
padding: 10px;
}
</style>
在全局組件中導(dǎo)入问欠、注冊、使用Element-UI子組件粒蜈。
<template>
<div id="app">
<Element></Element>
</div>
</template>
<script>
import Element from './components/Element.vue'
export default {
//name選項定義組件的名稱
name: 'App',
//2.注冊組件
components:{
Element,
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#app {
border: 1px solid blue;
padding: 10px;
}
</style>
在components文件夾里再創(chuàng)建一個新的子組件Charts組件顺献。首先需要重新開啟一個終端，并在當(dāng)前demo文件目錄里安裝 ECharts包枯怖。
ECharts官方地址：https://echarts.apache.org/zh/index.html
npm install echarts --save
注意：為了避免彈出提示語句‘定義但沒有使用’注整，我們需要在package.json文件中，加入以下代碼度硝。更改了package.json文件肿轨，就一定要退出當(dāng)前終端（ctrl+C之后 再次運行npm run serve）
"rules": {
"no-unused-vars":"off"
}
在Charts.vue文件中可以寫入以下代碼。
<template>
<div class="charts">
<h3>在Vue項目中使用ECharts</h3>
<div id="main"></div>
</div>
</template>
<script>
//導(dǎo)入ECharts對象
import * as echarts from "echarts";
export default {
name: "Charts",
data(){
return {
list:[
{
title:'襯衫',
xl:5,
kc:10
},
{
title:'羊毛衫',
xl:20,
kc:12
},
{
title:'雪紡衫',
xl:36,
kc:22
},
{
title:'褲子',
xl:10,
kc:23
},
{
title:'高跟鞋',
xl:10,
kc:33
},
{
title:'襪子',
xl:20,
kc:30
}
]
}
},
mounted() {
// 基于準(zhǔn)備好的dom蕊程，初始化echarts實例
var myChart = echarts.init(document.getElementById("main"));
// 繪制圖表
myChart.setOption({
title: {
text: "產(chǎn)品銷售信息",
subtext:'2021-12-08'
},
tooltip: {},
legend:{},
xAxis: {
//獲取x軸的數(shù)據(jù)
data:this.list.map(r=>r.title)
},
yAxis: {},
//獲取系列數(shù)據(jù)
series: [
//第一個系列顯示銷量信息
{
name: "銷量",
type: "bar",
data: this.list.map(r=>r.xl),
},
//第二個系列顯示庫存信息
{
name: "庫存",
type: "bar",
data: this.list.map(r=>r.kc),
}
],
});
},
};
</script>
<style>
.charts {
border: 1px solid brown;
padding: 10px;
margin-top: 10px;
}
.charts #main {
width: 500px;
height: 400px;
border: 1px solid green;
}
</style>
在全局組件中引入椒袍、注冊、使用Charts子組件藻茂。
<template>
<div id="app">
<Charts></Charts>
</div>
</template>
<script>
//xxx.vue是vue的單文件組件
//每個vue的單文件組件由3個部分組成驹暑，template里面放置模板內(nèi)容，script里面放置js代碼辨赐，style里面放置樣式优俘。
//導(dǎo)入其他組件的步驟：
//1.導(dǎo)入組件
import Charts from './components/Charts.vue'
export default {
//name選項定義組件的名稱
name: 'App',
//2.注冊組件
components:{
Charts
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#app {
border: 1px solid blue;
padding: 10px;
}
</style>
