vue-cli 腳手架總結

vue-cli 的腳手架項目模板有browserify 和 webpack , 如今本身在用的是webpack , 官網給出了兩個模板： webpack-simple 和 webpack 兩種。兩種的區別在於webpack-simple 沒有包括Eslint 檢查功能等等功能，普通項目基本用webpack-simple 就足夠了. 

搭建官方項目模板步驟： 

一、npm install --global  vue-cli(安裝vue-cli )  有的時候有看到其它兩種寫法:  --save-dev 和 --save的寫法。這兩個有必定的區別，咱們都知道package.json  中有一個 「dependencies」 和 「devDependencies」 的。dependencies 是用在開發完上線模式的，就是有些東西你上線之後還須要依賴的，好比juqery , 咱們這裏的vue 和 babel-runtime（Babel 轉碼器 能夠將ES6 轉爲ES5 ）， 而devDependencies 則是在開發模式執行的，好比咱們若是須要安裝一個node-sass 等等。有的時候看到package.json中安裝的模塊版本號前面有一個波浪線。例如: ~1.2.3 這裏表示安裝1.2.x以上版本。可是不安裝1.3以上。

二、vue init webpack-simple yourdemoname  下載一個webpack-simple項目，這裏的webpack-simple 是固定的，也就是官網的項目模板。youdemoname 這個是你本身項目的名字。 執行這個步驟之後。就會彈出詢問 「項目名稱..項目描述「等等問題 直接按照提示操做。這個時候對應的項目目錄下就出現剛剛創建的項目了。

三、咱們還須要把項目的依賴下載下來。使用命令:  cd youdemoname 而後執行npm install 就能夠了，這個時候你的項目中有多了一個node_modules 目錄

四、使用"npm run dev" 命令來運行項目，這時會默認在瀏覽器中打開http://localhost:8080的地址，若是安裝了vue devTools，還能夠在開發者工具中看到相應的app，以下圖

五、"npm run bulid" 來執行發佈，會自動生成dist文件夾，生成過程及結果以下圖

    

六、使用IIS創建一個站點，目錄定位到index.html所在的位置，而後啓動網站，在瀏覽器中打開，結果以下圖

以上內容參照了http://www.cnblogs.com/Shinnosuke/p/5680818.html一文，但在實踐過程當中，沒有徹底成功，主要是幾個命令，文中已經特別用紅色標出，同時增長了過程和結果圖。