命令列中輸入 npm install -g cnpm –registry= 安裝個是因為我們用的npm的伺服器是外國,對國內的寬頻有限制,導致安裝依賴有失敗或極慢,所以就用這個cnpm來安裝我們所需要的依賴。安裝完成之後輸入 cnpm -v,如果出現相應的版本號,則說明安裝成功。
安裝vue-cli腳手架構建工具,開啟命令列工具輸入: cnpm install –global vue-cli ,安裝完成之後輸入 vue -v(注意這裡是大寫的「v」),如果出現相應的版本號,則說明安裝成功。
在計算機中選好我們的專案路徑。這裡有兩種方式指定到相關目錄:①cd 目錄路徑 ②如果以安裝git的,在相關目錄右鍵選擇git bash here命令列中輸入 vue init webpack 專案名稱
注意:專案名稱不能用中文。
專案建立好後會在對應的目錄下建立完整專案目錄
在命令列中進入建立的專案資料夾,輸入 cnmp install
在命令列中輸入 cnpm run dev 就會啟用內建伺服器,會顯示乙個位址,複製貼上到瀏覽器位址列就會出血vue介面,停止伺服器用: ctrl+c
1. 在執行cnpm run dev 的時候 ,會在當前目錄下找乙個package.json檔案,啟動伺服器預設埠8080
router-view>
3. 在src目錄有乙個router資料夾,該資料夾下有乙個 index.js檔案:該檔案是配置路由詞典,指定路由位址
hot reload(熱部署) 當**修改,直接預覽效果框架己經建立好,快速進入開發(完整專案錄)
元件組織方式
將元件所有內容儲存在乙個檔案 .vue(乙個檔案乙個元件)放在src目錄 components
單檔案概念擴充套件名為 .vue 的 sinle-file components (單檔案元件)
有3個標籤
vue 建立元件
2.1 建立 .vue結尾檔案
專案安裝位置/src/component/login.vue(自己建立的元件名稱)
2.2 配置路由詞典
專案安裝位置/src/router/index.js
引入要使用元件
import
header from '@/components/login'
配置路徑
,2.3元件建立
在login.vue中
html...
腳手架安裝與部署專案流程
1 依賴軟體 nodejs x86 適用 32 windows x64 適用 64 windows 1.2 下一步下一步 安裝目錄 不要中文不要有空格 c program files nodejs 1.3 檢測 windows 開始 執行 cmd 2 安裝cnpm 工具 nodejs工具 npm 安...
腳手架安裝
1.先裝node 輸入 node v,出現相應的版本號,則說明安裝成功。2.安裝 映象 npm install g cnpm registry 3.安裝webpack npm install webpack 3.8.1 g g全域性安裝webpack版本3.8.1 webpack v檢視版本號 4....
vuecli腳手架的安裝與腳手架建立專案
安裝最新版本腳手架,進入終端輸入命令 npm install g vue cli由於vuecli3.0之後與2.0產生了較大的變化,如果想要使用2.0版本的模板的話,需要使用2.0版本的 vue init 輸入命令 npm install g vue cli init在終端中輸入vue versio...