本篇內(nèi)容主要講解“初始化vue項(xiàng)目的過(guò)程 是什么”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“初始化vue項(xiàng)目的過(guò)程 是什么”吧!
海門(mén)ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書(shū)合作）期待與您的合作！
在命令行執(zhí)行命令“vue init webpack vue-project”表示初始化vue項(xiàng)目，該命令的意思為初始化基于webpack的“vue-project”項(xiàng)目；其中“vue-project”是指用戶自定義的項(xiàng)目名稱，項(xiàng)目名不能用大寫(xiě)字母。
1，安裝Node.js;
Window安裝包 Mac安裝包
檢查是否安裝成功 node -v
顯示版本即成功，如圖：
2，安裝vue-cli腳手架；
打開(kāi)命令行窗口cmd（window+R,輸入cmd后Enter）
在cmd下執(zhí)行命令 cnpm install vue-cli -g
安裝成功如圖
3，初始化項(xiàng)目文件夾；
在你準(zhǔn)備建項(xiàng)目的文件夾打開(kāi)cmd 執(zhí)行命令 vue init webpack vue-project(注：vue-project是自定義項(xiàng)目名稱，項(xiàng)目名不能用大寫(xiě)字母)
如圖：
初始化完成后如圖：
啟動(dòng)項(xiàng)目成功如圖：
成功啟動(dòng)后頁(yè)面效果如圖：
其他細(xì)節(jié)補(bǔ)充：
1，我所使用的命令行工具為Git，下面是最新安裝包鏈接
Window安裝包
2，地址欄中http://localhost:8081/#/ 后面的#號(hào)去除方法
編輯器打開(kāi)項(xiàng)目，找到目錄下src下router下index.js打開(kāi)，改模式為 mode:‘history’ 如圖：
3，啟動(dòng)項(xiàng)目后免去復(fù)制粘貼地址，即運(yùn)行npm run dev后自動(dòng)在瀏覽器中打開(kāi)頁(yè)面
編輯器打開(kāi)項(xiàng)目找到config下的index.js，向下找到autoOpenBrowser: false, 第18行上下。改false為true即可。如圖：
新建分支并配置路由時(shí)注意路徑：
4.樣式
less_loader依賴于less，兩個(gè)都需安裝，可在項(xiàng)目依賴中安裝（vue ui）或終端安裝；
若出現(xiàn)以下錯(cuò)誤即為沒(méi)有安裝樣式依賴。
終端安裝樣式依賴：
如果是 常規(guī) 的，執(zhí)行 npm install stylus-loader css-loader style-loader --save-dev 安裝依賴就行
如果是 less 的，執(zhí)行 npm install less less-loader --save-dev 安裝依賴就行。
如果是 sass 的，執(zhí)行 npm install sass sass-loader --save-dev 安裝依賴就行?；蛘撸?npm intall sass-loader --save ; $npm install node-sass --save）
安裝less-loader最新版vue項(xiàng)目項(xiàng)目提示報(bào)錯(cuò): 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
則為版本問(wèn)題。處理方案就是降低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：
在運(yùn)行npm install時(shí)報(bào)錯(cuò)：
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
控制臺(tái)輸入npm -V發(fā)現(xiàn)我的npm版本為7.x的，因?yàn)閚pm7.x版本對(duì)某些命令比npm6.x更嚴(yán)格，所以莫名報(bào)了這個(gè)錯(cuò)
解決辦法有兩種：
1）在命令后加上--legacy-peer-deps
2）使用npm6.x
提示：使用npm@6不需要卸載npm@7?？梢允褂胣px指定npm的版本。例如：npx -p npm@6 npm i --legacy-peer-deps
如果這不能立即起作用，可以先刪除node_modules和package-lock.json
到此，相信大家對(duì)“初始化vue項(xiàng)目的過(guò)程 是什么”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
重慶分公司
重慶分公司
