在命令列執行命令什麼表示初始化vue項目

在命令列執行命令「vue init webpack vue-project」表示初始化vue項目，該命令的意思是初始化基於webpack的「vue-project」項目；其中「vue-project」是指用戶自定義的項目名稱，項目名不能用大寫字母。

本教學操作環境：windows10系統、vue3版，DELL G3電腦。

VUE專案初始化步驟指令

1，安裝Node.js;

Window安裝套件 Mac安裝套件
檢查是否安裝成功node -v
顯示版本即成功，如圖：

##2 ，安裝vue-cli腳手架；

開啟命令列視窗cmd（window R,輸入cmd後Enter）

在cmd下執行指令

cnpm install vue-cli - g

安裝成功如圖

3，初始化專案資料夾；

在你準備建置專案的資料夾開啟cmd 執行指令

vue init webpack vue-project(註：vue-project是自訂專案名稱，專案名稱不能用大寫字母)

如圖：

初始化完成後如圖：

#啟動專案成功如圖：

成功啟動後頁面效果如圖：

#其他細節補充：

1，我所使用的命令列工具為Git，以下是最新安裝套件連結

Window安裝套件

2，網址列中http://localhost:8081/ #/ 後面的#號移除方法

編輯器開啟項目，找到目錄下src下router下index.js打開，改模式為mode:'history' 如圖：

3，啟動專案後免去複製貼上位址，即執行npm run dev後自動在瀏覽器中開啟頁面

編輯器開啟專案找到config下的index.js，向下找到autoOpenBrowser: false, 第18行上下。改false為true即可。如圖：

新分支並配置路由時注意路徑：

4.樣式

less_loader依賴less，兩個都需安裝，可在專案依賴中安裝（vue ui）或終端安裝；

若出現以下錯誤即為沒有安裝樣式依賴。

終端安裝樣式依賴：

• #如果是常規的，執行npm install stylus-loader css-loader style-loader - -save-dev 安裝依賴就行

• 如果是less 的，執行npm install less less-loader --save-dev 安裝依賴就行。

• 如果是 sass 的，執行 npm install sass sass-loader --save-dev 安裝依賴就行。或（$npm intall sass-loader --save ; $npm install node-sass --save）

  
  

安裝less-loader最新版vue專案項目提示報錯: Failed to compile with 1 errors

ERROR  Failed to compile with 1 errors                                 14:20:44
 error  in ./src/components/HelloWorld.vue
Module build failed: TypeError: loaderContext.getResolve is not a function
    at createWebpackLessPlugin (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\utils.js:31:33)
    at getLessOptions (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\utils.js:148:31)
    at Object.lessLoader (D:\work\vue3.0\gcmmobile\node_modules\less-loader\dist\index.js:27:49)
 @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!./node_modules/less-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue 4:14-378 14:3-18:5 15:22-386
 @ ./src/components/HelloWorld.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js1234567891011121314

則為版本問題。處理方案就是降低less-loader版本,我的vue版本是2.5.2，

先卸載最新的版本

yarn remove less-loader
npm uninstall less-loader123

安裝less-loader 5.0.0版本

yarn add less-loader@5.0.0
npm install less-loader@5.0.0 -D123

5.npm ERR! code ERESOLVE：

在運行npm install時報錯：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: operatingsystem@0.1.0
npm ERR! Found: vue@3.1.5
npm ERR! node_modules/vue
npm ERR!   vue@"^3.0.0" from the root project
npm ERR!12345678

控制台輸入npm -V發現我的npm版本為7.x的，因為npm7.x版本對某些指令比npm6.x更嚴格，所以莫名報了這個錯誤

解決有兩種：

1）在指令後面加上--legacy-peer-deps

2）使用npm6.x

提示：使用npm@6不需要卸載npm@7。可以使用npx指定npm的版本。例如：npx -p npm@6 npm i --legacy-peer-deps

如果這不能立即起作用，可以先刪除node_modules和package-lock.json

相關推薦：vue.js影片教學

以上是在命令列執行命令什麼表示初始化vue項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！