一. 使用 vue-cli 搭建項目

1.安裝vue/cli ，執(zhí)行下面的命令安裝或是升級

npm i -g @vue/cli

npm i -g @vue/cli 安裝報錯

? 如果安裝報錯如下

npm WARN rollback Rolling back node-notifier@10.0.1 failed (this is probably harmless): EPERM: operation not permitted, rmdir 'D:\Devlop\nodejs\node_global\node_modules\@vue\cli'
npm ERR! code EEXIST
npm ERR! path D:\Devlop\nodejs\node_global\node_modules\@vue\cli\bin\vue.js
npm ERR! dest D:\Devlop\nodejs\node_global\vue.cmd
npm ERR! EEXIST: file already exists, cmd shim 'D:\Devlop\nodejs\node_global\node_modules\@vue\cli\bin\vue.js' -> 'D:\Devlop\nodejs\node_global\vue.cmd'
npm ERR! File exists: D:\Devlop\nodejs\node_global\vue.cmd
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Devlop\nodejs\node_cache\_logs\2023-04-13T02_13_31_038Z-debug.log

npm i -g @vue/cli 安裝報錯解決方案

? 查看vue版本 vue -V ,主要原因是安裝vue的版本過低。

D:\study_html\vueApp>vue -V
2.9.6

? 輸入以下命令 ，可以強制覆蓋以前舊版本的vue-cli腳手架。

npm install -g @vue/cli --force  

? 執(zhí)行完，看到 + @vue/cli@5.0.8 安裝成功。

+ @vue/cli@5.0.8
added 842 packages from 491 contributors in 84.507s

2.在命令行輸入以下命令創(chuàng)建Vue項目

vue create 項目名稱

vue create創(chuàng)建項目失敗

當使用vue create 命令創(chuàng)建項目失敗， 發(fā)現(xiàn)報錯如下：

D:\study_html\vueApp>vue create demoApp
Invalid project name: "demoApp"
Warning: name can no longer contain capital letters

D:\study_html\vueApp>vue create myApp
Invalid project name: "myApp"
Warning: name can no longer contain capital letters

? vue命令無法創(chuàng)建命名包含大寫字母的項目。所以，在命令行創(chuàng)建vue項目時，要用小寫英文字母來命名項目，也可以用 vue ui 可視化界面來創(chuàng)建項目。

①vue create 正確創(chuàng)建如下,輸入 y

D:\study_html\vueApp>vue create demo-app
?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npmmirror.com for faster installation? Yes   

② 選擇第二種，手動選擇特性，支持更多自定義選項

• Default 表示使用默認配置，默認勾選babel、eslint ,回車之后直接進入裝包
• Manually 自定義勾選特性配置，選擇完畢后，才能進入裝包

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features

③ 自定義選擇要安裝的插件。（ 按空格是選擇勾還是不勾，按回車是代表確認。）

babel： 把ES6語法可以轉(zhuǎn)換成ES5語法的插件

Router：vue-router，路由，因為項目要用到路由跳轉(zhuǎn)所以勾上

Vuex：我們項目也會用，但是還沒學，所以先不勾，學的時候再來下載

CSS Pre-processors： css的預處理，可以選擇less和sass，因為我們這個項目樣式用less，所以懸賞

注意：按空格是選擇勾還是不勾，按回車是代表確認文章來源地址http://www.zghlxwxcb.cn/news/detail-416341.html

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
>(*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

④ 選擇vue的版本 ，選擇2.x項目

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with
  3.x
> 2.x

⑤ 是否使用history模式的路由，不需要，輸入n (我們之前用的路由都是hash模式)

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

⑥選擇css預處理語言 ，勾選 Less

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
> Less
  Stylus

⑦ 選擇代碼格式校驗使用哪種校驗規(guī)范，選擇第三種，回車

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

⑧ 選擇什么情況下觸發(fā)代碼校驗，按空格表示勾選，全選然后回車

• Lint on save 當修改報錯文件時觸發(fā)
• Lint and fix on commit 當執(zhí)行git committ提交時

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
>(*) Lint on save  
 (*) Lint and fix on commit

⑨對應Babel, ESLint等配置文件是，這里選擇獨立的，勾選第一個

• In dedicated config files 生成保存到獨立的配置文件中
• In package.json 把插件的配置信息和package.json文件寫在一起

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

⑩選擇 你要不要保存當前的設置，方便下一次快速使用。如果你要保存輸入y，不需要保存輸入n。這里我選擇n.

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

①① 選擇哪種方式安裝依賴，我選擇npm

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies:
  Use Yarn
> Use NPM

最后，安裝成功后，提示

added 216 packages from 110 contributors in 27.327s

152 packages are looking for funding
  run `npm fund` for details

?  Running completion hooks...

?  Generating README.md...

?  Successfully created project demo-app.
?  Get started with the following commands:

 $ cd demo-app
 $ npm run serve

3.啟動項目 ,運行項目

npm run serve

① 進入所在項目路徑

D:\study_html\vueApp>cd demo-app

② 執(zhí)行命令，查看項目啟動成功

D:\study_html\vueApp\demo-app> npm run serve

> demo-app@0.1.0 serve D:\study_html\vueApp\demo-app
> vue-cli-service serve

 INFO  Starting development server...


 DONE  Compiled successfully in 5229ms                                                                      上午11:00:41


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.12.48.22:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

到了這里，關于【vue項目】vue項目創(chuàng)建全流程，創(chuàng)建使用 vue-cli 搭建項目的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！