vue-cli 是vue.js的標(biāo)準(zhǔn)工具
vue-cli 需要進(jìn)行一個(gè)全局性的安裝
安裝
npm install -g @vue/cli
# OR
yarn global add @vue/cli
查看版本
vue --version
升級(jí)
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
使用vue-cli
我們需要在終端中輸入
格式：vue create 名稱
名稱不可以是中文掸冤。
vue create hello-world
在我們執(zhí)行完這個(gè)代碼后征唬，我們可以看到以下文件夾
在這個(gè)文件中馍悟，已經(jīng)包含了webpack打包工具孵班，我們?cè)诮K端中運(yùn)行命令由驹。代碼如下：
//這個(gè)是打包執(zhí)行的代碼
npm run build
//運(yùn)行這個(gè)項(xiàng)目
npm run serve
在我們使用vue-cli工具來進(jìn)行項(xiàng)目的開發(fā)邓厕，我們的開發(fā)頁面，我們寫在components文件夾中洽糟，在這個(gè)時(shí)候，我們需要下載一個(gè)插件vetur,在components文件夾中堕战，我們創(chuàng)建以xxx.vue格式的文件坤溃，這個(gè)文件中，我們有三個(gè)部分嘱丢，分別是template薪介、script、style越驻。
在template中汁政，需要有個(gè)根標(biāo)簽<dviv>
在script中道偷，我們需要導(dǎo)出一個(gè)對(duì)象，我們通常會(huì)有一個(gè)name: 姓名
xx.vue 其實(shí)就是一個(gè)組件记劈，所以我們的data是一個(gè)方法放回一個(gè)對(duì)象
<script>
export default {
name: "App",
};
</script>
在style中勺鸦，是寫樣式的
最終我們中引入我們的組件
組件使用步驟
在`App.vue`文件中，用Es6 導(dǎo)入我們的組件 名稱通常跟文件名相同
import Emement from './components/Emement.vue'
在components中注冊(cè)組件 然后在頁面中使用
main.js文件中目木，我們使用render渲染函數(shù)來渲染頁面
//箭頭函數(shù)
render: h => h(App),
//普通函數(shù)
render:function (h) {
return h(App)
}
使用Element-ul組件庫
使用需要下載 npm i element-ui -S,
我們下載完成后需要在main.js頁面中引入
//引入element-ui 組件庫
import ElementUI from 'element-ui';
//引入element-ui 的 css
import 'element-ui/lib/theme-chalk/index.css';
//因?yàn)槭遣寮煌荆枰?Vue.use(ElementUI);
完成以上步驟，就可以使用Element-ul組件庫
ECharts 基于 JavaScript 的開源可視化圖表庫
在終端輸入
npm install echarts --save
在script中引入
import * as echarts from 'echarts';
在生命周期函數(shù)mounted中放入一下實(shí)例代碼
// 基于準(zhǔn)備好的dom刽射，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById("main"));
// 繪制圖表
myChart.setOption({
title: {
text: "ECharts 入門示例",
},
tooltip: {},
xAxis: {
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],
},
yAxis: {},
series: [
{
name: "銷量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
});
