13. Vue CLI腳手架

一. Vue CLI 介紹

1. 什麼是Vue CLI?

Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統。Vue CLI 致力於將 Vue 生態中的工具基礎標準化。它確保了各類構建工具可以基於智能的默認配置便可平穩銜接，這樣你能夠專一在撰寫應用上，而沒必要花好幾天去糾結配置的問題。與此同時，它也爲每一個工具提供了調整配置的靈活性。

• CLI的全拼是Command-Line Interface, 命令行界面, 俗稱腳手架
• 它是一個專門爲單頁面應用快速搭建繁雜的腳手架,能夠輕鬆的建立新的應用程序,並且可用於自動生成vue和webpack的項目模板。
• 若是開發大型項目, 咱們必然須要使用Vue CLI
• Vue CLI爲咱們提供了清晰的代碼目錄結構, 項目結構、部署， 熱加載，單元測試等功能。能夠提升開發者的工做效率。

  2. Vue CLI依賴的環境

• 依賴NodeJS和NPM：

  • 安裝nodeJS, 默認會安裝NPM, NodeJs的版本一般要在8.9以上。
  • NPM的全稱是： Node Package manager 。node包的管理和分發工具

  • 國內npm有時很慢， 能夠安裝cpnm鏡像， 這是一個淘寶npm鏡像。

    使用淘寶定製的cnpm命令行工具替代默認的npm工具
    npm install -g cnpm --registry=https://registry.npm.taobao.org

    這樣就可使用cnpm來安裝模塊了

    使用淘寶定製的cnpm命令行工具替代默認的npm工具
    npm install -g cnpm --registry=https://registry.npm.taobao.org

• 依賴webpack
  • Vue.js官方腳手架工具使用了webpack模板， 對全部資源進行了壓縮優化，在開發過程當中提供了一套完整的功能， 提升開發效率
  • webpack的全局安裝

    npm install webpack -g

  • 詳細瞭解webpack能夠參考文章----vue之webpack打包原理和用法詳解

二. Vue CLI 腳手架安裝

第一步： 安裝NodeJs

官網下載nodejs: https://nodejs.org/en/

而後解壓安裝, 查看nodejs的版本

node -v

第二步： 安裝全局webpack

webpack有全局安裝和局部安裝. 全局安裝是全部服務共有. 局部安裝是對某個項目單獨安裝webpack的版本. 全局webpaack和局部webpack版本能夠不同

npm install webpack -g

第三步： 安裝局部本地webpack

安裝局部webpack
npm install webpack --save-dev

第四步：安裝Vue Cli 腳手架

這裏須要說名Vue CLI版本的問題. 如今在用的Vue CLI的版本有2, 3, 4. 他們到底有什麼區別呢?
vue2和vue3的差異很大, vue3和vue4的差異較小.下面詳細說說他們的區別

1. vue2, vue3, vue4的區別

• 安裝, 卸載
  vue-cli2

  全局安裝：npm install -g vue-cli 或 cnpm install -g vue-cli
  卸載：npm uninstall -g vue-cli 或 cnpm uninstall -g vue-cli

  vue-cli3 和vue-cli4

  全局安裝：npm install -g @vue/cli@版本號 或 cnpm install -g @vue/cli@版本號
  卸載：npm uninstall -g @vue/cli@版本號 或 cnpm uninstall -g @vue/cli@版本號

  可使用@指定版本號, 若是不指定版本號, 默認下載的是4的版本

• 項目建立
  vue-cli2：

  vue init webpack demo

  vue-cli3和vue-cli4

  vue create demo

• 項目結構
  vue-cli2:

vue-cli3和vue-cli4:

• 項目啓動
  vue-cli2:

npm run dev

vue-cli3和vue-cli4

npm run serve

以上區別都是宏觀表現上的不一樣, 具體到代碼級別, 咱們會後面繼續說

由於如今vue2,3,4都有使用, 因此, 咱們學的時候都會學習.

2 安裝vue腳手架

vue-cli官網: https://cli.vuejs.org/,
執行安裝命令:

npm install -g @vue/cli

查看安裝的版本

vue -V 或者 vue --version

b)安裝舊版本的vue

使用舊版本的 vue init 功能, 能夠全局安裝一個橋接工具

npm install -g @vue/cli-init

而後, 在執行

3、Vue CLI腳手架搭建項目

咱們安裝的時候, 安裝vue4, 但咱們的項目多是老版本的項目. 或者咱們想要建立老版本的項目. 咱們能夠在安裝一個vue的橋接工具.

1. 搭建vue2的項目.

下面, 咱們想要建立一個vue2的項目,
首先: 安裝vue的橋接工具.

npm install -g @vue/cli-init

如今就能夠建立vue2的項目了.

接下來建立項目

vue init webpack my-project

首次建立項目, 會去下載component組件. 這個下載過程很慢, 咱們能夠採用離線下載cli-component的方式.

2. 離線安裝vue-cli

經過vue-cli工具命令vue init webpack vuedemo建立vue項目的時候報錯，提示鏈接超時

vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 192.30.253.112:443

解決辦法有兩個

a. 使用cnpm. 安裝一個淘寶鏡像
b. 下載離線組件包, 而後離線安裝

這裏重點說一下第二個方案:

第一步: github下載vue-cli component

https://github.com/vuejs-templates/webpack

若是打開github很慢, 能夠試用github加速器打開

https://toolwa.com/github/

第二步: 下載以後的壓縮包爲webpack-版本號.zip，咱們解壓以後，須要更改目錄名爲webpack

而後在用戶目錄下建立一個文件夾: .vue-templates, 注意ve-templates前面的點(.)
咱們再進行vue init webpack vuedemo命令的時候，須要帶上參數--offline表示離線初始化

vue init webpack vuecli2 --offline

而後會提示有不少選項, 根據須要選擇.

第三步: 而後運行命令啓動項目便可.

npm run dev

看到下面的頁面就成功了

四. vue腳手架安裝時的含義及項目結構

as