Laravel 成功整合 cube-ui 组件(3 楼附 jsConf.push 错误解决方法)

鼓捣了大半天,终于把 cube-ui 给整进去了。运行命令 npm run watch-poll 编译成功。
laravel 成功整合 cube-ui 组件
特地复制一段有关 ScrollNav 组件的代码测试了一下,尽管 PhpStorm 提示 Unknown html tag.. 实际上这个组件是有效的
laravel 成功整合 cube-ui 组件
浏览器显示效果如下,尽管界面丑陋(还没写样式),但是功能具备了!
laravel 成功整合 cube-ui 组件

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 3

ScrollNav滚动效果图出来了
1、菜单左右两侧可以联动
2、标题具有吸顶效果
3、滚动到极限位置会有缓冲效果
如果不用cube组件,自己写的话肯定要费不少工夫
file

4年前 评论

总结一下 laravel 环境整合 cube-ui 组件的完整过程
首先确保 npm run watch-poll 这条命令可以正常执行,之后再进行如下操作:
1、执行命令【npm i -S cube-ui】安装 cube-ui;
2、执行命令【npm i -D stylus stylus-loader】安装依赖包(装过的重装也无妨);
3、执行命令【npm i -D webpack-transform-modules-plugin@0.4】安装插件;
4、手动修改 package.json 文件,添加以下代码

    "transformModules": {
        "cube-ui": {
            "transform": "cube-ui/lib/${member}",
            "kebabCase": true,
            "style": {
                "ignore": ["create-api", "better-scroll", "locale"]
            }
        }
    }

5、修改webpack.mix.js这个配置文件,末尾添加如下代码

let TransformModulesPlugin = require('webpack-transform-modules-plugin')
mix.webpackConfig({
    resolve: {
        alias: {
            'cube-ui': 'cube-ui/lib'
        }
    },
    plugins: [
        new TransformModulesPlugin()
    ]
})

6、在resources/assets/js/app.js文件中使用cube

import Cube from 'cube-ui'
Vue.use(Cube)

7、执行命令【npm run watch-poll】编译吧!

测试环境如下:
Win7 64位
Laravel Framework 5.5.1
Vue 2.1.10
npm 6.4.1
node v10.15.1

文件 package.json 截图如下
Laravel
如果碰到错误 TypeError: jsConf.push is not a function
这可能是因为安装插件的时候没有指定版本号,或者版本号不对。比如npm i -D webpack-transform-modules-plugin这条命令没有指定版本号,电脑有时竟会安装 0.3.5 的版本(并非最新版)。经测试发现:0.3.x系列的版本在win7里面会报错;0.2.1的版本及0.4.x系列的版本运行正常。所以在第3步安装插件的时候明确指定了0.4版的版本号 webpack-transform-modules-plugin@0.4

4年前 评论

建议是不是可以手动编辑原文更好一点,评论这种不能保证一直在最前面吧~ @zhaiduting

4年前 评论
zhaiduting (楼主) 4年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
未填写
文章
63
粉丝
17
喜欢
140
收藏
118
排名:132
访问:7.4 万
私信
所有博文
社区赞助商