前端vue框架项目实战经验

项目实战经验（基于vue框架）

之所以写这篇文章主要是因为网上很多关于前端知识的基础归类文章，但是实际在项目开发中使用的时候还是不可避免地会踩到一些坑，我只是想把自己踩到过的一些坑分享出来，避免重复掉坑里- -

APP部分

坑点

• div 背景图片属性引本地文件路径时，路径被替换到static目录下

解决办法
使用require（‘’）相对路径引文件

<li  :style="'background-image:url(require('./../assets/banner_top2.png'))'"></li>

• vux框架 的range组件v-model绑定赋值的时候，会初始化赋值NaN。

ngnix踩坑记

• 服务闪退启动不了

建议去log日志文件下err文件查看报错原因
conf文件被记事本编辑过，保存成了含BOM头的文件
使用其他编辑器将文件另存为UTF-8不含Bom头的格式
注：记事本编辑UTF-8都会加BOM头

下载一个Nodepad++ 编辑器，将文件格式转换为UTF-8格式，去除BOM头

小技巧

• 过滤文件后缀名，将.xxxxx一连串后缀名一起替换为空字符串

filename.replace(/ \. [^\.]+ /g,  '');

• css中flex布局时，实现水平方向最后一个元素贴近底部，类似垂直方向的align-slef:flex-end效果

.g-flex-right{
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
}

• scope模式下修改UI框架子组件css样式解决方法

深度作用选择器/deep/

/deep/.child-component-class{
	width:100vw;
	...
}

• delete删除指定对象键值对

深度作用选择器/deep/

person = {age： 20，name： wilson}
delete person.age // person = {name： wilson}

• webpack编译的时候，通过dll来加快构建速度。

原理是通过dll先提取公共依赖包下载，避免公共依赖包重复下载。（个人理解）

• npm run dev 动态构建时内存溢出解决方案：打开node_modules > .bin > webpack-dev-service.cmd文件，添加–max_old_space_size=4096 代码扩展最大内存占据空间。
  文件原代码

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\_webpack-dev-server@2.11.3@webpack-dev-server\bin\webpack-dev-server.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node "%~dp0\..\_webpack-dev-server@2.11.3@webpack-dev-server\bin\webpack-dev-server.js" %*
)

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe --max_old_space_size=4096"  "%~dp0\..\_webpack-dev-server@2.11.3@webpack-dev-server\bin\webpack-dev-server.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node --max_old_space_size=4096 "%~dp0\..\_webpack-dev-server@2.11.3@webpack-dev-server\bin\webpack-dev-server.js" %*
)

未完待续…