Vue项目中的一些问题

相关文件说明

package.json：记录项目中所需要的模块，在执行npm install时，node会先从package.json文件中读取所有dependencies信息，然后根据dependencies中的信息与node_modules中的模块进行对比，没有的直接下载，已有的检查更新。package.json文件只记录你通过npm install方式安装的模块信息，而这些模块所依赖的其他子模块的信息不会记录。

package-lock.json：锁定所有模块的版本号，包括主模块和所有依赖子模块。当你执行npm install的时候，node从package.json文件读取模块名称，从package-lock.json文件中获取版本号，然后进行下载或者更新。 因为有了package-lock.json文件锁定版本号，所以执行npm install的时候，node不会自动更新package.json文件中的模块，必须用npm install packagename（自动更新小版本号）或者npm install packagename@x.x.x（指定版本号）来进行安装才会更新，package-lock.json文件中的版本号也会随着更新。

.babelrc：低版本浏览器不支持ES6语法，babel将ES6代码转换成浏览器能识别的代码，可以理解为 babel是javascript语法的编译器。在Babel执行编译的过程中，会从项目的根目录下的 .babelrc文件中读取配置。.babelrc是一个json格式的文件，主要是对预设(presets) 和 插件(plugins) 进行配置。

.editorconfig：EditorConfig由用于定义编码样式的文件格式和一组文本编辑器插件组成，这些插件使编辑器能够读取文件格式并遵循定义的样式，协同团队开发人员之间的代码的风格及样式规范化，.editorconfig是它的默认配置文件。

.eslintignore：忽略哪些文件的语法检查，如build/*.js表示忽略build目录下类型为js的文件的语法检查。

.eslintrc.js：修改eslint检测的规则，使规则符合使用习惯。

.gitignore：该文件中定义了相应的忽略规则，在每一行指定一个忽略规则，忽略这些文件的提交。.gitignore 文件是可以提交到公有仓库中，这就为该项目下的所有开发者都共享一套定义好的忽略规则。

.postcssrc.js：PostCSS是一款通过JS插件来转换css的工具，通过一些规则把已有的css进行完善，比如添加浏览器前缀，.postcssrc.js是其配置文件。

注意

1.在使用element-ui过程中需要导入样式：import 'element-ui/lib/theme-chalk/index.css'，否则element-ui的标签可以使用，但没有样式。除此，还可以在.babelrc中加入插件component实现按需加载样式（该方式更好）。

2.要想 WebStrom 的代码提示和静态语法检测支持 ES6 和 JSX ，在 setting 里把 JavaScript language version 改成React JSX。

3.vue的slot相当于父组件在调用子组件的过程中给子组件传了一套模板，插在子组件的指定位置。

4.注意this指向会变化时，通过let _this=this;赋值来保存最初的this对象。

5.使用element-ui的el-input监听回车事件时需添加native，即@keyup.enter.native="keyEnter($event)"。

6.el-pagination在使用过程中，改变page-size容易引起两次请求，page-size（每页显示的条数）的改变常常会引起current-page（当前页码）的改变，而current-page的改变会自动触发current-change事件， 为避免发送两次请求，可以添加判断，若current-page未改变，则继续请求数据，若改变，则交给current-change事件来请求数据。

7.el-pagination的跳页元素jumper使用时，输入的页码不能超过pager显示的最大页码。

8.

var arr1=[1,2,3];
var arr2=[4,5,6];
console.log([...arr1,...arr2]);        //[1,2,3,4,5,6]

9.element-ui的table表格控件表头与内容列不对齐问题：将以下样式代码添加到index.html、或app.vue中（必须是入口文件，起全局作用！）
body .el-table th.gutter{
display: table-cell!important;
}

10.vue使用render函数的jsx 语法二次封装 element-ui的分页组件(el-pagination)：

绑定单击事件： @xxxx 用 on-xxx替代

绑定props: :xxxx 用 xxx={this.xxx} 替代

 

参考：

https://blog.csdn.net/u013992330/article/details/81110018