vue之新手使用

vue中文網站：https://cn.vuejs.org/v2/guide/installation.html  包含了安裝、使用、api、視頻。

一. 什麼是 Vue

　　Vue 是一個前端框架，特色是
　　數據綁定

好比你改變一個輸入框 Input 標籤的值，會自動同步更新到頁面上其餘綁定該輸入框的組件的值

　  組件化

頁面上小到一個按鈕均可以是一個單獨的文件.vue，這些小組件直接能夠像樂高積木同樣經過互相引用而組裝起來

　　下載vue.js

開發或學習：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生產環境：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

二. 安裝node.js

　　 1.  下載node.js。

　　　　    下載地址：https://nodejs.org/zh-cn/   （或者https://nodejs.org/en/download/）  右上角有中文切換。

　　　　　  我下載了12.13.1長期支持版的。Linux 上安裝 Node.js 須要安裝 Python 2.6 或 2.7 ，不建議安裝 Python 3.0 以上版本　　　　

　　　　　　

　　

　　　　（1）雙擊運行（run）安裝包,等待安裝。

　　　　　　

　　　　　（2）next>接受協議>選擇安裝路徑

　　　　　　

 

　　　　（3）選擇須要的模式

　　　　　　

　　　　　（4）選擇install安裝。

　　　　　　　　完成以後會彈出命令行窗口

　　　　　　

　　　　　（5）檢測PATH環境變量是否配置了Node.js，「windows+r」 快捷鍵  輸入"cmd" => 輸入命令"path"，輸出以下結果（ctrl+f 在當前頁面搜索 通用）：　　

  　　　　　　 PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32; 　　　　　　　　C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\; 　　　　　　　　c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib; 　　　　　　　　C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs\; 　　　　　　　　C:\Users\rg\AppData\Roaming\npm
　　　　　　　　說明安裝成功

　　　　　（6）檢查Node.js版本。　npm包管理器是集成在Node.js中了，因此在安裝Node.js的時候就已經自帶了npm，輸入可獲得npm的版本。npm -v

     　　　　　　

　　　　　　（7）輸入如下命令npm -g install npm，更新npm至最新版本

　　　　　　　　查看版本   npm -v  

三. 安裝公服-淘寶鏡像（cnpm）

　　　   你們都知道國內直接使用 npm 的官方鏡像是很是慢的，這裏推薦使用淘寶 NPM 鏡像。cnpm 命令代替默認的npm命令，增長依賴包加載速度且避免資源限制。 

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

　　　　這樣就可使用 cnpm 命令來安裝模塊了：

　 cnpm install [name]　

　　　　安裝webpack

　　　　cnpm install webpack -g

　　　　安裝vue腳手架

　　　　npm install vue-cli -g
　　　　（安裝失敗的解決方法 npm cache clean --force）

 

　　　　會有一些初始化的設置，以下輸入:
　　　　Target directory exists. Continue? (Y/n)直接回車默認(而後會下載 vue2.0模板，這裏可能須要連代理)
　　　　Project name (vue-test)直接回車默認
　　　　Project description (A Vue.js project) 直接回車默認
　　　　Author 寫你本身的名字

　　　安裝 vue 路由模塊vue-router和網絡請求模塊vue-resource

　　　　cnpm install vue-router vue-resource --save

　　　啓動項目

　　　　npm run dev