Vue環境搭建

1. 概述：vue環境搭建：需要npm（cnpm），而npm內嵌于Node.js，所以需要下載Node.js。

2. 下載Node.js：Node.js官方下載

3. 安裝Node.js：雙擊 - 選擇目錄 - 一路next（安裝程序會自動把node、npm環境變量配置好）。

4. 測試Node.js，npm：打開cmd，輸入 node -v 回車，輸入 npm -v 回車（node內嵌npm），出現對應版本號說明安裝成功，一般是不會有問題的。

5. 設置緩存文件夾和全局模塊存放路徑：
   在nodejs路徑下新建兩個文件夾——node_cache , node_global，然后配置：
   npm config set cache "D:\vueProject\nodejs\node_cache"
npm config set prefix "D:\vueProject\nodejs\node_global"
   (引號中路徑需要針對自己實際的安裝路徑)
   設置成功后，之后用命令npm install XXX -g安裝以后模塊就在D:\vueProject\nodejs\node_global里，g就是global
   tips：此時你可以在 C:\Users\Administrator 目錄下找到 .npmrc文件，以文本打開會發現剛剛配置的信息原來在這里

6. 安裝cnpm：
   簡介：基于 Node.js 安裝cnpm（淘寶鏡像）。由于npm是國際的，國內訪問很慢，所以善良的淘寶做了他的鏡像 —— cnpm，來自官網：“這是一個完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證盡量與官方服務同步。”
   
   安裝：

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

7. cnpm配置環境變量：
   打開：任意文件夾 - （右鍵）此電腦 - 屬性 - 高級系統設置 - 環境變量
   新建CNPM_PATH變量 路徑要根據自己的實際路徑

   編輯 path（要有global后面的反斜杠）

   添加 %CNPM_PATH%;
   
   打開cmd測試：cnmp -v；若失敗則需要重啟。

8. 安裝：
   （下面步入正題…）
   安裝vue：cnpm install vue -g

   安裝vue-cli腳手架¹：cnpm install vue-cli -g

   安裝webpack²：
   全局安裝 —— cnpm install webpack -g，不是所有的項目都需要webpack的。通常我們會將 Webpack 安裝到項目的依賴中。

9. 創建vue項目：

   創建一個基于 webpack 模板的新項目
   vue init webpack my-project
   這里需要進行一些配置，默認回車即可
   This will install Vue 2.x version of the template.
   For Vue 1.x use: vue init webpack#1.0 my-project
   ? Project name my-project
   ? Project description A Vue.js project
   ? Author runoob <test@runoob.com>
   ? Vue build standalone
   ? Use ESLint to lint your code? Yes
   ? Pick an ESLint preset Standard
   ? Setup unit tests with Karma + Mocha? Yes
   ? Setup e2e tests with Nightwatch? Yesvue-cli · Generated "my-project".To get started:cd my-projectnpm installnpm run devDocumentation can be found at https://vuejs-templates.github.io/webpack
   

   之后會生成目錄結構
   

10. 打包并運行Vue項目：
    cd my-project
cnpm install
cnpm run dev
    出現Listening at http://localhost:8080即說明成功了，可以輸入地址 http://localhost:8080 訪問剛剛創建的vue項目啦。（在cmd中輸入 Ctrl+C 退出）

Idea安裝

官網下載：地址 建議下載 .exe安裝包
接下來需要注意的就是安裝中的一些選項，和安裝后的插件安裝，破解碼等。

Idea中配置Vue環境

Ctrl+Alt+S 等價于 File -> Settings

1. ECMAScript 6
   Ctrl+Alt+S，搜索 JavaScript，設置JavaScript language version 為ECMAScript 6（新版本不用）

2. 安裝Vue.js插件
   Ctrl+Alt+S，搜索 plugins ，找到后搜索 vue安裝插件即可
   

3. 加入.vue
   由于vue文件沒有設置讀取格式，所有沒有顏色，所以一般以html方式打開：
   Ctrl+Alt+S，搜索 File Types，找到HTML，點擊‘+’，添加 *.vue
   

4. 配置運行和打包功能
   
   
   
   
   點擊ok，你就有這兩個運行環境了
   

5. 實現新建vue文件功能（可選）
   Ctrl+Alt+S，搜索 File and Code Templates ，添加vue文件模板

   <template></template><script>export default {}</script><style scoped></style>
   

   
   大功告成！
   
   
   

Node.js介紹

nodejs不是一個js框架，千萬不要認為是類似jquery的框架，nodejs是js運行時的運行環境，是對Google V8引擎進行的封裝，是一個服務器端的javascript的解釋器，類比java中jvm，java的開發是什么，無疑是jvm，自從有了jvm，java才能吹牛說自己是“一次編寫處處運行”，不管你是windows還是linux，只要安裝了對應版本的jvm都可以運行.class文件。

同樣nodejs的作用和jvm的一樣一樣的，也是js的運行環境，不管是你是什么操作系統，只要安裝對應版本的nodejs，那你就可以用js來開發后臺程序。

這具有劃時代的意義，意味著一直以來只能在瀏覽器上玩來玩去的js，可以做后端開發了，從有了nodejs后就催生出一大批用js做后臺開發的前端人員，這部分人員就是偏前端的“全棧程序員”。

npm介紹

npm是nodejs的包管理器（package manager）。我們在Node.js上開發時，會用到很多別人已經寫好的javascript代碼，
如果每當我們需要別人的代碼時，都根據名字搜索一下，下載源碼，解壓，再使用，會非常麻煩。于是就出現了包管理器npm。
大家把自己寫好的源碼上傳到npm官網上，如果要用某個或某些個，直接通過npm安裝就可以了，不用管那個源碼在哪里。
并且如果我們要使用模塊A，而模塊A又依賴模塊B，模塊B又依賴模塊C和D，此時npm會根據依賴關系，
把所有依賴的包都下載下來并且管理起來。試想如果這些工作全靠我們自己去完成會多么麻煩！（轉載）

Vue.js介紹³

Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。

Vue是基于數據驅動思想開發的javaScript框架，使用Vue框架開發可以大大減少繁雜的dom操作。數據驅動使得每一個HTML模塊都可以高度內聚，通過給不同的HTML模塊指定不同的數據模型，就可以實現前端的組件化開發方式。組件化可以降低系統各個功能的耦合性，并且提高了功能內部的聚合性。
另外Vue框架還開發了一套自己的模板語言，采用虛擬dom的方式渲染HTML，這使得我們可以依賴Vue來做模板渲染，實現前后端分離的開發方式。

Idea介紹

IDEA 全稱IntelliJ IDEA，是用于java語言開發的集成環境（也可用于其他語言），IntelliJ在業界被公認為最好的java開發工具之一，尤其在智能代碼助手、代碼自動提示、重構、J2EE支持、Ant、JUnit、CVS整合、代碼審查、 創新的GUI設計等方面的功能可以說是超常的。IDEA是JetBrains公司的產品，這家公司總部位于捷克共和國的首都布拉格，開發人員以嚴謹著稱的東歐程序員為主。

---

1. vue-cli是由vue官方發布的快速構建vue單頁面的腳手架，和我們工地看到的腳手架就是那么一回事，它幫助我們搭建基本的開發環境，好比架子搭建好了，利用它可以搞定目錄結構，本地調試，單元測試，熱加載及代碼部署等。 ??

2. webpack 是前端的一個項目構建工具，它是基于 Node.js 開發出來的一個前端工具，借助于webpack這個前端自動化構建工具，可以完美實現資源的合并、打包、壓縮、混淆等諸多功能webpack的官網。 ??

3. vue的學習目錄
   
   
   ??