欢迎来到
银狐的个人博客

(一看就会)vue使用query打包全过程

首先,创建一个新的文件夹。

ctrl+shirt+y键,使用控制台(终端)

在控制台执行以下几步,导包,会有进度条要等待(一至六步都是在控制台写控制命令)

第一步:npm install -g webpack

npm install -g webpack

 

第二步:npm init   (一看就会)vue使用query打包全过程 第1张图片-银狐博客              //文件夹生成package.json

npm init              

这里一直回车就行

 第三步:npm install –save-dev webpack                      //生成package-lock.json

                        这里可能要比较久,耐心等待

npm install --save-dev webpack  

第四步:npm uninstall webpack-cli     //卸载本地安装的

npm uninstall webpack-cli

第五步:npm install -g webpack-cli    //全局安装

npm install -g webpack-cli

                        这里可能要比较久,耐心等待

第六步:npm install –save-dev webpack-cli             //把webpack-cli安装到devDependencies

npm install --save-dev webpack-cli

 

第七步:在文件下,创建src文件,src文件下有三个:index.html 、               index.js 、zz.js

第八步:npm install jquery   或者   npm install jquery –save                         //这是安装jQuery,使用文件之前一定要安装jQuery

npm install jquery

第九步:在根文件夹下创建webpack.config.js,不是放在src文件夹下

 在里面写代码,如下

const path=require("path");const webpack = require('webpack');module.exports={    //webpack打包的入口文件    entry:path.join(__dirname,"./src/zz.js"),    //webpack打包的出口文件    output:{        path:path.join(__dirname,"./dist"),  (一看就会)vue使用query打包全过程 第2张图片-银狐博客      filename:"bundle.js"    },    mode : 'development'}

第十步:在html和js文件下写代码

                                                                index.js

import $ from "jquery"//使用jQuery$(function(){    alert('ss')})

zz.js

 //这是拿来引用文件的,避免还要在webpack.config.js里一个个添加转换jQuery文件

var $ = require("./index.js")//引用文件

index.html

在index.html里,添加打包好的js文件(这里引入的是生成的jQuery的地址)

<script src="/dist/bundle.js"></script>

第十一步:在package.json里添加  "dev":"webpack"

 

第十一步:ctrl+shirt+y键,打开控制台,输入 npm run dev

        (会生成dist文件,里面有打包好的jQuery文件)

 现在就完成打包了,然后在浏览器看一下效果。

 输出了我们在js里用jQuery写出的代码,完成。

赞(0) 打赏
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《(一看就会)vue使用query打包全过程》
文章链接:https://www.yinhu3.com/1988.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。
如果文章侵犯到你的权益,请查看本站免责声明:《免责声明》

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

愿意请我喝杯矿泉水吗

支付宝扫一扫打赏