vue腳手架 —> vue.cli

快速的創建一個大型的功能齊全的vue專案模板(初始化專案)
土味解釋:快速的創建一個空的vue專案

安裝(全域安裝)

全域安裝
```
> npm i @vue/cli -g  
```

創建vue腳手架專案

> vue create 專案名

配置選項

Vue CLI v4.5.11
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint) 
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features

按上下選擇 ,回車確認,這里選擇第三項手動

選擇功能

Vue CLI v4.5.11
? 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)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

上下移動游標,空格選擇,回車確認,這里選擇 1 2 5 6 選項

選擇版本

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview)

這里選擇 2.x

是否使用歷史模式

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

這里輸入n 回車

Babel, ESLint等的配置位置

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

這里選擇選擇第一項專用組態檔存放

是否存為預置

? Save this as a preset for future projects? (y/N)

這里選擇 n

創建成功

Vue CLI v4.5.11
Creating project in D:\MyStudy\myvue2.
??  Installing CLI plugins. This might take a while...


> core-js@3.9.1 postinstall D:\MyStudy\myvue2\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall D:\MyStudy\myvue2\node_modules\ejs
> node ./postinstall.js

added 1208 packages from 928 contributors in 21.836s

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

🚀  Invoking generators...
📦  Installing additional dependencies...

added 5 packages from 1 contributor in 4.671s

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

?  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project myvue2.    
👉  Get started with the following commands:

$ cd myvue2
$ npm run serve

進入專案目錄
```
> cd myvue2
```

啟動服務

> npm run serve

  DONE  Compiled successfully in 2492ms                                     

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

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

復制上面地址,在瀏覽器打開

新手學習筆記,如有錯誤,歡迎糾錯

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/265411.html

標籤：其他

上一篇：jQuery內容整合---（一）jQuery簡介和與語法

下一篇：[vue] 什么是虛擬DOM？

vue腳手架專案創建

vue腳手架 —> vue.cli

安裝(全域安裝)