vue之项目实战elementUI经验之谈

vue项目编译搭建

一、babel预编译

1.导出模块报错

编译module.exports.default = *** 报错

方案解决：

二、cli脚手架

（一）、cypress端到端测试

1.依赖包安装

方法一、离线安装：
下载cypress.zip包
配置系统环境变量
CYPRESS_INSTALL_BINARY
文件路径:./cypress.zip
重启电脑
运行npm i
方法二、在线安装：
@cypress/code-coverage
@vue/cli-plugin-e2e-cypress

在线安装速度慢时建议采用离线安装

2.测试案例书写

3.测试命令执行

package.json配置

"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e -- mode development --headless",
"test:e2e-gui": "vue-cli-service test:e2e --mode development"

在现有项目中搭建测试
安装cli：npm install -g @vue/cli
运行：vue add e2e-cypress

4.参考API

cypress官网地址
e2e-cypress用法网址

三、npm安装错误

1.chromedriver@2.46.0 install: node install.js

解决方案：npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

2.‘cross-env’ 不是内部或外部命令，也不是可运行的程序

解决方案：

npm install --save-dev cross-env

类似报错
’webpack’ 不是内部或外部命令，也不是可运行的程序
或批处理文件。

四、vue参考文档部署

1.从git上clone代码
2.依赖安装

npm i

3.运行指令

npm run start

4.访问网站 http://localhost:4000

项目js常用误区

项目vue用法采坑

项目兼容性问题

一、ie的兼容性问题

（一）、placeholder在ie上的兼容性问题

placeholder在不同浏览器上表象不同，下文暗纹指示placeholder，文字提到的标签都是指elementUI组件库中的组件，在实际开发中遇到的问题

1.input输入框有placeholder时

在ie上，对input标签监听change事件，当有暗纹时组件初始化加载时会调一次change事件，而chrome不会

2.autoComplete组件

对组件绑定select/change事件，当有暗纹时，ie上的表象如是：选择下来列表出发select事件，会触发blur事件，在实际中，若blur加了一些业务逻辑比如校验等，选中会走这里的逻辑

3.placeholder样式问题

placeholder样式问题可更改但ie不兼容，暗纹超出输入框时不会出现折贴多行效果

（二）、ie9打包后，切换tab,table组件数据不显示（组件elementUI 2.2.0版本）

tab切换加载数据，渲染后，需要在调表格doLayout方法，重新布局表格

elementUI用法注意事项

一、服务器搭建elementUI文档官网步骤

1.从git上clone代码
2.全局安装yarn（不用yarn可能会导致有些包安装失败）

npm i -g yarn

3.运行指令

npm run dev

4.访问网站 http://localhost:8085

二、基于elemenUI设定项目框架

将elementUI如何改造成适合公司现有项目框架，有或者如何在elementUI上添加符合业务需求的项目级组件，亦或如何更新维护项目级别的UI框架等等，属于后续研究课题

后续更新。。。