搭建Vue腳手架（vue-cli）並建立一個項目

一、 安裝nodejs環境

首先確保安裝了node

node -v

npm -v

若是能看到node和npm的版本號了，說明已經安裝成功 

注：node版本最好高一點，保險的話直接安裝最新版本的，由於vue運行須要基於npm必定的版本（最好是3.x.x以上），版本低了有可能會出錯，而npm是隨node的安裝自動安裝的，直接安裝最新的node，npm的版本號也會變高的，不用再作更多的操做，固然，也能夠手動升級npm版本號（本身百度）

二、安裝vue-cli

有npm和cnpm兩種方式，網上都說cnpm好些，因此我也用的cnpm安裝，

首先利用淘寶鏡像安裝cnpm

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

安裝完成，輸入

cnpm -v

能夠查看當前cnpm版本，這個和npm的版本仍是不同的

而後全局安裝 vue-cli

cnpm install -g vue-cli

這個命令只須要運行一次就能夠了。安裝上以後，之後就不用安裝了。

查看vue版本號

vue -V    //注：V是大寫字母V

若是提示「沒法識別 ‘vue’ 」 ，有多是 npm 版本太低，須要手動更新npm的版本號，這也是上面說的爲何要保證npm版本號高的緣由，npm的版本能夠手動升級更新，沒記錯的話應該是

npm install -g npm

三、使用vue-cli來建立一個基於 webpack 模板的新項目

建立 
cmd利用cd指令進入到保存項目的文件夾下，而後輸入命令

vue init webpack

如圖標記處輸入項目名稱（隨便命名，但不要是中文），其它的看本身須要自行考慮yes仍是no，每項的介紹自行百度 

建立完成後文件夾內會有以下些文件 

安裝項目所須要的依賴 
進入新建的項目文件夾下，就是上頭有一些文件的裏面，輸入命令

cnpm install

由於自動構建過程當中已存在package.json文件，因此這裏直接安裝依賴就行。

運行項目

cnpm run dev

出現如圖畫面，在瀏覽器中輸入網址http://localhost:8080 會出現以下圖 

注意：若是瀏覽器打開以後，沒有加載出頁面，有多是本地的 8080 端口被佔用了（默認服務啓動的是本地的8080端口），能夠經過修改一下配置文件 config>index.js裏的端口號 

網上有的說執行cnpm run dev後，瀏覽器會自動默認打開一個「歡迎頁面」，可是個人沒有，緣由應該以下 
目錄中config下的index.js文件中，將autoOpenBrowser的值是false，改成true就能自動打開了

四、後續其它步驟—打包上線

本身的項目文件都須要放到 src 文件夾下

項目開發完成以後，能夠輸入 npm run build 來進行打包工做

npm run build

打包完成後，會生成 dist 文件夾，若是已經修改了文件路徑，能夠直接打開本地文件查看

項目上線時，只須要將 dist 文件夾放到服務器就好了。

附：部分文件功能介紹（網上找的圖片）