前言
vue脚手架(vue-cli) 是快速构建vue项目的系统框架
vue-cli安装
全局安装 npm install @vue/cli -g
检测是否安装成功 vue --version / vue -V 检测的是脚手架
目前vue-cli版本为 4.5.9
若想要使用脚手架2创建项目 需要全局安装一个桥接工具 @vue/cli-init
npm install @vue/cli-init -g
安装完成后就可以使用脚手架2创建项目了
创建项目的方式：
脚手架2 --> vue init webpack 项目名称
脚手架3以上 --> vue create 项目名称
webpack配置相关
extractTextPlugin 插件
webpack打包项目时，会将资源文件转换成javascript代码来与其他模块合并，
遇到css文件时候也会将css代码打包到js文件中，这样在访问时候会有一定的延迟。
如果需要将css文件单独打包出来，需要使用extract-text-webpack-plugin插件，
这样打包后css代码会在单独的css/xxx.css文件中
== vue-cli2中在webpack.prod.conf.js中是配置好的
chunkName
webpack会把所有资源打包成一个一个文件再引入，默认打包后的文件是以id + hash命名的，
如果需要更改名字，需要配置一个chunkFilename属性
vue-cli2：
1、在config/webpack.prod.conf.js中 output对象中更改chunkFileName属性
原来为： chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
改为： chunkFilename: utils.assetsPath('js/[name].[chunkhash].chunk.js')
2、引入组件的时候 使用一种特殊的注释法为文件命名
/* webpackChunkName: "" */ (魔术注释法)
同步加载：
const Home = import(/* webpackChunkName:'Home' */ 'views/home/Home.vue');
异步加载：
component:()=>import(/* webpackChunkName:'Home' */'views/home/Home.vue')
可以多个组件使用同一个名字 这样就会打包进同一个chunk文件中
此时打包后 会发现一个个js文件都有名字了
vendor文件过大问题
vendor.xx.js >= 700kb 过大
解决办法：
将不经常改变的文件分离出去不打包进vendor 等到项目运行时候再去外部获取这些依赖
|、 externals方式，不将三方包打包进去
1、直接配置externals
vue-cli2：
1、在html文件中引入不打包的库的cdn地址
<script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.0/lib/vant.min.js"></script>
2、在 config/webpack.conf.js中添加externals选项
// key 为项目中引入的名字 value为库导出的对象值
externals: {
'vue': 'Vue',
'ant':'vant'
}
3、在mian.js中引入需要的库 即是配置中的key的值
// vant
import Vant from 'ant';
import 'vant/lib/index.css'
Vue.use(Vant);
vue-cli3：
1、html文件中script标签引入需要分离出来的库的cdn地址
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
2、vue.config.js：
configureWebpack: {
externals: { //key：为项目中使用vue处用的名字
'vue': 'Vue' //value:库导出的对象
}
}
3、npm run build 发现vendor变小
2、使用 html-webpack-externals-plugin 插件
vue-cli2:
1、安装 npm install html-webpack-externals-plugin--save-dev
2、build/webpack.base.conf.js:
plugins: [
new HtmlWebpackExternalsPlugin({
externals: [
{
module: 'vv',
entry: 'https://cdn.jsdelivr.net/npm/vant@2.0/lib/vant.min.js',
global: 'vant'
}
]
})
]
3、打包后发现html中自动引入了当前库的cdn地址
<script type=text/javascript src=https://cdn.jsdelivr.net/npm/vant..></script>
||、使用路由懒加载
require方式：
import方式：
component:()=>import(/*webpackChunName:'Home'*/ 'src/views/....')
px2rem-loader + lib-flexible
vue脚手架中将px转rem 需要两个文件 lib/flexible、px2rem-loader
lib/flexible 作用是根据屏幕变化自动添加标签 改变html的字体大小
px2rem-loader 作用是将px转化为rem
下载 npm install lib/flexible px2rem-loader --save-dev
vue-cli2：
1、引入lib/flexible
main.js:
import 'lib/flexible';
lib/flexible 会自动在html文件中添加 viewport标签 所以不需要自己添加
2、配置px2rem-loader
build/util.js:
a、在cssLoaders中添加px2rem-loader对象：
exports.cssLoaders = function(options) {
options = options || {};
const px2remLoader = {
loader: "px2rem-loader",
options: {
remUnit: 120
}
};
const cssLoader = {
.....
b、在 generateLoaders 函数中 为 loaders 数组添加px2remLoader
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS
? [cssLoader, postcssLoader, px2remLoader]
: [cssLoader, px2remLoader];
if (loader) {
....
此时重新执行 npm run dev 即可看到改变
vue-cli3：
在项目根目录新建文件vue.config.js。。。。
目前建议使用postcss-px2rem
大于540px屏幕:
由于flexible主要用于手机自适应，所以屏幕宽度大于540px时，他就将font-size固定为54px
大于540px的屏幕就不会根据屏幕变化改变html的font-size了
适配大屏可以通过修改flexible源码解决：
在node_modules/lib-flexible中修改flexible.js
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width * dpr; // 屏幕大于540px时候 根据宽度改变font-size
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
不想px转rem的地方：
有的地方想保持原尺寸 不想px转为rem 比如1像素的边框等
可以为其添加 /* no */
.circle{
border:1px solid #ccc; /* no */
}
px2rem-loader + amfe-flexible
lib-flexible 不再更新了 改为amfe-flexible
使用方法大多同上面的lib-flexible
区别1:
html文件中不可删除 viewport标签 不会自动生成
postcss
是什么
postcss 是一个插件系统，也是一个平台，是一个使用插件去转换css的工具，
他有200多个插件 可以实现不同的css转换需求 比如 Autoprefixer，
autoprefixer是一个自动添加浏览器前缀的插件，根据can i use的数据 对不同浏览器添加不同的前缀。
postcss是一个平台、提供了一些api，通过调用这些api也可以自己开发插件
autoprefixer
vue-cli2 中autoprefixer的配置：
1、在 .postcssrc.js 文件中可以看到有autoprefixer
2、浏览器数据配置在package.json中最后有 browserslist
vue-cli3 中autoprefixer的配置：
vue-cli3中默认是开启autoprefixer的 。。
postcss-pxtorem
安装 npm install postcss-pxtorem
配置：
vue-cli2：
.postcss.js:
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"autoprefixer": {},
"postcss-pxtorem": { // 在此处配置postcss-pxtorem
rootValue: 32, // 对应16px 适配移动端750px宽度
unitPrecision: 5,
propList: ['*'],
selectorBlackList: [],
replace: true,
mediaQuery: false,
minPixelValue: 0
}
}
}
vue-cli3:
vue.config.js:
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({ // 此处配置 postcss-pxtorem
rootValue: 32, // 换算的基数(设计图750的根字体为32)
selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
propList: ['*']
})
]
}
}
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
}
}
}
注:
1、不想px转rem的地方 使用Px 或 PX
（vscode格式化自动转为小写px 还未研究）
2、不想转化第三方ui库 在selectorBlackList中添加类名
如此项目使用vant-ui 只需将van忽略：
propList: ['*'],//不匹配的css属性
selectorBlackList: ['.van'],
postcss-pxtorem + js动态设置根元素字体大小
一般postcss-pxtorem 与 lib-flxible配合使用 也可以通过js控制根元素字体的方式
以下为使用js动态改变根字体 + postcss-pxtorem 使用
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
//设定根以屏幕宽375做标准来制定
docEl.style.fontSize = 10 * (clientWidth / 37.5) + 'px';
};
if (!doc.addEventListener) return;
//适配手机翻转
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
CommonsChunkPlugin
https://segmentfault.com/a/1190000012828879
ProvidePlugin
vue开发时，我们可以将一个库通过vue的原型对象绑定在vue上
Vue.prototype._=lodash；
这样使用的时候可以直接 this.$_.xxx
如果绑定的库较多，会导致根组件过大，
而如果不通过Vue.prototype.xxx方式引入，就需要在每个需要当前库的文件中引入，工作量太大，
可以使用ProvidePlugin解决：
new webpack.ProvidePlugin({
$_: 'lodash',
});
使用：
$_.xxx 即可
providePlugin其实是创建一个全局对象，但是这个全局对象在template直接使用会有问题
因为vue的模板语法中不支持直接以$、_开头的自定义属性，避免与vue内部冲突
解决办法：
1、使用$data.$_
2、data中重命名后绑定
3、在methods中绑定
使用provideplugin并不会减少打包体积，只是为了增强代码可读性和可维护性
相关问题
vue-cli项目在ie浏览器空白
是因为promise在ie浏览器中不支持导致的
1、使用 babel-polyfill
安装： npm install babel-polyfill
使用： webpack.base.config中入口处添加babel-polyfill
app: ["babel-polyfill", "./src/main.js"]
webp格式的图片打包处理
某次打包项目发现有一个图片孤零零的在dist根目录下，
查找原因后得知，项目中没有针对webp格式的图片打包后所放路径做配置
就是说没有告诉webpack 这个图片打包后放在哪 改配置即可
当前项目环境 vue-cli2
打开项目build/webpack.base.conf.js
找到 module/rules添加webp格式的配置以及打包后存放的路径
{
test: /\.webp$/i,
loader: "file-loader",
options: {
//此处为了测试随意起了一个 webpImg 文件夹 根据项目配置
name: utils.assetsPath('webpImg/[name].[hash:10].[ext]')
}
}
