用慣老版本 vue cli 的同學一般多會選擇使用如下命令來建立模板專案：
vue init webpack demo因為使用了同樣乙個
vue命令，所以之前的會被覆蓋，如果還需要使用，需要自行安裝：
npm install -g @vue/cli-init我們先看一下，如果本地已經安裝了最新版本的 vue cli，執行之前的 vue init 會出現什麼？
命令行會提示你如下內容：
command vue init requires a global addon to be installed.那它背後的設計是如何的呢？please run npm install -g @vue/cli-init and try again.
1、首先還是 vue 的乙個擴充套件命令：
我們還是找到@vue/cli/bin/vue.js，我們發現如下**：
之前我們也提到過，命令列最核心的基礎包是：commander
const program = require('commander')這裡配置了 command、description、option 和 action
program這裡因為我們本地沒有，會報錯進入 catch：.description('generate a project from a remote template (legacy api, requires @vue/cli-init)')
.option('-c, --clone', 'use git clone when fetching remote template')
.option('--offline', 'use cached template')
.action(() =>
error: cannot find module '@vue/cli-init'我們看一下 catch 的處理：
因為有 2 個地方會判斷 err 所以復用了乙個函式：isnotfounderror
const isnotfounderror = err =>注意這裡有乙個策略，在判斷沒有之後，會再次 try catch 到全域性裡面看
catch (err) else**實現如下，用來乙個工具包：}
import-global
try如果再失敗，就只能出提示了，就是上面一開始我們看到的：
這裡用了工具包chalk來給文字做樣式，同時還有乙個有用的：
會判斷你是否安裝了yarn，如果有，就推薦你用它來全域性安裝 @vue/cli-init
判斷函式來自我們之前 config 一直打交道的 @vue/cli-shared-utils
函式名hasyarn：
const = require('@vue/cli-shared-utils')我們看一下具體實現：原始碼在 @vue/cli-shared-utils/lib/env.js
外層有乙個變數：_hasyarn
let _hasyarn函式結構：
exports.hasyarn = () =>然後再看那個變數，有值就直接返回
if (_hasyarn != null)最核心的來了：
使用核心模組 child_process
const = require('child_process')執行 yarnpkg 命令
execsync('yarnpkg --version', )然後分別給變數賦值，有就是 true，否則是 false
------------------------------- 分割線 ----
我們參照建議，全域性安裝之後，我們檢視 @vue/cli-init/index.js
**一共這麼多行：作者在 readme 也提示的很清晰
this is simply an alias to the old[email protected].核心是使用 execa 工具包，執行老版本的 vue-cli/bin/vue-init，傳入了命令列上面的引數（這裡沒有用工具包）
const execa = require('execa')我們看一下在命令列輸入：vue init webpack demo 之後，process.ar** 是什麼？const binpath = require.resolve('vue-cli/bin/vue-init')
execa(
binpath,
process.ar**.slice(process.ar**.indexof('init') + 1),
)
[ '/usr/local/bin/node','/usr/local/bin/vue',process.ar**.indexof('init') + 1 返回的是：'init',
'webpack',
'demo' ]
3process.ar**.slice(3) 返回的是：
[ 'webpack', 'demo' ]------ 分割線 -----
vue系列之vue cli 3引入ts
vue class component 強化 vue 元件，使用 typescript 裝飾器 增強 vue 元件 vue property decorator 在 vue class component 上增強更多的結合 vue 特性的裝飾器 vuex class 基於vue class comp...
vue cli 3學習要點
只整理了一下vue cli 3的基礎內容部分，其他的見官網 一 簡介vue3 1.它可以通過 vue create 快速建立乙個新專案的腳手架，或者直接通過 vue serve 構建新想法的原型，不需要vue2.0那樣用webpack來構建專案 2.在專案建立的過程中，你也會被提示選擇喜歡的包管理器...
vue cli3建立專案
預設 引入elementui 1.安裝element ui npm i element ui s 2.在main.js上新增 import elementui from element ui import element ui lib theme chalk index.css vue.use el...