vue cli vue腳手架 簡單流程

2022-07-25 09:42:14 字數 1642 閱讀 5723

在做vue的專案時,我們如果不用官方提供的腳手架,我們就必須自己去搭建專案所需要的目錄結構等,同時每次做專案都需要自己搭建顯得麻煩。所以我們只需要使用vue官方提供的vue-cli腳手架工具搭建專案即可。下面我將列出vue-cli簡單搭建流程:

注意:在這裡我會預設大家的電腦已經裝好node環境,如若不熟悉請檢視windows環境之node.js安裝與環境配置,按照流程安裝即可。vue-cli專案

操作步驟圖在此就不具體展示,按照我提供的步驟和注意事項具體操作即可完成對vue-cli專案的搭建。

1、安裝vue-cli

1)、使用npm(需要安裝node環境)全域性安裝webpack,開啟命令列工具輸入npm install webpack -g或者(npm install -g webpack),安裝完成後輸入webpack-v,如果出現相應的版本號,則說明安裝成功。

2)、利用npm對vue-cli進行全域性安裝,在cmd中輸入命令:  npm install -g vue-cli,安裝完成之後輸入 vue -v(注意這裡是大寫的「v」),如果出現相應的版本號,則說明安裝成功。

2、用vue-cli來構建專案

1)、首先在你的磁碟中新建乙個檔案用於存放你的專案,比如我d:\vuedemo1,然後使用命令列cd進入到此專案目錄,然後輸入命令vue init webpack  test,,其test是你的專案名。輸入命令後,會跳出幾個選項讓你回答:

回答完畢後就開始構建專案了。

2)、安裝依賴。

注意:上述操作完成之後你的專案中將會多出乙個專案名稱資料夾,再用cd命令進入到此資料夾如d:\vuedemo1\test下輸入命令npm install即可( 如果安裝速度太

慢。可以安裝**映象,開啟命令列工具,輸入:npm install -g cnpm --registry=然後使用cnpm來安裝 )。

3)、啟動專案

run dev後瀏覽器未自動開啟,你只需找到專案檔案中的config檔案下面的index.js,將autoopenbrowser的false改為true即可。重新輸入npm run dev即可開啟你所的搭建的vue-cli專案。

注意:npm 開啟了npm run dev以後怎麼退出或關閉?使用ctrl+c快捷鍵退出

4)、專案打包      

注意,自己的專案檔案都需要放到 src 資料夾下。在專案開發完成之後,可以輸入npm run build來進行打包工作。打包完成後,會生成 dist 資料夾,如果已經修改了檔案

路徑,可以直接開啟本地檔案檢視。專案上線時,只需要將dist 資料夾放到伺服器就行了。

5)、所有專案搭建完畢後,各專案檔案結構介紹如下圖:

Vue cli vue腳手架 安裝

準備工作 首先安裝node 和 npm 不會安裝的話請參考 並且保證node版本是v6及以上,話不多說,上圖 安裝和解除安裝 一.安裝 1.安裝2.x 安裝npm install vue cli g 版本檢視 vue v 或者 vue version 2.安裝3.x 或 4.x 安裝cnpm ins...

vue cli vue腳手架使用配置

index.html js路徑問題 config index.js build物件下的 assetspublicpath 改為 assetspublicpath css背景路徑問題 build utils.js if options.extract icon不顯示 build webpack.pro...

vue cli(vue腳手架)搭建專案

vue cli 是乙個官方發布 vue.js 專案腳手架,使用 vue cli 可以快速建立 vue 專案。這篇文章將會從實操的角度,介紹整個搭建的過程。其實這次使用vue cli的過程並不順利,反覆嘗試幾次都遇到以下這個報錯 建立vue cli工程專案時的報錯 在網上查了很多資料才發現原來是nod...