vue-cli4.5 搭建( vue3+ TypeScript + ant design2)环境 及 VSCode 代码自动格式化配置

Posted zhouzhaohua

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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文件,

{
    "semi": false,
    "singleQuote": true,
    "tabWidth": 4,
    "printWidth": 120
}

 技术图片

 

 修改vscode setting.json文件内容,如下

{
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  "window.zoomLevel": 0,
  "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"
  },
  "[typeScript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "diffEditor.ignoreTrimWhitespace": true,
  // 设置字体
  "editor.fontFamily": "‘Droid Sans Mono‘, ‘Courier New‘, monospace, ‘Droid Sans Fallback‘",
  "editor.fontSize": 14,
  // vscode 程序title位置显示内容,这里设置了显示路径
  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
  // 编辑器建议 显示在头部
  "editor.snippetSuggestions": "top",
  "editor.suggestSelection": "first",
  // 满格换行
  "editor.wordWrap": "on"
}

.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

技术图片

 

 

 



 




以上是关于vue-cli4.5 搭建( vue3+ TypeScript + ant design2)环境 及 VSCode 代码自动格式化配置的主要内容,如果未能解决你的问题,请参考以下文章

vue3.0搭建项目

Vue3.0+Vant ui配置按需引入(非vue-cli3.0)

VueVue全家桶Vue3

VueVue全家桶Vue3

Vue3.0+Vant ui配置按需引入(非vue-cli3.0)

Vue3.0+Vant ui配置按需引入(非vue-cli3.0)