Nuxt.js 按需引入组件库 、修改主题颜色（定制主题）与Less安装遇到的问题

本文使用的UI组件库为 ant-design-vue，还没有安装Nuxt可以跳转到 Nuxt 安装 查看。

下载所以需要的插件如下：

npm:
    npm i babel-plugin-import less less-loader -D
yarn:
    yarn add babel-plugin-import less less-loader -D

1. babel-plugin-import 是为了处理按需引入组件库中对应的样式。
2. less、less-loader 能够样式引入对就的less样式文件。

项目安装创建完成后，项目目录如下：

　　

 可以在 Nuxt 官网 查看对应的目录说明。

其中 editorconfig 可以在 https://blog.csdn.net/lhjuejiang/article/details/110925631 查看说明，eslintrc 为代码规范，gitignore 是git 不上传的目录或文件，prettierignore 是不需要格式化的文件，prettierrc 格式化配置，tsconfig.json 为TS代码配置，了解了目录后就要修改文件。

1. 打开 nuxt.config.js, 如下
   
   

    

    

2. 把  css: ['ant-design-vue/dist/antd.css'], 改成 css: []
3. 在 build 中加入以下代码：
   

     babel: {
         plugins: [
           [
             'import',
             {
               libraryName: 'ant-design-vue',
               libraryDirectory: 'es',
               style: true,
             },
           ],
         ],
       },

4. 打开 plugins  -> antd-ui.js 修改代码：
   

   import Vue from 'vue'
   import {
     Button // 这里引入你所以需要的组件
   } from 'ant-design-vue'
   
   Vue.use(Button)

5. 修改首页中的代码：compoment -> Tutorial.vue 如下：
   

   <!-- Please remove this file from your project -->
   <template>
     <div>
       <a-button>点击</a-button>
     </div>
   </template>
   
   <script>
   export default {
     name: 'NuxtTutorial',
   }
   </script>

6. 运行代码：yarn dev
   

    

    运行后出现了一个报错，这个报错是因为 less-loader 的版本太高而不兼容
   解决方法：重新安装 less-loader 8 以下的版本： 
   
   

   yarn add less-loader@7.0.0 -D
   或
   npm i less-loader@7 -D

   再运行 yarn dev 后，报 .bezierEasingMixin(); 
   

    

    这个错报的是ant-design-vue 组件库的样式按需引入与解析的错
   解决方法：nuxt.config.js -> build 中添加 loaders 的less 配置如下：
   
   

       loaders: {
         less: {
           lessOptions: { // less-loader 5.x以上才有 lessOptions , 5.x 以下直接配置
             javascriptEnabled: true,
           },
         },
       },    

   配置 less 的主要功能是 按需加载和less解析。再运行 yarn dev / npm run dev
   

    

    运行后报：Cannot use import statement outside a module，因为：因nuxt项目需要安装a基础库包，故需引用到a包的一些方法，从而import的时候报错了。
   解决方法：nuxt.config.js -> build中添加以下代码：
   

   transpile: [/ant-design-vue/]

   再运行：成功。
   
   

    

    

    

   定制主题操作如下：
   在 nuxt.config.js -> build -> less -> lessOptions 中添加 modifyVars： 如下代码：

        loaders: {
         less: {
           lessOptions: {
             javascriptEnabled: true,
             modifyVars: { // 根据自己需要的主题颜色修改， antdV 的变量配置可以查看 https://github.com/vueComponent/ant-design-vue/blob/master/components/style/themes/default.less
               'primary-color': '#41b883', 
               'layout-body-background': '#fff'
             }
           },
         },
       },

   运行后效果如下：