在vue-cli2 中使用 ant design vue

谁践踏了优雅 2022-11-20 11:58 384阅读 0赞

在vue-cli中使用 ant design vue

# 一、按照 vue-cli 工具 #

npm install -g @vue/cli

# 二、新建要给 vue 项目 #

vue create antd-demo  
选择 Default (\[Vue 2\] babel, eslint)，等待项目创建完成  
进入项目，并启动  
cd antd-demo  
npm run serve

# 三、引入 antd #

npm install ant-design-vue --save

1、修改 src/main.js，引入 antd 的按钮组件以及全部样式文件。  
import Vue from 'vue';  
import Button from 'ant-design-vue/lib/button';  
import 'ant-design-vue/dist/antd.css';  
import App from './App';

Vue.component(Button.name, Button);

Vue.config.productionTip = false

new Vue(\{  
  render: h => h(App),  
\}).$mount('\#app')

2、修改 src/App.vue的 template 内容。  
<template>  
  <div id="app">  
    <img src="./assets/logo.png">  
    <a-button type="primary">Button></a-button>  
  </div>  
</template>  
修改完成后可以看到 antd 的蓝色按钮

# 四、使用 babel-plugin-import 按需加载组件 #

npm install babel-plugin-import --save-dev

1、修改 babel.config.js   
module.exports = \{  
  presets: \[  
    '@vue/cli-plugin-babel/preset'  
  \],  
  plugins: \[  
    \["import", \{ "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" \}\]  
  \]  
\}

2、修改 src/main.js  
import Vue from 'vue';  
import \{ Button \} from 'ant-design-vue';  
import App from './App';

Vue.component(Button.name, Button);

Vue.config.productionTip = false

new Vue(\{  
  render: h => h(App),  
\}).$mount('\#app')

# 五、定制主题 #

1、 npm install less less-loader --save-dev

2、修改 babel.config.js 文件，改 "style": true  
module.exports = \{  
  presets: \[  
    '@vue/cli-plugin-babel/preset'  
  \],  
  plugins: \[  
    \["import", \{ "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": true \}\]  
  \]  
\}

3、 在项目根目录下新建 vue.config.js 文件  
// vue.config.js  
module.exports = \{  
    css: \{  
        loaderOptions: \{  
          less: \{  
            lessOptions: \{  
              modifyVars: \{  
                'primary-color': '\#1DA57A',  
                'link-color': '\#1DA57A',  
                'border-radius-base': '2px',  
              \},  
              javascriptEnabled: true,  
            \},  
          \},  
        \},  
    \},  
\};

4、重新运行 npm run serve 可看到主题色发生了变化  
其他主题参数的配置参见：  
https://www.antdv.com/docs/vue/customize-theme-cn/  
https://github.com/vueComponent/ant-design-vue/blob/master/components/style/themes/default.less  
https://cli.vuejs.org/config/

本文内容到此结束。

![20191103090939423.jpg][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jvd2VpMDI2_size_16_color_FFFFFF_t_70][]

[20191103090939423.jpg]: https://img-blog.csdnimg.cn/20191103090939423.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jvd2VpMDI2_size_16_color_FFFFFF_t_70]: /images/20221120/03504d2fcf944602b3f884b5d6ffb53a.png