使用Vue cli Vue腳手架 快速搭建專案

2021-09-26 05:53:35 字數 873 閱讀 9395

vue-cli 是乙個官方發布 vue.js 專案腳手架,使用 vue-cli 可以快速建立 vue 專案.特地在此記錄搭建的全過程!
其實對於安裝vue-cli,使用npm命令和cnpm命令都是可以的,個人覺得使用npm安裝的比較慢,而且很可能會因為網路問題而出錯,所以還是覺得使用cnpm穩一點。

(1)全域性安裝 vue-cli ,在命令提示視窗執行:

cnpm install -g vue-cli

(2)安裝vue-cli成功後,通過cd命令進入你想放置專案的資料夾,在命令提示視窗執行建立vue-cli工程專案的命令:

cd filename

vue init testvue

確認建立專案後,後續還需輸入一下專案名稱、專案描述、作者、打包方式、是否使用eslint規範**等等,詳見上圖。安裝順利執行後會,生成如下檔案目錄:

(3)生成檔案目錄後,使用 cnpm 安裝依賴:

cnpm install

(4)最後需要執行命令: npm run dev 來啟動專案,啟動完成後會自動彈出缺省網頁:http://localhost:8080

到此則是成功利用vue-cli搭建乙個vue專案

最後總結下:通過vue-cli搭建乙個vue專案,會自動生成一系列檔案,而這些檔案具體是怎樣的結構、檔案對應起什麼作用,可以看看下面的解釋:

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腳手架 安裝

準備工作 首先安裝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腳手架)搭建專案

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