vue.js在windows本地下搭建環境和建立項目

Vue.js是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，而且很是容易學習，很是容易與其它庫或已有項目整合。另外一方面，Vue 徹底有能力驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。

    首先vue.js的做者是中國人，因此說他是國產的，吸取了google的angular.js和facebook的react.js的特性，摒棄了jquery傳統的DOM操做，採用數據綁定和指令等概念，能夠說是將來WEB端開發的趨勢，可是也並不表明jquey就淘汰了，存在即合理，jq應該在之後會有其餘領域的價值，這裏我就很少說了。

    說了這麼多，咱們仍是開始怎麼搭建vue.js的環境吧。首先要搭建vue的環境須要藉助node.js的npm的包管理器。這個npm我就不詳細介紹了，網上本身去百度，反正後面要安裝的一系列的依賴或者包都要用到這個。

    1、node.js的安裝

    node.js近幾年很火熱，開始我覺得是一門語言，其實只是一個平臺，他封裝了chorme v8的引擎，能夠直接用js做爲服務器端腳本語言。http://nodejs.cn/進去該網站下載最新版本的node,

    注意npm版本是3.8以上的就行。後面就是下一步下一步的安裝就能夠了。安裝完成後，wind+r  彈出cmd，輸入node -v 和 npm -v  分別查看版本號，表明node.js安裝完成。說到這裏博主我遇到過問題了。

    由於我電腦我安裝過appcan-v3.3,這款IDE封裝了node.js而且裝的時候把node.js的環境變量給配好了，以致於我後來新裝的node.js查看版本號都是低版本的。解決方法其實很簡單，打開個人電腦查看屬性/高級系統設置/環境變量。而後找到"appcan_path"點擊編輯,把「F:\set-soft\AppCanStudioPersonalV3.3\HDK\emulator\mas\」全都刪除，而後從新查看版本。v3.10.4的npm便可。（也能夠設置全局文件夾，直接採用默認的，那node會全都裝在根目錄下的node_modules，目前裏面只有npm就對了，tips:若是你第一次設置了全局文件夾而且卸載了node,那麼你後面再從新安裝node.js還會有這個設置，我是沒管，具體解決方案能夠百度）

  

    2、node.js的環境變量的新建。

    其實安裝完node，就自動在path裏增長環境變量，可是爲了之後的本地部署項目，咱們須要找到node.js的安裝根目錄，在當中新建「node_global」和"node_cache"兩個文件夾。

一、啓動CMD依次執行如下兩條命令
    npm config set prefix "F:\set-soft\nodejs\node_global"
    npm config set cache "F:\set-soft\nodejs\node_cache"

二、設置環境變量：
    NODE_PATH = F:\set-soft\Node\nodejs
    PATH = %NODE_PATH%\;%NODE_PATH%\node_modules;%NODE_PATH%\node_global;

這樣就能夠把後面全局安裝的裝到global裏而且能夠直接用命令使用。

3、安裝淘寶的npm鏡像：

    輸入npm install -g cnpm –registry=https://registry.npm.taobao.org，便可安裝npm鏡像，之後再用到npm的地方直接用cnpm來代替就行了。這個其實看我的愛好吧，由於npm在國內下載速度是很慢，因此就用npm下載安裝cnpm能夠更快的下載後面的依賴等等。

4、安裝全局vue-cli腳手架、webpack.

    命令輸入

    1.(npm)cnpm install -g vue-cli                       //全局安裝vue-cli

    2.(npm)cnpm install -g webpack                          //全局安裝webpack

    (npm)npm install -g webpack-dev-server             //安裝webpack的本地webserver

安裝完成後，vue-cli腳手架其實就已經把vue也裝掉了，因此只需輸入vue -V 和 webpack -v  等等就能夠查看安裝成功與否。

五，新建vue.js項目

    新建的話，能夠在當前系統盤下直接新建，也能夠切換盤符，而後在當前的磁盤裏新建文件項目

命令 vue init webpack vue_project(最後這個是我建立的項目文件夾的名字)

    看到上面的就表明已經完成，而後就去當前的磁盤裏找到「my_test」你的項目文件夾，裏面使用了腳手架vue-cli的和webpack提供的模板進行了建立。目錄結構大概是這樣

6、本地安裝和運行項目

1.注意前面的盤符是當前的，而後命令cd my_test     //進入文件夾

2.回車輸入  cnpm install   你會發如今已經建立的項目結構裏面會多出一個node_modules的文件夾，裏面就是剛纔安裝的全部依賴。

3.準備工做作好之後，測試一下項目裏面默認的app.vue模塊可否跑起來，這是須要先安裝一下服務器環境，在命令行中輸入 
cnpm run dev 回車便可 

    8080就是默認的端口，在瀏覽器地址欄中輸入localhost:8080會發現默認的模塊打開了！

    (這裏博主我又遇到過問題，就是個人8080端口被佔用了，解決方法是，cmd命令輸入netstat -ano找到8080端口的PID，而後打開「人物管理器」，找到對應的PID，將該進程給關了便可，個人是svn服務端軟件給佔了。)

    最後打開瀏覽器:127.0.0.1:8080出現下面這個就表明vue.js在本地就建立好了

7、運行別人的vue.js項目domo

    能夠從github上克隆下來，而後將項目文件夾放到某個盤符下，而後cmd命令 找到該盤符，好比 f:

1. f:\cd domo_vue

2.命令 cnpm(npm) install    //在本地安裝

3.  cnpm(npm) run dev   回車   //在本地的瀏覽器打開127.0.0.1帶上端口號就能夠跑起來了。

8、服務器端運行

    命令 npm run build   

    會生成靜態文件，在根目錄的dist裏，裏面有個index.html，這是服務器訪問的路徑指定到這裏就能夠訪問咱們本身的項目了。可是我發現個問題就是生成index.html裏引用的css和js的引用路徑不對，這時候就須要本身修改一下配置了。

進入config/index.js

原來的配置的引用路徑爲

 

公衆號(ZEROFC_DEV)