寫在前言
- 本人沒有接觸過Vue1.0版本 ，這裏就不做對比介紹了，有興趣的同學可以自行上網查詢
Vue 簡介
- Vue.js（讀音 /vjuː/, 類似於 view） 是一套構建用戶界面的漸進式框架。
- Vue 只關注視圖層， 採用自底向上增量開發的設計。
- Vue 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
- Vue 學習起來非常簡單，本教程基於 Vue 2.9.6 版本測試。
環境/版本一覽：
開發工具：Visual Studio Code （插件比較完善）
node.js：node-v8.11.3-x64.msi
Vue：2.9.6
前置條件
- 由於vue項目依賴 node.js 、npm 需要先安裝. 若沒有請先安裝
- 檢查是否有node.js 、npm 、vue
- WIN+R 輸入cmd 進入DOS環境
- 輸入node -v 回車 會出現node.js的版本
- 輸入npm -v 回車 會出現npm的版本
- 輸入vue -V （V大寫）回車 會出現vue的版本
安裝
- Node.js：https://nodejs.org/en/ 建議選擇推薦版不要選擇最新的
- vue ：npm install -g vue-cli --registry=https://registry.npm.taobao.org
- 由於npm網站在國內速度非常慢，所以可以在命令後面加上淘寶的鏡像
- 是否安裝成功運行上面的檢測命令即可
創建Vue項目框架
1、指定項目路徑：進入項目需放置的文件路徑下
例如我想將新建項目放在wiki目錄下，就先進入wiki根目錄
2、創建項目命令：vue init webpack wiki-web (wiki-web是將要創建的項目workspace名稱，會新創建文件夾)
- 不加鏡像下載會有點慢，耐心等待下
- 依次按照提示輸入，項目名、項目描述、項目作者等等，
- 然後一路回車 直到項目創建好。
3、啓動項目
- cd wiki-web -- 進入項目workspace
- npm install -- 創建node_modules依賴文件夾
- npm run dev -- 啓動項目
訪問項目
- 輸入上圖中的啓動地址，http://localhost:8081
項目結構
- 文件目錄
- vsCode
- 目錄解析
|
目錄/文件 |
說明 |
| build | 項目構建(webpack)相關代碼 |
| config | 配置目錄，包括端口號等。我們初學可以使用默認的。 |
| node_modules | npm 加載的項目依賴模塊 |
| src |
這裏是我們要開發的目錄，基本上要做的事情都在這個目錄裏。裏面包含了幾個目錄及文件：
|
| static | 靜態資源目錄，如圖片、字體等。 |
| test | 初始測試目錄，可刪除 |
| .xxxx文件 | 這些是一些配置文件，包括語法配置，git配置等。 |
| index.html | 首頁入口文件，你可以添加一些 meta 信息或統計代碼啥的。 |
| package.json | 項目配置文件。 |
| README.md | 項目的說明文檔，markdown 格式 |