详细说明在vue-cli中对jQuery和bootstrap的引用 以及使用sass等编写css

写在前面：

本文是在分析了vue- CLI支架的详细步骤后，关于vue-cli支架配置的又一篇文章。因为文章的一些步骤不够清晰，所以在我介绍JQuery和bootstrap的时候花了很多功夫，所以本文的步骤会尽可能详细。

介绍自举

1.下载所需的引导文件。

要使用的引导文件放在src目录下的资产文件夹中。

2.在条目文件src/main.js中引入引导

“进口”。/assets/bootstrap-3 . 3 . 7-dist/class/bootstrap . min . CSS ' import '。/assets/bootstrap-3 . 3 . 7-dist/js/bootstrap . min//根据自己的文件夹路径选择路径，这样就可以在vue项目中使用bootstrap了

介绍jquery

1.下载jquery依赖项。

Npm安装jQuery -保存我最初下载的jQuery依赖包，但是有一个警告：

这里有一个警告，意思是要丢弃[emailprotected]，请使用“jquery”(全部小写)。然后我会将其更改为小写jquery。

2.修改配置

位置：生成文件夹下的webpack.base.conf.js文件。

添加webpack对象：

var web pack=require(' web pack ')；位置：生成文件夹下的webpack.base.conf.js文件(原始位置)，它是在下面的module.exports对象中添加的。

Plugins: [//3。配置jQuery新网络包的全局使用。ProvidePlugin ({$:' jQuery '，jQuery 3360' jQuery '，jQuery :' jQuery '，' window。jQuery ' : ' jQuery ' })](9502.163.com

没有第三步，现在可以直接在组件中使用jquery，而不用在其他地方引用jquery，这是非常容易和愉快的。

3.使用JQ插件

关于这一点查阅了很多资料，但是很少有文档明确说明如何使用jq插件，以至于很多长期使用vue的老板都不知道jq插件可以直接在vue-cli中使用。虽然这一步很简单，但我想在这里提一下，供大家参考。

用法：

Jq插件只需要将插件需要的文件下载到本地src/assets或者最外层的静态文件夹中，然后将插件文件引用到组件中，按照插件封装的方法进行调用，这和直接使用jq的插件基本相同。

以下是引用jq插件的演示示例：

关于css的部分

在vue-cli中用sass和less编写css样式非常简单，因为sass和less已经在vue-cli中配置好了，所以我们需要直接用sass或less下载两个模块，然后webpack会根据lang属性自动使用合适的加载器。

钢性铸铁

直接写风格，用css规则就可以了。

如何引用外部css文件？

Stylelang=' CSS' @ import '。/index . CSS/style或stylelang=' CSS' src=' http3360。/index . CSS/style如果需要使用sass，

安装sass模块

Npm安装节点-sass-save-dev NPM安装sass-loader-save-dev在组件的样式部分使用内联编写

模板/template script/script style lang=' SCS '作用域//添加lang=' SCS '/sass style/style来引用sass外部文件。

Style lang=' scss ' src=' http:/index。scss '/样式如果您需要使用更少，

安装较少的模块

NPM无安装-保存-开发NPM无安装-加载-保存-开发在组件的样式部分使用内联编写

template/template script/script style lang=' less '作用域//add lang=' less '//less style/style在本节中引用较少外部文件的编写。

Style lang=' less' src=' http :/index。less '/风格结论：

仔细阅读，按照步骤基本配置成功。有不够清楚的地方请指正。这篇文章是写给小白的。上面写着“玩”。请轻喷你的大手。希望对大家的学习有帮助，希望大家多多支持我们。