vue-cli如何快速搭建腳手架

小編給大家分享一下vue-cli如何快速搭建腳手架，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1、安裝

vue-cli 是用 node 編寫的命令行工具，我們需要進行全局安裝。打開命令行工具，輸入指令：

$ npm install -g vue-cli

注意：請確保 node 版本為 4.x、5.x 及以上

安裝完成以后，執行如下命令：

$ vue --version

2、基本使用

生成項目模板的命令格式為

$ vue init <template-name> <project-name>

<template-name>：模板名，比如 webpack, simple, browserify

<project-name>： 本地文件夾名稱

我們可以使用 vue-cli 來快速生成一個基于 Webpack 構建的項目。打開命令行工具，輸入如下命令：

$ vue init webpack my-project

所有模板默認安裝的是 Vue 2.x 版本，如果需要安裝 1.x 版本，需要輸入如下指令：

$ vue init webpack#1.0 my-project

這里先安裝1.0版本，并有一系列交互問題，同意按 y，不同意按 n

安裝命令行給出的提示，我們依次輸入如下指令：

$ cd my-project

$ cnpm install

安裝完畢以后會在對應的目錄下生成如下文件：

下面對上圖目錄做一個簡要的說明

現在啟動項目，輸入如下命令：

$ npm run dev

默認監聽的是 8080 端口

甚至連 Apche服務器都不需要自己啟動，在瀏覽器中輸入 http://localhost:8080，生成的頁面如下：

接下來我們打開 src/components/Hello.vue，把數據中的 msg 改成 “你好，世界！”

<script>
export default {
  data () {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      msg: '你好，世界!'
    }
  }
}
</script>

重新刷新頁面：

3、模板

這里對兩個命令做進一步拓展介紹：

3-1、init

init 命令用來基于指定模板生成項目結構。前面提到過的，template-name 為模板名，project-name 為要生成的目錄名

3-2、list

list 命令用于列出所有可用的模板，通過查詢 https://api.github.com/users/vuejs-templates/repos 這個API 接口可以得到所有列表。

命令行輸入指令：

$ vue list

前面提到，在執行 init 命令時可以指定模板的名字。在默認情況下，vue-cli 會根據所傳入的模板名字去 github 中查找模板。

vue-cli 的模板分為 官方模板、自定義模板、本地模板

（1）、官方模板

上圖中就提供了 5種 官方模板：

• browserify  --  擁有高級功能的 Browserify + vueify 用于 正式開發

• browserify-simple  --  擁有基礎功能的 Browserify + vueify 用于 快速開發

• simple  --  單個 HTML，用于開發最簡單的 Vue.js 應用

• webpack  --  擁有高級功能的 Webpack + vue-loader 用于正式開發

• webpack-simple  --  擁有基礎功能的 Webpack + vue-loader 用于快速開發
  

在這里特別提一下 webpack，前面在安裝 webpack 模板時，有一個選擇項，是否使用 ESLint 來規范你的代碼

ESLint 對于平時不太注意代碼縮進的朋友可能是一個噩耗，我們簡單演示一下，打開 src 下的 App.vue，把代碼稍作修改

<template>
  <div id="app">
	<h3>2017年來啦！</h3>
	<strong>`msg`</strong>
  </div>
</template>

<script>

export default {
  data(){
	return {
		msg:'好好學習 Vue.js！'
	}
  }
}
</script>

刷新頁面，提示了各種代碼縮進、空格 之類的錯誤

（2）、自定義模板

當官方模板不能滿足需求時，我們可以 fork 官方模板按照自己的需求修改后，通過 vue-cli 命令生成基于自己模板的項目結構：

$ vue init username/repo my-project

（3）、本地模板

除了從 github 下載模板外，我們還可以從本地加載模板：

$ vue init ~/fs/path/to-custom-template my-project

4、推薦的工具包

vue-cli 內部使用了很多第三方 npm 包來幫助自己實現一些基礎功能，比如下面這些

4-1、commander

commander 是一個命令行接口的解決方案，它提供了一些接口方便我們對命令行的命令做解析。

倉庫地址：https://github.com/tj/commander.js

4-2、download-git-repo

download-git-repo 用來將相應的 git 庫（Github、GitLab、Bitbucket）下載到指定的本地文件夾。

倉庫地址：https://github.com/flipxfx/download-git-repo

4-3、inquirer

inquirer 是一個常見的交互式命令行用戶頁面的集合，它可以簡化以下流程：

• 提供錯誤反饋

• 詢問問題

• 解析輸入

• 驗證結果
  

倉庫地址： https://github.com/SBoudrias/Inquirer.js

以上是“vue-cli如何快速搭建腳手架”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！