vue lic腳手架安裝與部署專案流程

2021-08-24 20:39:41 字數 2023 閱讀 3747

命令列中輸入 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...