02.vue安裝
阿新 • • 發佈:2020-10-27
1. vue核心概念
Vue.js(讀音 /vjuː/, 類似於 view) 是一套構建使用者介面的漸進式框架。
Vue 只關注檢視層, 採用自底向上增量開發的設計。
Vue 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。
官方文件:http://vuejs.org/v2/guide/syntax.html
中文文件: https://cn.vuejs.org/v2/guide/syntax.html
2. vue.js安裝
2.1 安裝node.js環境(npm包管理工具)
從node.js官網下載並安裝node,安裝過程很簡單,一直點下一步就ok了
安裝完成之後,進入命令列視窗,輸入node -v命令,檢視node的版本
2.2 安裝vue-cli腳手架構建工具(必須在全域性中進行安裝)
-
在命令列中執行命令 npm install -g vue-cli ,然後等待安裝完成。
-
是否安裝成功:vue -V
2.3 切換國內映象源
-
使用cnpm
- 由於有些npm資源被遮蔽或者是國外資源的原因,經常會導致npm安裝依賴包的時候失敗,所以我們還需要npm的國內映象----cnpm.
- 在命令列中輸入npm install -g cnpm --registry=http://registry.npm.taobao.org
-
將npm切換為淘寶映象源
npm set registry https://registry.npm.taobao.org 指定源 npm config list 檢視npm資訊 npm install npm -g 升級npm
-
如果出現任何關於node依賴的問題導致服務無法啟動,執行npm install無法解決的,則安裝rimraf,然後進入專案目錄下,執行rimraf node_modules 刪除後,重新執行 npm install 安裝依賴
刪除node_modules npm install rimraf -g rimraf node_modules
2.4 建立vue專案
# 1. 初始化專案 vue init webpack vue01 # 在資料夾對應的cmd視窗使用, 輸完回車 # 2. 接下來選擇配置專案資訊 ? Project name (vue01) #專案名稱 預設回車即可 ? Project description (A Vue.js project) # 專案描述 預設回車即可 ? Author # 作者 預設回車即可 ? Vue build (Use arrow keys) # 打包專案選項 預設回車即可 ? Install vue-router? (Y/n) # 是否安裝路由 輸入y ? Use ESLint to lint your code? (Y/n) # 是否使用eslint檢測程式碼, 輸入n ? Set up unit tests (Y/n) # 是否使用測試單元 輸入 n ? Setup e2e tests with Nightwatch? # 輸入n ? Should we run `npm install` for you after the project has been created? (recommended) ❯ Yes, use NPM # 是否使用npm包管理工具 Yes, use Yarn # 是否使用yarn包管理工具 No, I will handle that myself # 不,我使用我自己的工具,想使用cnpm選第三個選項 # 3. 進入專案資料夾,在終端安裝必備的包 cd vue01 # 首先進入專案資料夾 npm install # 如果上面選的是第三個選項, 這一步是必須的,使用cnpm工具,安裝一些必備的專案包, # 如果上面選的是npm,這一步沒必要,當然多執行一遍,也沒問題 # 4. 在終端執行專案 npm run dev # 兩個命令任意一個即可,啟動專案