個人學(xué)習(xí)用
一、Vue項(xiàng)目搭建前準(zhǔn)備
Vue CLI 是一個基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)：
查看官方文檔
- 安裝版本：@vue/cli 3.x 版本
- 使用系統(tǒng)：windows10 64位
-
前期準(zhǔn)備：需提前安裝好node和npm，npm -v 和 node -v 測試版本號
npm與node版本號檢查 - 開發(fā)工具：WebStorm
- 快捷鍵合集：
- 使用Webstorm的Terminal命令行終端 —— alt+F12
- 查看當(dāng)前vue/cli的版本號 —— vue --version
- 獲取幫助，查看vue/cli的命令合集 —— vue -h
- 新建項(xiàng)目 —— vue create xxx
- 運(yùn)行項(xiàng)目 —— npm run serve
- 打包部署 —— npm run build
二、vue/cli腳手架安裝流程
-
進(jìn)入開發(fā)工具Webstorm，點(diǎn)擊左下角的Terminal命令行終端，快捷鍵（alt+F12）。輸入（npm install -g @vue/cli）安裝手腳架工具。輸入（vue --version）查看當(dāng)前安裝的版本號。
vue -h（查看全部命令幫助） 創(chuàng)建新的項(xiàng)目
輸入vue create “新建項(xiàng)目名” 創(chuàng)建項(xiàng)目，并選擇預(yù)設(shè)，使用default（系統(tǒng)默認(rèn)預(yù)設(shè)）還是 manually select features（手動選擇預(yù)設(shè)）。
Vue CLI v3.7.0
? Please pick a preset:
default (babel, eslint)
> Manually select features
- 手動選擇時，通過鍵盤上(PgUp)下(PgDn)箭頭選擇，空格鍵選中，回車確認(rèn)提交。
Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
>(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
- 選擇css樣式預(yù)處理程序，使用stylus。
Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
> Stylus
- 選擇ESLint規(guī)則，使用Standard config（標(biāo)準(zhǔn)配置）。
Vue CLI v3.7.0
? Please pick a preset: (Use arrow keys)
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config
ESLint + Prettier
- 選擇是在保存時Lint還是提交時Lint。
Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
( ) Lint and fix on commit
- 配置文件存放在哪里？
Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
- 是否保存這次配置的預(yù)設(shè)。 N（選擇不保存）
Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)
-
安裝成功，cd xxx（進(jìn)入你創(chuàng)建的項(xiàng)目目錄下），輸入npm run serve啟動項(xiàng)目（vue/cli2.x使用的是npm run dev）。
安裝成功 訪問地址可以通過本地Local訪問或者通過本機(jī)ip地址訪問，npm run build指的是版本打包部署指令。
App running at:
- Local: http://localhost:8082/
- Network: http://192.168.1.3:8082/
Note that the development build is not optimized.
To create a production build, run npm run build.
