學習要點：1.構建工具簡介 2.Vue-cli 安裝
本節課我們來開始了解 Vue 官方的構建工具 Vue-cli 以及安裝方式。
一．構建工具簡介
1. Vue-cli，我們俗稱為腳手架，它是官方提供的 Vue 構建工具；
2. 那這種構建工具有什麼用？有啥特性？具體如下：
(1) .功能豐富：支持 Babel、Ts、ESLint、PostCss 等；
(2) .易於擴展：有很多插件和常用的構建解決方案；
(3) .圖形界面：不但可以通過命令構建項目，還可以通過 Web 界面構建；
(4) .封裝的 Webpack：簡化各種命令和配置，實現零配置開發；
(5) .快速創建：便捷快速搭建 Vue 項目。
二．Vue-cli 安裝
1. 學習 Vue-cli 構建工具，先學習 Vue.js 的語法基礎，再了解下 Webpack；
2. 安裝 Vue-cli，需要使用 Node.js，在 【項目實戰】 課程已經講過，具體如下：
(1) .安裝需要使用 npm(或 cnpm)，需要去安裝 Node.js，開發工具使用 vscode；
(2) .找到官網下載 node.js，任意版本均可，下載安裝，在命令行測試版本號：
(3) .創建一個 vscode 項目，準備使用 npm 安裝，可以先測試版本號：
npm -vnpm config get registry //查看鏡像，不是國內，設置淘寶鏡像即可npm config set registry https://registry.npm.taobao.org(4) .有時 npm 命令不太穩定，報錯的話，可以使用 cnpm，語法一模一樣；
3. 安裝之前，我們可以先執行一下 vue-cli 的命令，比如查看下版本號；
4. 如果無法使用 vue-cli 命令，則我們需要安裝 vue-cli，具體如下；
5. 打開我們的開發工具，比如 vscode，創建 VueCli 目錄用於測試；
6. 我們先創建一個快速原型開發，來調試單個 Vue 文件，不過需要安裝擴展；
npm i @vue/cli-service-global -g7. 安裝好擴展之後，我們在根目錄創建 App.vue 文件(這是默認啟動文件)；
<template> <h1>Hello, Vue Cli！</h1></template>PS：快速原型開發就是調試一個單個.vue 組件，非完整項目；
8. 使用 vue serve 目錄，可以直接運行；使用 vue build 可以打包；
9. 如果非默認啟動的.vue 文件，可以結合參數選項啟動；
-o, --open 打開瀏覽器
-c, --copy 將本地 URL 複製到剪切板
-h, --help 輸出用法信息
如果您覺得有用，記得在下方點讚、關注、留言，小編會定期奉上更多的驚喜哦，您的打賞支持才是小編繼續努力的動力，麼麼噠。
每日分享在學習過程中總結的學習經驗，學習筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學習為目的，每天閱讀一篇文章，了解身邊的技術，陪有夢想的人一起成長！