1 VueCLI手动创建vue项目
2 npm install [xx] 使用淘宝镜像下载超时
①报错：ERROR Failed to get response from http://registry.cnpmjs.org/vue-cli-version
②解决方法1：在我的电脑中，找到.vuerc 文件，一般是C:UsersUser.vuerc 文件打开.vuerc 文件，将"useTaobaoRegistry": 改为true后重启计算机，再重新运行npm install [xx]
③解决方法2：方法1不生效再尝试方法2，在我的电脑中，找到.npmrc文件，将里面的内容全部清空。只留1行代码：registry=https://registry.npm.taobao.org/，保存后在尝试重新下载
3 npm run serve 和 npm run dev 的区别
①打开package.json 文件，可以看到key-“dev”对应的value-"vue-cli-service serve"。npm run dev实际上就是跑的"vue-cli-service serve"这个命令。如果在文件中将把dev改成serve，对应的就需要执行npm run serve，才能执行"vue-cli-service serve"这个命令
4 elementui-form有值却仍然显示不通过
①仔细检查表单的model和prop属性是否绑定正确。新手经常会把form写成from。
②仔细检查表单的rules属性是否绑定正确，确定验证规则符合预期
5 在methods怎么跳转地址
①利用this.$router。参考文档地址
6 vue中的.then()方法
①.then()是Promise对象的方法，对应还有.catch()。想了解.then()建议先了解Promise对象。参考文档地址
②.then((data)=>{console.log(data)})里的data是指接口成功返回的数据。可以通过consou打印出来看下是什么内容。
7 ref（$refs）的用法
①ref 加在普通的元素上，用this.ref.name 获取到的是dom元素。
②ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
③如何利用 v-for 和 ref 获取一组数组或者dom 节点，参考文档地址。
注意：
-
ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。
-
如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。
8 给对象新增属性不生效
①例如想给obj添加新的属性test，采用this.obj.test = "test"则不生效。因为实例obj已经创建了，创建之后添加新的属性到实例上，它不会触发视图更新。需要使用this.$set(要修改的对象，要新增的key，对应的value)，例如this.$set(this.obj,"test","test")才可以触发视图更新。相当于this.obj.test = "test"
export default {
data(){
return {
obj:{}
}
},
}
9 js对象与字符串相互转换
①对象转成字符串（stringify）
const obj = {id: 0}
const objToStr = JSON.stringify(obj)
②字符串转成对象（parse）
const str = '{"id":0}'
const strToObj = JSON.parse(str)
10 ElementUI-form表格中使用switch开关
<el-table-column label="状态" min-width="70" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status" //绑定了每一行数据的status。当status为"0"的时候开关打开，反之关闭
active-value="0"
inactive-value="1"
@change="handleChangeProductLineStatus(scope.row.status, scope.row.id)">
</el-switch>
</template>
</el-table-column>
11 ElementUI-form表格使用current-change这个方法报错
①报错：Error in v-on handler:"TypeError: Cannot read property 'name' of null"
②解决方法:去要加上row-key属性
12 子组件调用父组件的值、方法
①子组件调用父组件的值。
父组件html代码：
<Form //Form是子组件,在父组件中以标签的形状加载
ref="Form"
:flag="flagTest" //将在子组件定义的flag绑定在父组件定义的flagTest
></Form>
父组件js代码：
export default {
data() {
return {
flagTest: true, //弹窗标志
}
}
...
}
子组件props声明代码：
export default {
props: {
flag: { //声明flag属性,子组件中的所有props中的数据，都是通过父组件传递给子组件的，是只读的。
type: Boolean,
default: false
}
...
created(){
console.log(this.flag)
}
}
②子组件调用父组件的方法。
父组件html代码：
<Form //Form是子组件,在父组件中以标签的形状加载
ref="Form"
@close-dialog="closeDialog" //closeDialog()函数在父组件中定义，使用v-on的方式传递给子组件。
@get-list="getList"
></Form>
父组件js代码：
closeDialog() {
console.log("我是父组件中的方法")
},
子组件中调用父组件方法代码：
this.$emit("close-dialog"); //触发父组件函数closeDialog
13 父组件调用子组件的值、方法
①父组件调用子组件的值、方法
父组件html代码：
<Form //Form是子组件,ref绑定值后，可通过refs获取子组件数据
ref="Form"
></Form>
父组件js代码：
this.$nextTick(() => { //获取子组件数据和函数需要等子组件渲染完才能获取到，所以使用this.$nextTick()方法，不然会报错。
this.$refs.Form.name = data.name; //给子组件name变量赋值
console.log(this.$refs.Form.name) //打印子组件name变量
this.$refs.Form.getHello() //触发子组件的函数
}
子组件js代码：
export default {
data() {
return {
name: "我是子组件的name变量"
};
},
methods: {
getHello(){
console.log("我是子组件的方法")
}
}
};
14 ElementUI-form重置表单的值
①使用elementui-form的resetField()方法，在表单绑定ref
html部分：
<el-form ref="form"> //ref绑定form，通过this.$refs["form"]可以找到这个表单，从而使用表单的resetField()方法
<el-form-item label="名字" prop="name">
<el-input v-model="form.name" ></el-input> //输入框绑定this.form.name，重置表单后，会重置到最初定义的值null
</el-form-item>
</el-form>
js部分:
export default {
data() {
return {
form: {name: null} //需要定义name，不定义的话，重置表单时因为找不到name，则不重置
}
},
methods:{
resetForm(){
this.$refs["form"].resetField() //调用表单重置方法
}
}
}
15 ElementUI-form表格怎么判断当前行的勾选状态
①可通过select属性判断
16 ElementUI-tree 组件 选中节点高亮的问题处理
①修改高亮时的背景颜色，只需要调整CSS就好了
style代码
.el-tree-node:focus > .el-tree-node__content {
background-color: rgb(158, 213, 250) !important;
}
②点击后显示高亮的效果，并且不切换的情况下高亮一直保持
style代码
css:
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
background-color: rgb(158, 213, 250) !important;
}
html代码
<el-tree
...
ref="tree" //ref绑定“tree”，后续通过this.$refs.tree获取到tree的setCurrentKey()方法
:highlight-current="true"
node-key="id"
@node-click="handleNodeClick" //点击节点时触发handleNodeClick()函数
>
js代码
handleNodeClick(data) {
this.$refs.tree.setCurrentKey(data.id); //通过id设置某个节点的当前选中状态,搭配CSS保持节点常亮
}
17 js赋值改变后，原数据也发生改变
① 对象A=对象B，对象A实际上是等于对象B的指针地址，所以改变对象A相当于改变对象B。数组也同理，代码如下
var obj1 = {name:"111"}
var obj2 = obj1
console.log(obj2) //111
obj2 = 222
consol.log(obj1) //222
②不想改动到原对象的值，应该采用浅拷贝或者深拷贝的方式
var obj2 = JSON.parse(JSON.stringfy(obj1));
18 ElementUI-select组件获取label
①给组件添加'change'方法
@change=changeValue
②根据Array 的 find方法找出对应的值即可。
changeValue(value) {
console.log(value);
let obj = {};
obj = this.options.find((item)=>{
return item.value === value;
});
console.log(obj.label);
}
19 vue计算属性computed简单用法
①js代码
export default {
data() {
return {a = 0,b = 0}
},
computed: {
a: function() {
return (a = b*2); //当b的值发生改变时，a也会对应改变
}
}
}
20 npm安装指定版本的包
npm install package_name //安装最新版本
npm install package_name@[指定版本号] //安装指定版本
npm install package_name@next //安装未来版本
21 Windows下Nginx的启动、停止、重启等命令
>start nginx //启动ngnix
>nginx.exe -s quit //停止ngnix
>nginx.exe -s reload //重新载入Nginx,当配置信息修改，需要重新载入这些配置时使用此命令。
22 nginx下部署vue项目概览
23 vue获取当前页面的url
window.location.href //完整url
this.$route.path //路由路径
24 vuex储存数据
①vuex实际上就是store文件夹下的配置。每个项目不一样。例如我这个项目在modules下又按模块储存数据。其中user.js是我要存放数据的地方。所以现在index.js配置引入user.js。
②接着在uesr.js里配置我想储存的数据wxFlag。这里的state就相当于我们vue里的data，用于定义变量。这里的mutations就相当于我们vue里的方法。setWxFlag(state, wxFlag)，setWxFlag是函数名，state指的就是在user中定义的state，wxFlag是我们传入的值
③使用commit去触发setWxFlag函数，并改变wxFlag的值。
④获取wxFlag的值
