Reference jQuery and bootstrap in vue-cli, and use sass and less to write css, vue-clijquery

Reference jQuery and bootstrap in vue-cli, and use sass and less to write css, vue-clijquery

Preface:

This article describes how to use vue-cli scaffolding by hand-after analyzing the detailed steps and text, and then describes how to configure vue-cli scaffolding, some of the steps in this article are not clear enough, so it took a lot of time for me to introduce JQuery and bootstrap, so the steps in this article will be as detailed as possible.

Introduce bootstrap

1. download the required bootstrap file.

Put the bootstrap file to the assets folder under the src directory.

2. Introduce bootstrap in the src/main. js file.

Import './assets/bootstrap-3.3.7-dist/css/bootstrap.min.css' import './assets/bootstrap-3.3.7-dist/js/bootstrap. min' // select a path based on your own folder path

In this way, you can use the bootstrap style in the vue project and use it directly in the class, such as the button style.

Introduce jquery

1. Download jquery dependencies.

npm install jquery --save

I downloaded the jQuery dependency package, but a warning is displayed:

Here is a warning, which means to discard the jQuery@1.7.4, use "jquery" (all lowercase )., Then I changed to the lower-case jquery.

2. modify configuration

Location: The webpack. base. conf. js file in the build folder.

Add a webpack object:

 var webpack = require("webpack");

Location: The webpack. base. conf. js file (original location) in the build folder. Add it to the module. exports object below.

Plugins: [// 3. configure jquery new webpack globally. providePlugin ({$: "jquery", jQuery: "jquery", jquery: "jquery", "window. jQuery ":" jquery "})],

There is no third step. Now you can use the jquery method directly in the component. It is so easy and pleasant to reference jquery without referencing it elsewhere.

3. Use the JQ plug-in

I have read a lot of information about this. There is almost no clear document on how to use the jq plug-in. As a result, many developers who have been using vue for a long time can, I don't know whether jq plug-ins can be directly used in vue-cli .. Although this step is simple, I would like to mention it here for your reference.

Usage:

The jq plug-in only needs to download the files required by the plug-in to the local src/assets or the outermost static folder, and then reference the plug-in files into the component, you can call it based on the method encapsulated by the plug-in. It is basically the same as using the jq plug-in directly.

The following is a demo reference to the jq plug-in:

About css

Use sass and less in vue-cli to write css styles. The steps are very simple. Because sass and less have been configured in vue-cli, we need to use sass or less to directly download two modules, then, the webpack will be automatically processed by the appropriate loader according to the lang attribute.

Css

Use css rules.

Reference the external css file.

<Style lang = "css"> @ import './index.css' </style> or <style lang = "css" src = "./index.css"> </style>

To use sass

Install the sass Module

npm install node-sass --save-dev npm install sass-loader --save-dev

Inline writing in component style

<Template> </template> <script> </script> <style lang = "scss" scoped> // Add the lang = "scss" // sass style in this section. </ style>

Reference sass external file format.

<style lang="scss" src="./index.scss"></style> 

If you want to use less

Install the less Module

npm install less --save-dev npm install less-loader --save-dev 

Inline writing in component style

<Template> </template> <script> </script> <style lang = "less" scoped> // Add the lang = "less" // less style in this section. </ style>

Reference less external files.

<style lang="less" src="./index.less"></style>

Conclusion:

Read carefully and follow the steps to complete the configuration. If you are not clear enough, please correct me. This article is intended for Tom. It is easy to write and play. I hope it will be helpful for everyone's learning, and I hope you can support the house of helping customers more.