vue4 項目的創建

 

 

 

1,安裝vue cli 腳手架,是全局安裝
npm install -g @vue/cli

可以在輸出信息中看到安裝位置,例如:
C:\Users\xiaochangjian\AppData\Roaming\npm\node_modules\@vue

2,查看腳手架是否安裝成功
vue --version


3,cmd 定位到要創建項目的目錄位置


4,vue create 項目名字 如:vue create ruoyi-front-ui

通過鍵盤上下左右鍵,選擇手動配置項目,出現如圖文字:

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


按方向鍵進行上下選擇
按空格 選中
按A鍵全選
按I鍵全選
按enter 確認所有配置進入下一步

----------------------------------------------------------------------------------------------------------------

選中所有:
Use class-style component syntax? (Y/n) 是否使用class風格的組件語法?

Pick additional lint features? Lint on save // 保存就檢測

 

 

? Save this as a preset for future projects? (y/N) N //是否記錄下,以便下次繼續使用這套配置

 


Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes // 是否使用class風格的組件語法?
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes 這個選項的意思是要不要使用 babel 工具自動爲轉換後的 TypeScript 代碼注入 polyfiills 。如果實在搞不清楚具體是什麼意思,可以先不用管,直接選擇 Y ,進入下一步
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes 是不是用history模式來創建路由
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less 詢問項目的CSS預處理器 選擇LESS
? Pick a linter / formatter config: Standard (詢問項目的格式校驗方式,提供一個插件化的javascript代碼檢測工具 ESLint + Prettier //使用較多)
? Pick additional lint features: Lint on save 詢問項目的什麼時候校驗格式(1是保存時,2是提交時)
? Pick a unit testing solution: Mocha (Mocha 靈活,Jest 安裝配置簡單容易上手)
? Pick an E2E testing solution: Cypress (Cypress E2E功能測試框架 會安裝很長一段時間)
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files 詢問項目的配置文件存放在哪兒(1是獨立文件,2是在package.json)這裏選擇獨立的文件,選擇2在後續配置postcs適配時存在問題。
? Save this as a preset for future projects? (y/N) 是否作爲一個模板配置

 

 

 

 

當前項目示例:
Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章