美文网首页
Nuxt项目配置支持sass和bulma按模块加载

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

作者: 前端巴士 | 来源:发表于2020-07-10 21:31 被阅读0次

    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组件中
    <style lang="sass" scoped>
      @import "bulma/sass/utilities/_all.sass"
      @import "bulma/sass/elements/button.sass"
    </style>
    

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

    相关文章

      网友评论

          本文标题:Nuxt项目配置支持sass和bulma按模块加载

          本文链接:https://www.haomeiwen.com/subject/pokvcktx.html