一、什么是Vue CLI

如果你只是簡單寫幾個Vue的Demo程序, 那么你不需要Vue CLI.

如果你在開發大型項目, 那么你需要, 并且必然需要使用Vue CLI

• 使用Vue.js開發大型應用時，我們需要考慮代碼目錄結構、項目結構和部署、熱加載、代碼單元測試等事情。
• 如果每個項目都要手動完成這些工作，那無以效率比較低效，所以通常我們會使用一些腳手架工具來幫助完成這些事情。

CLI是什么意思?

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

腳手架長什么樣子?

二、Vue CLI使用前提 - Node

安裝NodeJS

• 可以直接在官方網站中下載安裝.
• 網址: http://nodejs.cn/download/

檢測安裝的版本

• 默認情況下自動安裝Node和NPM
• Node環境要求8.9以上或者更高版本
  
  

什么是NPM呢?

• NPM的全稱是Node Package Manager
• 是一個NodeJS包管理和分發工具，已經成為了非官方的發布Node模塊（包）的標準。
• 后續我們會經常使用NPM來安裝一些開發過程中依賴包.

cnpm安裝

• 由于國內直接使用 npm 的官方鏡像是非常慢的，這里推薦使用淘寶 NPM 鏡像。
• 你可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm:
  npm install -g cnpm --registry=https://registry.npm.taobao.org
• 這樣就可以使用 cnpm 命令來安裝模塊了：
  cnpm install [name]

三、Vue CLI使用前提 - Webpack

Vue.js官方腳手架工具就使用了webpack模板

• 對所有的資源會壓縮等優化操作
• 它在開發過程中提供了一套完整的功能，能夠使得我們開發過程中變得高效。

Webpack的全局安裝

npm install webpack -g

四、Vue CLI的使用

4.1 安裝Vue腳手架

執行 npm install -g @vue/cli命令，卡住了的解決方案：

vue-cli本來就安裝比較慢（因為是到國外服務器下載），這樣的話就可以用淘寶鏡像來安裝

安裝cnpm，可以cnpm --version檢測是否安裝，如果不是外部命令就執行npm install cnpm -g --registry=https://registry.npm.taobao.org命令安裝cnpm

2.執行 cnpm install -g @vue/cli命令，安裝腳手架

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

4.2 拉取2.x模板：

執行cnpm install @vue/cli-init -g命令

4.3 Vue CLI2初始化項目

vue init webpack my-project

4.4 Vue CLI3初始化項目

vue create my-project

五、Vue CLI2詳解

六、目錄結構詳解

七、Runtime-Compiler和Runtime-only的區別

在使用命令 vue init webpack 項目名稱 創建項目的過程中出現了以下選項：


簡單總結

• 如果在之后的開發中，你依然使用template，就需要選擇Runtime-Compiler
• 如果你之后的開發中，使用的是.vue文件夾開發，那么可以選擇Runtime-only

八、render和template

Runtime-Compiler 和 Runtime-only：

為什么存在這樣的差異呢？

• 我們需要先理解Vue應用程序是如何運行起來的。
• Vue中的模板如何最終渲染成真實DOM。

我們來看下面的一幅圖。
Vue程序運行過程：

九、render函數的使用

十、npm run build

十一、npm run dev

十二、修改配置：webpack.base.conf.js起別名

總結

以上是生活随笔為你收集整理的七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用（安装，拉取2.x模板，初始化项目），Vue cli2详解，Runtime-Compiler和Runtime-only区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。