Vue实战笔记(一) 引入Ant Design

+ demo
    + node_modules（存放第三方模块）
    + public（存放静态文件）
        - favicon.ico（图标）
        - index.html （页面模板）
    + src（我们自己写的文件一般放在这个文件夹下）
        + assets（存放资源文件）
        + components（存放公共组件）
        + router.js（路由管理：Router）
        + store.js （状态管理：Vuex）
        + views（存放视图组件）
        - App.vue（页面入口文件）
        - main.js（程序入口文件）
    - package.json（项目配置文件）
    - package-lock.json（项目配置文件）
    - babel.config.js（babel 配置文件）
    - README.md（项目说明文档）
    - ...（其它配置文件）

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 新增代码：引入全部组件及样式
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
// 新增代码：注册全部组件
Vue.use(Antd)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 新增代码：引入特定组件及样式
import {
  Button
} from 'ant-design-vue'
import 'ant-design-vue/lib/button/style'
// 新增代码：注册特定组件
Vue.component(Button.name, Button)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

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

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 新增代码
  plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }
    ]
  ]
}

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 新增代码：引入特定组件
// 此时会自动引入对应的样式文件，无需再手动逐一引入
import {
  Button
} from 'ant-design-vue'
// 新增代码：注册特定组件
Vue.component(Button.name, Button)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Inline JavaScript is not enabled. Is it set in your options?

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
}

<template>
  <div>
    <a-button type="primary" @click="handleClick">Primary</a-button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick: function (e) {
      console.log('click', e)
    }
  }
}
</script>