自动化安装

1.安装node (node -v查看node版本)

2.全局安装vue-cli  Npm install -g vue-cli  Vue- v:查看是否安装成功  Vue list:查看可用的模板

3.创建一个基于 "webpack" 模板的新项目 Vue init webpack project-name

手动安装
怎么使用webpack 进行打包

1、npm install webpack -g

2、创建站点 mkdir webpack

3、进入站点 cd webpack

4、npm init 创建package.json 文件

5、npm install --save-dev webpack 下载node_modules文件夹

6、npm install webpack-cli --save //安装webpack脚手架

7、webpack ./src/main.js -o ./dist/bundle.js --mode development

-------------

怎样使用 webpack-dev-server

1、npm install webpack-dev-server --save-dev

2、配置 package.json

3、npm run dev

----------------------------
使用jquery

1.npm install jquery --save-dev
2.在webpack.config.js 里添加

var webpack = require('webpack'),

module.exports 里面添加

plugins: [
new webpack.ProvidePlugin({
"$": "jquery",
"jQuery": "jquery",
"window.jQuery": "jquery"
})
],

----------------------------
使用css loader

1、npm install style-loader css-loader --save-dev

2、配置 webpack.config.js

---------------------
使用bootstrap4

1.npm install bootstrap --save-dev
2.npm install popper --save-dev

bootstrap里面还有些其文件 所以在匹配loader时还需要添加

{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,use: "file-loader" },
{test: /\.(woff|woff2)$/,use: "url?prefix=font/&limit=5000"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,use: "url?limit=10000&mimetype=application/octet-stream"},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,use: "url?limit=10000&mimetype=image/svg+xml"}

----------------------------

使用less-loader

1、npm install less-loader --save-dev

2、npm install less --save-dev

3、配置 webpack.config.js

-------

使用 图片 url loader

1、npm install url-loader file-loader --save-dev

2、配置 webpack.config.js

-----------

webpack 使用 .vue 文件

0.npm install -vue-s 安装

1、import Vue from 'vue'

2、创建.vue文件并引入 import login from './login.vue'

3、将组件 挂载到vue实例中

4、安装第三方 loader npm install vue-loader vue-template-compiler --save-dev

5、配置webpack.config.js中的匹配规则

6、引入 plugins

const VueLoaderPlugin = require('vue-loader/lib/plugin')

plugins:[

new VueLoaderPlugin()

],

--------------------------------

webpack 使用路由

1、安装路由 npm install vue-router -S

2、导入路由包 import VueRouter from 'vue-router'

3、安装 VueRouter Vue.use(VueRouter)

4、导入组件

5、创建路由对象 配置匹配规则

6、将路由对象 挂载到vue实例

7、前台调用

前段学习 之 webpack 学习记录的更多相关文章

  1. webpack 学习资料

    webpack 学习资料 webpack 学习资料 网址 webpack 中文版 https://webpack.docschina.org/configuration/dev-server/

  2. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

  3. webpack学习(入门基础)

    webpack的学习webpack是什么?1:加载模块(将JS.sass/less.图片等作为模块来处理使用) 2:进行打包 webpack的优势?1:webpack以commonJS(JS的规范)的 ...

  4. Java 打印金字塔 or 打印带数字的金字塔 (Java 学习中的小记录)

    Java 打印金字塔 or 打印带数字的金字塔 (Java 学习中的小记录) 作者:王可利(Star·星星) 效果图: 代码如下: class Star8 { public static void m ...

  5. Java 需要记得、了解的关键词 (Java 学习中的小记录)

    Java 需要记得.了解的关键词 (Java 学习中的小记录)     作者:王可利(Star·星星) 总结:本次随笔,仅且拿来平时翻阅记忆用

  6. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

  7. webpack学习笔记(二)-- 初学者常见问题及解决方法

    这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...

  8. webpack学习

    // 一个常见的`webpack`配置文件 const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-we ...

  9. webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

随机推荐

  1. 斯坦福CS224n课程作业

    斯坦福CS224n作业一 softmax 作业要求如下: 解析:题目要求我们证明\(softmax\)函数具有常数不变性. 解答:对于\(x+c\)的每一维来说,有如下等式成立: \[softmax( ...

  2. 一致性 Hash 算法的实际应用

    前言 记得一年前分享过一篇<一致性 Hash 算法分析>,当时只是分析了这个算法的实现原理.解决了什么问题等. 但没有实际实现一个这样的算法,毕竟要加深印象还得自己撸一遍,于是本次就当前的 ...

  3. TiDB之mac上搭建及调试技巧

    此文目的 由于本人最近已经成为TiDB的粉丝,所以就开始各种研究TiDB的源码,研究源码这个事情,首先就需要在自己电脑上不断的调试及修改.TiDB本身的代码是非常容易编译和调试的,但是要把PD.TiK ...

  4. Nginx的“远方表哥”—Tengine

    本文收录在Linux运维企业架构实战系列 今天想起当初研究nginx反向代理负载均衡时,nginx自身的upstream后端配置用着非常不舒服: 当时使用的淘宝基于nginx二次开发的Tengine, ...

  5. 【原创】详细案例解剖——浅谈Redis缓存的常用5种方式(String,Hash,List,set,SetSorted )

    很多小伙伴没接触过Redis,以至于去学习的时候感觉云里雾里的,就有一种:教程随你出,懂了算我输的感觉. 每次听圈内人在谈论的时候总是插不上话,小编就偷偷去了解了一下,也算是初入门径. 然后就整理了一 ...

  6. Properties类对于文件的读取和写入

    Properties类表示一个持久的属性集.Properties可保存在流中或从流中加载.Properties对象只能加载以 .Properties 为后缀的文件(文件我创建在src下). 开始时文件 ...

  7. [AI开发]基于深度学习的视频多目标跟踪实现

    据我目前了解掌握,多目标跟踪大概有两种方式: Option1 基于初始化帧的跟踪,在视频第一帧中选择你的目标,之后交给跟踪算法去实现目标的跟踪.这种方式基本上只能跟踪你第一帧选中的目标,如果后续帧中出 ...

  8. 缓存穿透,缓存雪崩,热点key及解决办法

    1.穿透 穿透:频繁查询一个不存在的数据,由于缓存不命中,每次都要查询持久层.从而失去缓存的意义. 解决办法: 持久层查询不到就缓存空结果,查询时先判断缓存中是否exists(key) ,如果有直接返 ...

  9. 用pyinstaller打包python程序,解决打包时的错误:Cannot find existing PyQt5 plugin directories

    解决方法就是用everything搜索PyQt5,找到 /Library/plugins路径下的PyQt5文件夹,将里面的dll动态库pyqt5qmlplugin.dll复制出来 按照错误提示的路径, ...

  10. 【Keras篇】---利用keras改写VGG16经典模型在手写数字识别体中的应用

    一.前述 VGG16是由16层神经网络构成的经典模型,包括多层卷积,多层全连接层,一般我们改写的时候卷积层基本不动,全连接层从后面几层依次向前改写,因为先改参数较小的. 二.具体 1.因为本文中代码需 ...