npm教程03
vue init webpack vue02通过脚手架按照webpack模板建一个vue项目
接着运行npm install 安装依赖,脚手架自动去读取package.json
自动从网上下载依赖的模块,并且生成一个node_modules目录
接着运行npm install bootstrap安装bootstrap,
开始运行npm run dev,它会自动执行[build/dev-server.js]
1、webpack对源码进行编译打包,并且返回compiler对象
2、创建express服务器(类似于tomcat),提供静态文件的web服务,启动端口默认是8080
当我们写完程序,代码放到src目录下
当断开express服务器,发现无法访问已经已经编译后的compiler对象,我们希望的是能够帮从新编译出一个静态文件。
所以运行另外一条命令npm run build 执行的build/build.js文件
1、自动删除目录
2、执行webpack构建编译文件,然后保存dist目录
3、输出相关的信息
(生成静态文件)
引入bootstrap
先安装npm install jquery --save-dev
在modules目录下,自动生成了jquery目录
编辑package.json发现自动增加jquery的依赖(不需要人手操作)
手动编辑webpack.base.conf.js
在module.exports里面加入:
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]
到此webpack已经搞定了jquery的引用,下面就是自己src的使用
在App.vue 编写测试jquery代码,是成功。
到全局目录,复制bootstrap的这3个文件,然后粘贴到src\assets 目录下
在main.js下,引用的文件,将是全局的
测试:
随便挑1个vue文件,写一个button,显示正常。