Nuxt项目配置支持sass和bulma按模块加载

Bulma 好用,不过对于一个“高级”UI组件项目来说,一次全部组件样式加载,也是一个不太拿得出手的事。项目进行了一部分,重新改造一下吧!

  1. 重新安装Nuxt项目,官方推荐了两种方式,之前测试过,用yarn的方式下载模板真快啊,不过安装依赖的时候就报错,不知道为什么,前几天还没这个问题;那就继续用npx的方式吧,虽然慢点,不过能安装成功,不多说
npx create-nuxt-app <项目名>
yarn create nuxt-app <项目名>
  1. 安装过程中的选择
    1. 在上篇文章讨论了,新版本的Nuxt已经不能选择服务器端框架了,需要自己配置,请参考上次的文章
    2. UI类库肯定还是选择Bulma,不过不用Nuxt自己封装的了。我看了源码,目前Bulma的最新版本是0.9,Nuxt里面封装的Bulma版本是0.8,所以选择UI框架的时候,不做选择,后面自己安装。详请如下
// 安装bulma
  npm install bulma --save
// nuxt.config.js
  css: [
    'bulma/css/bulma.min.css',
    'font-awesome/css/font-awesome.min.css',
    '@/assets/css/base.css'
  ]

注意:这里还是全部引入了Bulma的样式,不是本文讨论的重点,只是说明可以用这样的方式替代掉默认的Bulma

  1. Axios是不是要选择Nuxt中自己封装的?
    1. Nuxt的文档中强烈的推荐用他们自己封装的Axios,而且他们还专门针对自己封装的Axios写了比较详细的文档,用它会省去很多麻烦
    2. 我也尝试了几个项目了,是不用做什么操作就可以直接用了(可以看之前的文章),不过真是感觉很不习惯。特别是我们单独封装的数据层后,不能直接从封装好的'@nuxtjs/axios'中导入axios对象,只能把$axios对象从vuex中传到数据层,感觉有点不忍直视
    3. 官方文档给出的用Nuxt封装的理由就是他们是用的单个axios实例,我们也自己封装下就行,其实之前也都是这么做
  2. 安装sass
// 安装开发时依赖
npm install node-sass sass-loader --save-dev
// vue组件中

如上面代码,开发一个UI组件项目,就可以按需按模块引入Bulma,UI组件库的体积肯定会小;而且最重要的是我们可以对用户“隐藏”Bulma,让我们的用户不需要学习Bulma,甚至都感受不到Bulma的存在,而很方便的做出漂亮的界面和元素!

你可能感兴趣的:(Nuxt项目配置支持sass和bulma按模块加载)