cli的安裝及介紹

cli

簡介

cli是vue提供的一個用來快速構建項目環境的一個工具，底層使用的是webpack

版本

cli2 cli3

cli3對電腦的配置有一定要求

一、cli的安裝

npm/cnpm/yarn 都可以使用
yarn
1. $ yarn add @vue/cli global 這個是cli3的版本
如果我們還想使用cli2的腳手架，那麼我們可以在安裝一個包
2. $ yarn add @vue/cli-init global
如果安裝3失敗了， 那麼你可以使用cnpm繼續安裝 @vue/cli @vue/cli-init
cnpm
1. $ cnpm i @vue/cli -g 這個是cli3的版本
果我們還想使用cli2的腳手架，那麼我們可以在安裝一個包
2. $ cnpm i @vue/cli-init -g
如果還有問題：
那麼你就不要使用cli3了，你可以單獨安裝cli2

   `$ cnpm i vue-cli -g`

二、 驗證是否安裝成功

命令行輸入： $ vue看是否有東西輸出，如果輸出命令提示，證明安裝成功

三、 創建項目

cli3版本創建

1. 命令創建 【 推薦 】
   $ vue create project

   • 手動選擇配置
   • 如果安裝node-sass出問題，如何解決：
     • 先切換成npm源 nrm use npm
     • 使用cnpm 安裝 cnpm i node-sass sass-loader -D

2. 圖形界面創建
   $ vue ui
   cli2

3. 標準版
   $ vue init webpack project

4. 簡易版
   $ vue init webpack-simple project

5. please pick a preset( user arrow keys ) 使用鍵盤上下鍵來選擇一個配置

1. default 默認配置

2. Manually select features 手動選擇配置

   配置指的是配置webpack

   babel 優雅降級 es6 —> es5

   eslint js語法檢測

   CSS Pre-processors css 預處理語言 less sass/scss stylus

   Linter / Formatter eslint / jslint

   Unit Testing 單元測試

   E2E Testing 端到端的測試

   In dedicated config files 將所選的每一個選項用一個文件來保存（ 配置 ）

Save this as a preset for future projects? 將上面所選的配置保存下來，以備將來的項目使用

我們cli3 使用的包管理器器建議 是 yarn 大家一定要記得配置國內鏡像源

四、分析幾個版本的目錄

cli3

目錄

• node_modules 項目的依賴包
  • cli3webpack配置放在node_modules中
• public 靜態資源目錄
  • img
  • js
  • css
  • favicon.ico 項目標題的logo
  • index.html 根實例組件的模板，也是整個項目的容器
• src 源代碼開發目錄（ 也是開發者主要開發的目錄文件夾 ）
• .gitignore git上傳忽略文件配置
• babel.config.js 優雅降級配置文件 用來將es6 --> es5
• package.json 整個項目的依賴配置文件
• README.md 整個項目啓動的說明性文件
• yarn.lock 真個項目的依賴性文件的信息
• postcss.config.js 項目css預處理的配置
• .browserslistrc 瀏覽器版本的支持

​

cli2 標準版

​ build webpack配置

​ config webpack配置

​ node_modules

​ src

​ static 靜態資源配置

​ js

​ css

​ img

​ .babelrc 優雅降級配置文件

​ .postcssrc css預處理配置文件

​ .editorconfig 編輯器配置文件

​

cli2 簡易版

​ src 源代碼開發目錄

​ webpack.config.js webpack配置文件