16 Vue-cli腳手架介紹與使用

1. vue-cli -命令行界面, 但是俗稱腳手架.

如果你只是簡單寫幾個Vue的Demo程序, 那么你不需要Vue CLI.如果你在開發大型項目, 那么你需要, 並且必然需要使用Vue CLI,使用Vue.js開發大型應用時，我們需要考慮代碼目錄結構、項目結構和部署、熱加載、代碼單元測試等事情。如果每個項目都要手動完成這些工作，那無以效率比較低效，所以通常我們會使用一些腳手架工具來幫助完成這些事情。

CLI是什么意思?

• CLI是Command-Line Interface, 翻譯為命令行界面, 但是俗稱腳手架.
• Vue CLI是一個官方發布 vue.js 項目腳手架
• 使用 vue-cli 可以快速搭建Vue開發環境以及對應的webpack配置.

      npm安裝,  由於國內直接使用 npm 的官方鏡像是非常慢的，這里推薦使用淘寶 NPM 鏡像。

    你可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

      這樣就可以使用 cnpm 命令來安裝模塊了：

cnpm install [name]

      npm-nodePackage Manager,是一個NodeJS包管理和分發工具，已經成為了非官方的發布Node模塊（包）的標准。

后續我們會經常使用NPM來安裝一些開發過程中依賴包.

1.1 安裝cli

1.   npm config get prefix    配置path

2   npm install -g cnpm --registry=https://registry.npm.taobao.org




第三步（最關鍵！）

npm i npm -g npm i @vue/cli -g //如果還報錯也沒關系，繼續執行下面的命令

cnpm i @vue/cli -g

• 注意：上面安裝的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化項目時不可以的。
• Vue CLI2初始化項目       vue init webpack my-project
• Vue CLI3初始化項目       vue create my-project

1.2 創建腳手架2項目

      具體每一步解釋

目錄結構解釋

       node基於c++開發，具有V8引擎（也是基於c++開發），這個v8引擎是谷歌開發，非常厲害的一款軟件，它可以說是將js代碼直接轉為二進制，這樣瀏覽器顯示快速。而傳統瀏覽器js轉為字節碼轉給瀏覽器，那樣會慢些。因此node可以直接運行js文件。

1.3 ESLINT關閉位置

1.4 runtime-only 和runtimecompiler

     區別只在main.js中