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è)代碼后，我們可以看到以下文件夾

完整內(nèi)容

在這個(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],
        },
      ],
    });

官方網(wǎng)址