vue--加载模块详解
1、postcss-loader、autoprefixer、css-loader 、sass-loader:加载css模块及css预处理模块,添加浏览器前缀到CSS内容里
加载模块:npm install postcss-loader autoprefixer css-loader sass-loader -D
在webpack基础环境配置中添加:
rules: [
{
test: /\.scss/, //css预处理器 后缀名.scss
use: [
'vue-style-loader', //将css以js形式插入HTML中
'css-loader', //专门处理css文件
{
loader: "postcss-loader",
options: {
sourceMap: true, //直接使用前面生成的sourceMap,编译的效率会快点
}
},
'sass-loader' //专门处理sass文件,转为css文件,不处理css
]
}
]
在项目根目录创建 postcss.config.js,并且设置支持哪些浏览器,内容如下:
const autoprefixer = require('autoprefixer');
module.exports = {
plugins: [
require('autoprefixer')({
"overrideBrowserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
})
]
}
- 主流浏览器最近2个版本用“last 2 versions”;
- 全球统计有超过1%的使用率使用“>1%”;
- 仅新版本用“ff>20”或”ff>=20″
2、webpack、webpack-cli:包管理工具 webpack-cli是webpack 4.0 之后都需要装的
3、cross-env:不同平台环境变量配置
解决不同平台直接设置环境变量(如window上使用配置环境需要在NODE_ENV=development前加set)而通过cross-env NODE_ENV=development 可以让我们在不同的平台上执行脚本;
加载模块:npm install cross-env -D
在package.json中修改以下命令:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "cross-env NODE_ENV=development webpack --config build/webpack.dev.config.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.config.js"
}
cross-env NODE_ENV=development 作用:不同平台上设置区分环境变量(开发与生产)
通过设置 const isDev = process.env.NODE_ENV === 'development' 判断环境是否为开发或生产环境
当然这里已经在package.json中配置好了不同环境,只要执行不同的命令就能在指定的环境下启动项目。
4、服务器热更新启动模块加载
webpack-dev-server:webpack服务器的热更新
(专门用于开发模式)监听文件的变化、监听端口号,是否自动打开浏览器并自动刷新网页,做到实时预览
加载模块:npm install webpack-dev-server -D
加载模块好以后,需要在package.json文件中添加一条指令用来启动webpack-dev-server
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.config.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.config.js"
}
5、webpack-merge:使用webpack-merge
的包来进行两个webpack
配置之间的合并
在vue中主要是将不同环境下的webpack配置参数与基础配置参数合并(用优雅的方式提取公共配置部分的代码),使用方式如下:
加载模块:npm install webpack-merge -D
// 引入基本webpack基本配置
const baseWebpackConfig = require('./webpack.base.config');
//将基本配置与dev环境配置合并,然后导出
const devWebpackConfig = merge(baseWebpackConfig,{
module:{}
devServer:{}
})
module.exports = devWebpackConfig;
6、Babel配置
作用:在webpack 中,默认只能处理 一部分 ES6 的新语法,一些更高级的ES6语法或者 ES7 语法,webpack 是处理不了的;这时候就需要 借助于第三方的 loader,来帮助webpack 处理这些高级的语法,当第三方loader 把 高级语法转为 低级的语法之后,会把结果交给 webpack 去打包到 bundle.js 中通过Babel,可以帮我们将高级的语法转换为低级的语法。
npm install babel-core babel-loader babel-plugin-transform-runtime -D
npm install babel-preset-env babel-preset-stage-2 -D
npm install babel-plugin-transform-vue-jsx babel-plugin-syntax-jsx babel-helper-vue-jsx-merge-props -D
babel-polyfill 解决不同浏览器低版本不兼容问题(主要是IE的兼容)
因为ie9和一些低版本的高级浏览器对es6新语法并不支持 npm install babel-polyfill -D 在main.js及vuex入口文件中最上一行引入:
import 'babel-polyfill'
7、copy-webpack-plugin: 将static或XX目录拷贝到打包之后的dist文件下
加载插件:npm install copy-webpack-plugin -D
const CopyWebpackPlugin = require('copy-webpack-plugin');
//在配置中加入以下内容:
plugins:[
new CopyWebpackPlugin([//复制插件
{
from: path.resolve(__dirname, '../static'),
to: baseconfig.dev.assetsSubDirectory,
ignore: ['.*']//忽略.*的文件
}
])
],
8、generate-asset-webpack-plugin 实现vue打包后生成配置文件用以外部修改公共路径(专用于生产环境)
第一步:安装generate-asset-webpack-plugin插件
npm install --save-dev generate-asset-webpack-plugin
第二步:在根目录下添加serverConfig.json的配置文件,内容如下:
{
"ApiUrl":"http://localhost:8082/",
}
第三步:在build/webpack.prod.config.js文件里引入generate-asset-webpack-plugin
const GeneraterAssetPlugin = require('generate-asset-webpack-plugin')
第四步:引入添加的serverConfig.json文件
const serverConfig = require('../serverConfig.json')
第五步:添加打包时写入配置文件的代码
const createServerConfig = function(compilation){
return JSON.stringify(serverConfig);
}
第六步:添加打包时输出配置文件的代码
plugins:[
//让打包的时候输入可配置的文件
new GenerateAssetPlugin({
filename: 'serverconfig.json',
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation));
},
extraFiles: []
}),
]
第七步:在main.js中添加读取build之后的代码(我这里通过axios实现异步调取)
Vue.prototype.getConfigJson = function () {
axios.get('serverConfig.json').then((result)=>{
Vue.prototype.ApiUrl =result.data.ApiUrl;//设置成Vue的全局属性 ApiUrl:域名接口
new Vue({
router,
store,
render: (h) => h(App)
}).$mount('#root');
}).catch((error)=>{
console.log(error)
})
}
第八步:项目中引用
vue文件中直接引用 this.
ApiUrl
9、html-webpack-plugin:这个插件可以帮助生成 HTML 文件,在 body 元素中,使用 script 来包含所有你的 webpack bundles
npm install html-webpack-plugin --save-dev
// 文件名及时更改,自动打包并且生成响应的文件在index.html里面
const HtmlWebpackPlugin = require('html-webpack-plugin');
//将以下内容放入plugin中
new HtmlWebpackPlugin({
template: path.join(__dirname,'../index.html')
})
10、lockr:帮助你轻松使用localStorage,让使用本地存储保存对象、数组、数字、字符串省略很多步骤。
npm install lockr -D
11、mini-css-extract-plugin:将CSS提取出来,单独作为一个文件。它为每一个包含CSS的JS文件创建一个CSS文件。它支持CSS和资源映射的按需加载
相比较extract-text-webpack-plugin有以下不同:
- 异步加载
- 没有复制编译(执行效率)
- 更易于使用
npm install mini-css-extract-plugin -D
const miniCssExtractPlugin=require("mini-css-extract-plugin"); // css单独提取打包
生产环境中在webpack配置文件中的plugins加入以下内容:
plugins: [
new miniCssExtractPlugin({filename: 'css/main.[contentHash:8].css'}),
]
添加 publicPath: '../' 是为了解决背景图片在打包后路径不对的问题(背景图片通过css预处理器加载的会将static当成根目录)
module: {
rules: [
{
test: /\.scss/, //css预处理器 后缀名.scss
use: [
{
loader:miniCssExtractPlugin.loader,
options:{
publicPath: '../'
}
},
'css-loader', //专门处理css文件
{
loader: "postcss-loader",
options: {
sourceMap: true, //直接使用前面生成的sourceMap,编译的效率会快点
}
},
'sass-loader' //专门处理sass文件,转为css文件,不处理css
]
}
]
},
12、使用sass:css预处理器需要加载 node-sass、sass-loader、style-loader --类似的右less、style预处理器(这里用sass)
npm install node-sass sass-loader style-loader -D
module: {
rules: [
{
test: /\.scss/, //css预处理器 后缀名.scss
use: [
'vue-style-loader', //将css以js形式插入HTML中
'css-loader', //专门处理css文件
{
loader: "postcss-loader",
options: {
sourceMap: true, //直接使用前面生成的sourceMap,编译的效率会快点
}
},
'sass-loader' //专门处理sass文件,转为css文件,不处理css
]
}
]
},
<style lang="scss" scoped> </style>
13、optimize-css-assets-webpack-plugin:压缩单独的css文件
在之前版本中我们使用extract-text-webpack-plugin
来提取CSS文件,不过在webpack 4.x中则应该使用mini-css-extract-plugin
来提取CSS到单独文件中
在Webpack 4.x中,新增了optimization的选项来代替之前版本中的webpack.optimize
等。在optimization选项中,我们可以进行详细的设置,以达到分离CSS,分离Chunk,压缩文件等等操作
npm install optimize-css-assets-webpack-plugin -D
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
在module中添加:
optimization: {
//压缩单独css文件
minimizer: [
new OptimizeCSSAssetsPlugin({}),
],
//分离js文件
splitChunks: {
chunks: 'all'
},
runtimeChunk: true // webpack相关代码打包到一个文件中,好处:可以规避新的模块加入的时候,webpack给新的模块加id后,插入的顺序可能在中间,使后面模块id变化,会导致打包出的hash产生变化,这样hash就不能进行常缓存
},
14、qrcodejs2:二维码生成器
npm install qrcodejs2 -D
在组件中引入:
import QRCode from 'qrcodejs2' // 引入qrcode
<div id="qrcode"></div> <!-- 创建一个div,并设置id为qrcode -->
mounted () {
this.qrcode();
},
methods: {
qrcode() {
let qrcode = new QRCode('qrcode', {
width: 132,
height: 132,
text: 'https://www.baidu.com', // 二维码地址
colorDark : "#000",
colorLight : "#fff",
})
},
}
15、rimraf:以包的形式包装rm -rf
命令,用来删除文件和文件夹的,不管文件夹是否为空,都可删除(这里用做打包文件的每次打包时删除)
npm install rimraf -D "scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.config.js",
"clean": "rimraf dist",
"build:pro": "cross-env NODE_ENV=production webpack --config build/webpack.prod.config.js",
"build": "npm run clean && npm run build:pro"
},
16、vue-lazyload:懒加载
npm install vue-lazyload --D
import Vue from 'vue'
import App from '@/App'
import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, {
preLoad: 1, //预加载高度的比例
error: '', //图像的src加载失败
loading: '', //src的图像加载
attempt: 1, //尝试计数
listenEvents: [ 'scroll', 'mousewheel' ] //监听事件
});
17、vue-template-compiler:将template语法转为render函数,那么常见的操作如下:
import Vue from 'vue'
import App from './pages/app.vue'; new Vue({
el:'#root',
render:h=>h(App)
})
18、vue-wechat-title:动态修改tilte(网页标题)
npm vue-wechat-title --D main.js中引入:
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle); 然后在路由配置中添加meta:
meta:{
title:'首页',
requireAuth:true
}, 在App.vue文件中使用
<div v-wechat-title="$route.meta.title">
或
<router-view v-wechat-title="$route.meta.title"></router-view>
19、vuex、vuex-persistedstate:使用vuex管理数据,vuex-persistedstate实现数据持久化
加载模块:
npm install vuex vuex-persistedstate -D 在vuex初始化时候,作为组件引入。
import Vue from 'vue';
import 'babel-polyfill'
import Vuex from 'vuex';
import common from './modules/common';
import buy_ticket from './modules/buy_ticket';
import createPersistedState from 'vuex-persistedstate'
//使用 vuex-persistedstate 这是一个用于 vuex 在页面刷新之间处理和存储状态的插件。 Vue.use(Vuex);
export default () => {
return new Vuex.Store({
modules: {
common:common,
buy_ticket:buy_ticket,
},
plugins: [createPersistedState()]
})
};
仅用作个人记录,有什么建议可以留言
vue--加载模块详解的更多相关文章
- C编译器、链接器、加载器详解
摘自http://blog.csdn.net/zzxian/article/details/16820035 C编译器.链接器.加载器详解 一.概述 C语言的编译链接过程要把我们编写的一个c程序(源代 ...
- Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...
- Spring Boot 配置加载顺序详解
使用 Spring Boot 会涉及到各种各样的配置,如开发.测试.线上就至少 3 套配置信息了.Spring Boot 可以轻松的帮助我们使用相同的代码就能使开发.测试.线上环境使用不同的配置. 在 ...
- jboss之启动加载过程详解
今天看了看jboss的boot.log和server.log日志,结合自己的理解和其他的资料,现对jboss的启动和加载过程做出如下总结: boot.xml是服务器的启动过程的日志,不涉及后续的操作过 ...
- Crystal框架配置参数加载机制详解?
前言 定义 配置参数定义的形式 配置参数文件定义在哪里? 配置参数加载的优先级 如何使用配置参数? 最佳实践 Jar项目中如何定义配置参数? War项目中如何定义或重载Jar包中的配置参数? 开发人员 ...
- Spring Cloud Alibaba基础教程:Nacos配置的加载规则详解
前情回顾: <Spring Cloud Alibaba基础教程:使用Nacos实现服务注册与发现> <Spring Cloud Alibaba基础教程:支持的几种服务消费方式(Res ...
- mybatis加载配置文件详解
spring整合Mybatis后,SqlSessionFactory的创建由spring进行了代理,以下是SqlSessionFactory创建的流程 SqlSessionFactoryBean: p ...
- 插件化框架解读之Android 资源加载机制详解(二)
阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680Android提供了一种非常灵活的资源系统,可以根据不同的条件提供 ...
- jquery插件图片延时加载实例详解
效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...
随机推荐
- 学习Java第12天
今天所做的工作: 敲代码,按照教材进度,我已经"学完了",用引号引起来. 明天工作安排: 开始学习前台技术,边复习Java基础. 今日总结:Eclipse基本使用方法 Ctrl+A ...
- SSL证书,IIS7、IIS8,http自动跳转到HTTPS
安装"URL REWRITE2 " 伪静态模块,IIS7需要先确认是否安装 "URL REWRITE2 " 伪静态模块 , 如果您已经安装可以跳过 下载地址:h ...
- bom案例4-模拟滚动条
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 【linux命令】wget
感谢作者:八雲苗 链接:https://www.jianshu.com/p/1c3847fa7e45 wget官方文档:wget wget是一个使用HTTP,HTTPS,FTP和FTPS协议来下载文件 ...
- 前端常见原生方法的实现(bind,promise,new,extends,深拷贝,函数防抖,函数节流)
前端原生方法的实现,这里写一下常见的一些实现: 1.bind Function.prototype.bind2 = function (context) { var self = this; retu ...
- swift语言学习博文精选
初探swift语言的学习笔记九(OC与Swift混编) Objective-C 与 Swift 混编之路 Swift项目兼容Objective-c问题汇总
- python——rsa加签名以及分段加密
借鉴 https://www.cnblogs.com/sammy1989/p/9583965.html 最近请求一个系统,对方要求加密.折腾了一天,使用pycryptodome库,最终代码如下: #! ...
- 用Express 创建项目
1.Node.js Express 框架安装:npm install express --save在当前目录下创建一个node_modules 2.安装必要的中间件npm install body-p ...
- 《PHP程序员面试笔试宝典》——如何进行自我介绍?
本文摘自<PHP程序员面试笔试宝典> PHP面试技巧分享,PHP面试题,PHP宝典尽在"琉忆编程库". 自我介绍是面试中至关重要的一个步骤,很多面试官对求职者提出的第一 ...
- 深入MySQL(二):MySQL的数据类型
前言 对于MySQL中的数据类型的选择,不同的数据类型看起来可能是相同的效果,但是其实很多时候天差地别. 本章从MySQL中的常用类型出发,结合类型选择的常见错误,贯彻MySQL的常用类型选择. 常用 ...