VUE之搭建腳手架

目錄(?)[-]javascript

1 安裝以前須要檢查是否已經安裝NodeJS的環境

使用 Vue.js 開發大型應用時，咱們須要考慮代碼目錄結構、項目構建和部署、熱加載、代碼單元測試等事情。若是每一個項目都要手動完成這些工做，那無疑效率是低下的，因此一般咱們會使用一些腳手架工具來幫助完成這些事情。在 Vue.js 生態中咱們可使用 vue-cli 腳手架工具來快速構建項目。vue

（1）安裝以前須要檢查是否已經安裝NodeJS的環境

可使用node -v檢查，且須要保證安裝4.0版本以上的nodejs環境java

執行命令node -v 安裝的版本爲 v6.9.4node

若是沒有安裝則執行下面的步驟：node.js安裝過程以下：

 
     node.js相關的網站http://www.cnodejs.org/ 
    

 
     安裝文件下載地址：https://nodejs.org/en/

 
     下載獲得壓縮文件node-v6.9.4-c64.msi

 
     獲得安裝包： 
    

 
     雙擊進行安裝

 
     默認的安裝路徑是C:\Program Files\nodejs 
    

 
     查看安裝目錄

 
     能夠發現node.js自帶了npm，咱們能夠直接使用npm安裝其餘的相關環境便可。 
    

 
     安裝命令爲 ： npm install 組件名稱 
    

 
     默認狀況下，組件都是安裝在C:\Program Files\nodejs\node_modules文件夾下的 
    

 
     可是一般狀況下，咱們須要安裝一個全局的組件，纔可以使用 
    

 
     這時安裝命令爲：npm install 組件名稱 -g 
    

 
     node.js就安裝完成

（2）安裝vue-cli

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

$ npm install -g vue-cliwebpack

也能夠安裝一個npm的淘寶鏡像，這樣安裝快一些git

安裝命令以下：github

npm install -g cnpm --registry=https://registry.npm.taobao.org
web

安裝完成之後，執行以下命令：

$ vue --versionvue-cli

獲得安裝的vue版本是2.8.1npm

（3）基本使用

 
      初始化項目 
     

 
      定位到建立項目的目錄下 
     

 
      執行命令：vue init 模板類型 項目名稱 
     

 
      模板類型可使用vue list指令查看 
     

 
      項目名稱能夠本身定義vue 
     

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

$ 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

有一系列交互問題，贊成按 y，不一樣意按 n。

初始化項目以後，查看項目目錄以下：

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

$ cd my-project

$ npm install

安裝過程以下：

安裝完畢之後會在對應的目錄下生成以下文件，多了一個node-module文件，裏面是依賴的node工具包：

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

如今啓動項目，輸入以下命令：

$ 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>

從新刷新頁面：

（4）模板

這裏對兩個命令作進一步拓展介紹：

4-一、init

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

4-二、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">
<h2>2017年來啦！</h2>
<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

五、推薦的工具包

vue-cli 內部使用了不少第三方 npm 包來幫助本身實現一些基礎功能，好比下面這些
5-一、commander
commander 是一個命令行接口的解決方案，它提供了一些接口方便咱們對命令行的命令作解析。
倉庫地址：https://github.com/tj/commander.js

5-二、download-git-repo