vue-cli 是vue.js的標準工具
vue-cli 需要進行一個全局性的安裝
安裝
npm install -g @vue/cli
# OR
yarn global add @vue/cli
查看版本
vue --version
升級
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
使用vue-cli
我們需要在終端中輸入
格式：vue create 名稱
名稱不可以是中文。
vue create hello-world
在我們執行完這個代碼后，我們可以看到以下文件夾
完整內容
在這個文件中，已經包含了webpack打包工具，我們在終端中運行命令。代碼如下：
//這個是打包執行的代碼
npm run build
//運行這個項目
npm run serve
在我們使用vue-cli工具來進行項目的開發，我們的開發頁面，我們寫在components文件夾中，在這個時候，我們需要下載一個插件vetur,在components文件夾中，我們創建以xxx.vue格式的文件，這個文件中，我們有三個部分，分別是template、script、style。
在template中，需要有個根標簽<dviv>
在script中，我們需要導出一個對象，我們通常會有一個name: 姓名
xx.vue 其實就是一個組件，所以我們的data是一個方法放回一個對象
<script>
export default {
name: "App",
};
</script>
在style中，是寫樣式的
最終我們中引入我們的組件
組件使用步驟
在`App.vue`文件中，用Es6 導入我們的組件 名稱通常跟文件名相同
import Emement from './components/Emement.vue'
在components中注冊組件 然后在頁面中使用
main.js文件中，我們使用render渲染函數來渲染頁面
//箭頭函數
render: h => h(App),
//普通函數
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';
//因為是插件，需要引入
Vue.use(ElementUI);
完成以上步驟，就可以使用Element-ul組件庫
ECharts 基于 JavaScript 的開源可視化圖表庫
在終端輸入
npm install echarts --save
在script中引入
import * as echarts from 'echarts';
在生命周期函數mounted中放入一下實例代碼
// 基于準備好的dom，初始化echarts實例
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],
},
],
});
