有時候我們為了快速搭建一個vue的完整系統，經常會用到vue-cli，vue-cli用起來很方便而且命令簡單容易上手，但缺點是在構建的時候我感覺有一些慢，因為CLI 服務 (@vue/cli-service) 是一個開發環境依賴。它是一個 npm 包，局部安裝在每個 @vue/cli 創建的項目中，本質上還是用npm和webpack來進行安裝，並沒用用我們所常用的cnpm來安裝。如果你熟悉 create-react-app 的話，@vue/cli-service 實際上大致等價於 react-scripts，雖然功能集合不一樣。
cli還有一點好處是你可以自己決定需要什么和不需要什么，當然在安裝初期可選包的都是一些基本的，包括bel/TypeScript 轉譯、ESLint 集成、單元測試和 end-to-end 測試等。當你在執行npm run serve時，會運行vue-cli-service命令，它會自動解析並加載 package.json 中列出的所有 CLI 插件。
一、安裝很簡單，這里只說npm安裝，vue-cli全局安裝，一生只裝一次。 -g表示全局安裝
npm install -g @vue/cli
檢測是否安裝成功也很簡單，看一下是否可以在cmd中用vue命令。
這里用vue -V，來查看所安裝的版本。
二、快速原型開發
什么意思呢，就是如果我手里有一個.vue文件來進行需要進行調試，或者是我只開發一個頁面，那么我不用去啟動一個很繁瑣的工程，這樣太浪費時間，一個頁面也能馬上展示。
1、npm install -g @vue/cli-service-global //首先我們需要安裝一個全局擴展，-g表示全局。
2、創建一個vue文件或者是js文件。我們這里創建了一個后綴為vue的文件。
<template>
<div id="todo-list-example">
<form v-on:submit.prevent="addNewTodo">
<label for="new-todo">Add a todo</label>
<input
v-model="newTodoText"
id="new-todo"
placeholder="E.g. Feed the cat"
>
<button>Add</button>
</form>
<ul>
<li v-for="(todo, index) in todos">{{todo.title}}<button id="removeBtn" @click="remove(index)">Remove</button></li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
newTodoText: '',
nextTodoId: 1,
todos: [
{
id: 1,
title: 'Do the dishes',
}
]
}
},
methods: {
addNewTodo: function () {
this.todos.push({
id: this.nextTodoId++,
title: this.newTodoText
})
this.newTodoText = ''
},
remove(index) {
this.todos.splice(index,1);
}
}
}
</script>
<style>
#removeBtn {
margin-left: 12px;
}
</style>
然后我們就可以在這個目錄下直接啟動運行了，這里需要注意的是，如果把他命名為app.vue，可以直接用vue serve來啟動，如果我們的名字是類似於很隨意的如lzhe.vue之類，那么我們顯示的指定入口vue serve lzhe.vue來啟動。
當然這里啟動vue也有一些配置選項如下：
Options: -o, --open 打開瀏覽器 -c, --copy 將本地 URL 復制到剪切板 -h, --help 輸出用法信息
原型快速開發對單個vue調試感覺還是挺有用的，不用去創建一個項目去調試。
三、創建一個完整的項目
可以用 vue create lzhe 命令來創建一個名為lzhe的項目，創建期間會提示preset（預選），詢問你要安裝哪些特性。我這里有三個選項，一目了然每一項后面是安裝的特性，最后一個選項是是一個手動選擇特性，他提供了更多的選項，可自由配置。確定后回車即可。
以下是一個手動選擇：
其中a是全選，空格是選中或取消
四、vue ui可以使用圖形化界面來創建和管理項目
如果覺得這樣太麻煩了，還要按鍵盤，我們可以用vue ui來使用圖形化來創建項目，在cmd中輸入vue ui，進入配置頁面看一下，很容易就能實現創建一個項目。