vue-cli4.5 搭建（ vue3+ TypeScript + ant design2）環境 及 VSCode 代碼自動格式化配置

一開始是准備用vite的，但總是出不來，案例也比較少，感覺還不成熟，暫時放棄了。

1、升級 vue-cli為最新4.5

 cnpm install -g vue @vue/cli 

2、創建項目


vue create demo1

選擇Manually select features

 

 選中這些組件

 

 

選擇3.x

選擇 ：ESLint + Prettier

 

 

 

 

 安裝完成后，進入項目目錄，使用vscode打開

 

 

 

給vscode 安裝插件  eslint，vetur，  perttier

 

建立prettierrc.config.js文件，我的配置：

module.exports = {
  printWidth: 100,
  tabWidth: 2, //指定每個縮進級別的空格數。
  useTabs: false, //用制表符代替空格縮進行。
  semi: false, //在語句的末尾打印分號。
  vueIndentScriptAndStyle: true,
  singleQuote: true, //使用單引號而不是雙引號。
  quoteProps: 'as-needed', //當對象中的屬性被引用時改變。
  bracketSpacing: true, //在對象文本中在括號之間打印空格。
  trailingComma: 'none', //多行時，盡可能在后面打印逗號。(例如，單行數組的末尾永遠不會有逗號。)
  jsxBracketSameLine: false,
  jsxSingleQuote: false, //在JSX中使用單引號而不是雙引號
  arrowParens: 'always', //在箭頭函數參數周圍包含圓括號。
  insertPragma: false,
  requirePragma: false,
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
  endOfLine: 'crlf',
  overrides: [
    {
      files: '*.md',
      options: {
        tabWidth: 2
      }
    }
  ]
}

 

 修改vscode setting.json文件內容，我的如下：

{
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.iconTheme": "material-icon-theme", /// 主題
  "workbench.activityBar.visible": true,
  "window.zoomLevel": 0,
  "editor.fontSize": 14,
  "editor.lineHeight": 22, // 設置行高
  "editor.minimap.enabled": false, // 小地圖
  // vscode默認啟用了根據文件類型自動設置tabsize的選項
  "editor.detectIndentation": false,
  // 設置字體
  "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
  // vscode 程序title位置顯示內容，這里設置了顯示路徑
  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
  // 編輯器建議 顯示在頭部
  "editor.snippetSuggestions": "top",
  "editor.suggestSelection": "first",
  // 滿格換行
  "editor.wordWrap": "on",
  "git.ignoreWindowsGit27Warning": true,
  "editor.quickSuggestions": {
    //開啟自動顯示建議
    "other": true,
    "comments": true,
    "strings": true
  },

  "terminal.integrated.rendererType": "dom",
  "editor.formatOnSave": true,
  "eslint.lintTask.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode", //默認格式化器
  "[javascript]": {
    // "editor.defaultFormatter": "esbenp.prettier-vscode"
    //"editor.defaultFormatter": "vscode.typescript-language-features"
  },

  "[typescript]": {
    // "editor.defaultFormatter": "esbenp.prettier-vscode"
    //"editor.defaultFormatter": "vscode.typescript-language-features"
  },

  // "vetur.format.defaultFormatter.js": "vscode-typescript",
  "[vue]": {
    // "editor.defaultFormatter": "esbenp.prettier-vscode"
    //"editor.defaultFormatter": "octref.vetur"
  },
  "diffEditor.ignoreTrimWhitespace": true,
  "typescript.locale": "en",
  "editor.multiCursorModifier": "ctrlCmd",
  // 用來忽略搜索的文件夾
  "search.exclude": {
    "**/node_modules/**": true,
    "**/bower_components/**": true,
    "**/image/**": true,
    "**/*.xml": true,
    "**/.history/**": true,
    "**/nbproject/**": true,
    "**/vscode/**": true
  }
}

 

.eslintrc.js ，rules:增加一句 ："@typescript-eslint/no-explicit-any": ["off"]  。防止（類型警告 Unexpected any. Specify a different type.eslint(@typescript-eslint/no-explicit-any)）

 

 

 

3、安裝 ant design2

# ant-design
cnpm i --save ant-design-vue@next
# babel
cnpm install babel-plugin-import --save-dev

 

修改 ：bable.config.js,用於設置組件按需加載

module.exports = {
    presets: ['@vue/cli-plugin-babel/preset'],
    // 需要添加的內容
    plugins: [
        [
            'import',
            {
                libraryName: 'ant-design-vue',
                libraryDirectory: 'es',
                style: true
            }
        ]
    ]
}

 

 

 

 修改vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            // 向 CSS 相關的 loader 傳遞選項
            less: {
                javascriptEnabled: true
            }
        }
    }
}

建立 plugins/Ant  》index.ts 文件 ，按需引用需要的組件

import { Button, Input } from 'ant-design-vue'

const ant = {
    install(Vue: any) {
        Vue.component(Button.name, Button)
        Vue.component(Input.name, Input)
    }
}

export default ant

 

修改： App.vue

<template>
    <a-config-provider :locale="locale">
        <router-view />
    </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale/zh_CN'
export default {
    data() {
        return {
            locale: zhCN
        }
    }
}
</script>

在修改Home.vue ——用於演示

<template>
    <div class="home">
        <a-button type="primary">按鈕</a-button>
        <a-input placeholder="Basic usage" />
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'Home',
    components: {}
})
</script>

修改 main.ts ,引入 ant 組件庫

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ant from './plugins/Ant'

createApp(App)
    .use(store)
    .use(router)
    .use(ant)
    .mount('#app')

運行：npm run serve ,OK