"在新的vue2项目中配置jquery"
1.在新的vue2项目中配置jquery
https://www.freesion.com/article/2888765921/
- vscode打开项目,安装jquery
npm install jquery --save-dev
安装成功可以再package-lock.json的devDependencies里面看到安装的jquery的版本号
- 在项目根目录下的
build/webpack.base.conf.js
文件中,第5行下面加入这行代码:
var webpack = require("webpack")
在build/webpack.base.conf.js
文件最下面加入这些代码:
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
3.在根目录下的\src\main.js
中引入import $ from ‘jquery’
重启项目此时在vue中全局引入了jquery,就可以在script中写jquery语法的代码了。(就可以用$啦)
2.在此过程中用到的知识点
(1)关于npm的全局安装和本地安装
https://blog.csdn.net/weixin_44867717/article/details/128891438
Node安装过后,就可以使用一些模块,比如fs、path、http,这些是第三方库,不是官方写的。
npm(node package manager)翻译过来就是node包(模块)管理器。npm不用单独安装,安装完node,npm默认就安装好了。
全局安装(一般是命令)
全局安装的一般都是命令,所以全局安装的模块,在任何文件夹都可以调用这个命令。
全局安装的内容一般都是在系统盘,可以通过 npm root -g
查看全局安装路径。我的路径是D:\software\nvm\nodejs\node_global\node_modules
全局安装命令
npm install -g 模块名
本地安装(用require() 加载的模块)
本地安装的都是能够直接使用的模块,他们不是命令,是类似于 fs 等可以通过 require() 加载的模块。
在需要使用第三方模块的文件夹,执行下面的命令,本地安装第三方模块(在其他文件夹中就不能使用)。
npm install 模块名
安装后,内容会出现在node_modules 文件夹和 package-lock.json文件(里面记录了express中的内容下载的地址、版本等等)中
(2)(本地安装)关于npm install (–save-dev)的用法
以echarts包为例
npm install echarts
会把包安装到node_modules
目录中,不会修改package.json
,之后运行npm install命令时,不会自动安装echarts
npm install echarts --save
会把包安装到node_modules
目录中,在package.json的dependencies
属性下添加echarts,之后运行npm install命令时,会自动安装echarts
到node_modules目录中
npm install echarts --save-dev
会把包安装到node_modules目录中,会在package.json的devDependencies
属性下添加echarts,之后运行npm install命令时,会自动安装echarts 到node_modules目录中,之后运行npm install –production或者注明NODE_ENV变量值为production时,不会自动安装echarts
到node_modules目录中