vue-cli 3 腳手架搭建(create)


地址:https://cli.vuejs.org/zh/guide/
安裝步驟:
提示:node 版本要 8.9+

  1. 兩種方式:
    (1) npm install -g @vue/cli
    (2) yarn global add @vue/cli
    安裝完成之后檢查 vue --version/ vue -V 檢查版本
  2. npm install -g @vue/cli-service-global
  3. 創建項目
    vue create hello-world // 項目名稱

終端:(上下鍵選擇)

default (bable,eslint) // 默認
Manually select features // 手動 **選擇手動創建項目

回車
終端:(上下鍵移動鍵,空格鍵是否選中)
Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project:

() Babel
( ) TypeScript // 語法
( ) Progressive Web App (PWA) Support // PWA
(
) Router // 路由
(* ) Vuex // store
( ) CSS Pre-processors // 預編譯
(
) Linter / Formatter // 格式化代碼
( ) Unit Testing
( ) E2E Testing
//提示: Babel, Router, Vuex, CSS Pre-processors, Linter 選中

回車
終端:
Vue CLI v3.0.5
? Please pick a preset: Manually select features // 手動創建項目
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? 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): Sass/SCSS
// css 預編譯
? Pick a linter / formatter config: Prettier // (ESLint + Prettier)格式化程序配置
? Pick additional lint features: 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? Yes
// 是否保存這個項目的配置
? Save preset as: SaveVue3.0
// 是的話 項目命名假設為:SaveVue3.0

命令:

  1. 使用圖形化界面
    vue ui
    圖形化數據
  2. yarn serve 啟動項目
  3. yarn build 打包項目
    (4,5,6 不可同時執行)
  1. // vscode 代碼檢測設置
    文件 ~ 首選項 ~ 設置 ~ 工作區
    {
    "editor.formatOnSave": false,
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
    "javascript",{
    "language": "vue",
    "autoFix": true
    },
    "html",
    "vue"
    ]
    }
    vscode 加載插件 ESLint // 代碼檢測工具

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM