2018-09-06 关于在vue中使用外部js，css的过程

Posted 2023-05-05

参考技术A   走访了好几个移动框架，来回切换了几次，发现都不是很适合我使用，要么是组件不够用，要么是组件无法二次封装。我在自己的项目中大多是需要使用框架之样式，所以思来想去还是用比较熟悉的mui移动框架（ 官方网址 ）。但是mui是没法使用npm进行安装的（一大遗憾），思来想去于是将mui框架所需的js,css文件放在static目录下：

在index.html中以静态资源的方式进行引用。

当然想要在组件中直接使用mui这个变量，需要在build/webpack.base.conf.js文件中进行配置

如需引用mui框架的样式只需要引入mui中的class样式

以上是我在项目中遇到问题的一些解决方案，谢谢。

如何在 vue js 和 laravel 中使用外部脚本

【中文标题】如何在 vue js 和 laravel 中使用外部脚本

【英文标题】：how to use external scripts in vue js and laravel

【发布时间】：2018-11-14 05:03:36

【问题描述】：

是我第一次使用vue js和laravel混合，我有点困惑，我以前手动加载脚本，没有编译，但是现在我想使用vue js，当我添加app.js脚本时在我的刀片模板结束时，其他脚本停止工作，我尝试编译所有脚本并将它们与 app.js 文件一起添加，但即使这样它也不起作用，这是我的 webpack 代码

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');
//project files
mix.styles([
    'public/css/materialize.css',
    'public/plugins/datatablesMaterialize.css',
    'public/css/main.css',
    'public/css/ionicons.min.css',
    'public/css/nouislider.css',
    'public/plugins/fullcalendar/fullcalendar.css',
    'public/plugins/responsive.dataTables.min.css',
    'public/css/jquery.fancybox.min.css',
    'public/css/style.css',
    'public/css/sweetalert2.min.css',
    'public/css/jquery.steps.css'
], 'public/css/allPets.css');

mix.scripts([
    'public/plugins/datatablesMaterialize.js',
    'public/plugins/moment.min.js',
    'public/plugins/dataTables.responsive.min.js',
    'public/plugins/moment.min.js',
    'public/plugins/fullcalendar/fullcalendar.js',
    'public/plugins/fullcalendar/lang/es.js',
    'public/plugins/jquery.validate.js',
    'public/plugins/validation-additional-methods.min.js',
    'public/js/materialize.js',
    'public/js/sweetalert2.min.js',
    'public/js/jquery.steps.js',
    'public/plugins/jquery.validate.js',
    'public/plugins/slick/slick.min.js',
    'public/js/jquery.fancybox.min.js',
    'public/js/spinner.js',
    'public/js/jquery.spin.js',
    'public/js/funciones.js'
], 'public/js/allPets.js');

当我在没有脚本 app.js 的情况下使用文件 allPets.css 和 allPets.js 时，一切正常，但是当我添加所有内容时，它再次停止工作（ materialize 的侧边栏停止工作等）。

【参考方案1】：

var plugin =  'resources/assets/plugins/';

mix.js('resources/assets/js/app.js', 'public/js/app.js')
.combine([
  plugin + 'jquery/jquery.min.js',
  plugin + 'popper/popper.min.js',
  plugin + 'bootstrap/bootstrap.min.js',
  plugin + 'moment/moment.min.js',
  plugin + 'toastr/toastr.min.js',
  plugin + 'slimscroll/jquery.slimscroll.js',
  plugin + 'waves/waves.js',
  plugin + 'sticky-kit/sticky-kit.min.js',
  plugin + 'fancybox/jquery.fancybox.pack.js',
  plugin + 'fancybox/jquery.fancybox.js',
  plugin + 'fancybox/jquery.mousewheel.pack.js',
   'public/js/app.js',
],'public/js/bundle.min.js')
.sass('resources/assets/sass/style.scss', 'public/css')
.browserSync('laravue');