使用vue cli腳手架建立乙個vue專案

2021-10-05 05:48:41 字數 748 閱讀 5650

環境配置

配置node環境:方法可以去網上查詢按照步驟來,安裝完成之後執行命令 npm -v 顯示版本號就可以了。(記得設定映象環境,不然會很慢)

安裝vue:執行命令npm i -g @vue/cli 安裝最新版本的vue,完成後執行vue -v顯示版本號就成功了。

(安裝成功以後,後面就不需要再安裝了)

以下是專案的預設結構(vue-cli3建立的專案精簡了許多檔案,沒有了config,bulid等,可以在根目錄建立乙個vue.config.js進行配置,參考官方文件:

為開發目錄,大部分的開發都在這裡面進行

assets:

用於存放一些靜態資源或和示例** 文件之類的

components:

元件資料夾,放一些自己寫的公共頁面

views:

存放頁面的地方

plugins:

存放外掛程式資料夾,如element.js

router:

index.js配置路由規則頁面跳轉重定向等

整個專案的入口,它有乙個router-view容器,所有頁面都顯示在這裡面

main.js:

它是專案入口檔案,專案中所有頁面都會載入它,用於例項化vue,匯入外掛程式,儲存全域性變數等,如使用者的登入資訊

使用vue cli腳手架建立專案

目錄使用以下命令安裝vue cli腳手架 npm install g vue cli or yarn global add vue cli使用vue version檢視版本,看是否安裝成功 node modules 專案依賴檔案 public 靜態資源檔案 src 我們寫 的地方 tests 測試檔...

vue cli腳手架建立專案

一直預設就行,路徑可以改變但要記得到 安裝完成後開啟cmd,輸入 node vnpm v如果能看到node和npm的版本號了,說明已經安裝成功 首先利用 映象安裝cnpm 安裝完成,輸入 cnpm v可以檢視當前cnpm版本,這個和npm的版本還是不一樣的 然後全域性安裝 vue cli cnpm ...

vuecli腳手架的安裝與腳手架建立專案

安裝最新版本腳手架,進入終端輸入命令 npm install g vue cli由於vuecli3.0之後與2.0產生了較大的變化,如果想要使用2.0版本的模板的話,需要使用2.0版本的 vue init 輸入命令 npm install g vue cli init在終端中輸入vue versio...