最近在研究vue3.0,相關的腳手架(vue-cli)更新到了V4.5以上,記錄一下相關的使用
安裝
如果之前安裝過vue-cli 2.x的版本,也就是之前vue2.x對應的版本,需要先進行卸載,命令:
npm uni -g vue-cli
沒有則跳過,接下來安裝vue3.0的cli,命令:
npm i -g @vue/cli
查看vue-cli版本
vue -V
創建專案
輸入指令
vue create 專案名
會出現這三種情況
1. 安裝vue2預設Default ([Vue 2] babel, eslint)
安裝下載vue2版本的預設,默認配置只有babel和eslint其他的都要自己另外再配置
2. Default (Vue 3 Preview) ([Vue 3] babel, eslint)
安裝下載vue3版本的預設,默認配置只有babel和eslint其他的都要自己另外再配置
3. Manually select features
自定義選擇配置項,圖片看不清出的看文字,根據需要選擇,下面有說明
Check the features needed for your project:
//檢查專案所需的功能:(按<space>選擇，<a>切換所有，<i>反轉選擇）
( ) Choose Vue version // 選擇vue版本,不選擇,默認安裝`2.6.11`版本的vue
( ) Babel // 語法編譯器,es6->es5
( ) TypeScript // 支持使用 TypeScript 書寫原始碼
( ) Progressive Web App (PWA) Support // PWA 支持
( ) Router // 支持 vue-router
( ) Vuex // 支持 vuex
( ) CSS Pre-processors // 支持 CSS 前處理器，
( ) Linter / Formatter // 支持代碼風格檢查和格式化，
( ) Unit Testing // 支持單元測驗，
( ) E2E Testing // 支持E2E測驗，
選擇部分選項后出現的配置選項
Choose a version of Vue.js that you want to start the project with?
選擇你的vue版本,會讓你選擇2.x或者3.x,根據需要選擇就行
Use class-style component syntax?
是否選擇class風格的組件語法?
即原本是：home = new Vue()創建vue實體
使用裝飾器后：class home extends Vue{}
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?
使用Babel與TypeScript一起用于自動檢測的填充?
Use history mode for router? (Requires proper server setup for index fallback in production)
路由使用history模式? 這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
選擇預處理的模式
Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
TSLint (deprecated)
選擇語法檢測規范
Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
( ) Lint and fix on commit
選擇 保存時檢查 / 提交時檢查
Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
Jest
測驗方式
Pick an E2E testing solution: (Use arrow keys)
> Cypress (Chrome only)
Nightwatch (WebDriver-based)
WebdriverIO (WebDriver/DevTools based)
e2e測驗方式
Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
選擇配置資訊存放位置，單獨存放或者并入package.json
Save this as a preset for future projects?
是否保存當前預設，下次構建無需再次配置
Save preset as
給這次的配置起一個名字
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/275132.html
標籤：其他