Vue简单起步及解决方案

运行后两个提示

第一提示：你得下载他的开发者工具
第二提示：你得太大了，警告太多。你发布最好别用

解决：
（1）下载谷歌的拓展，你肯定进不去！我下载了， 获取：2tdh

（2）Vue的API中有说明：console.log( Vue.config ) 你会看到 productionTip
此时我们只需要启动时把嘴闭上 Vue.config.productionTip = false就行了

这里是所有的Vue2的API链接

---

vue inspect > output.js

他是把所有webpack相关的配置做了一个文件，然后起一个文件名
做出来一个output.js,切记！一定要写.js不然会报错

---

vue.config.js可选的配置文件

• 可设置路径
• 关闭警告

module.exports = {
    publicPath: "./",
    lintOnSave:false  //关闭语法警告
};

---

解决安装报错问题

Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree
提示我这个全新的vue当中没有这个，安装就好了

npm i @vue/compiler-sfc -S

---

---

less的版本问题

当前使用的是2.6x的Vue版本，less最新版本和当前冲突
解决方法如下

"@vue/compiler-sfc": "^3.2.20",
"less": "^3.12.2",
"less-loader": "^7.1.0",

---

添加数据问题

问题是添加成功， 但是不显示

<p>{{person.name}}</p>
<p>{{person.age}}</p>
<button type="button" @click="ck">添加一个</button>

<script>
    export default{
        data(){
            return{
               person:{
                   name:"常吉孔",
                   age:18
               } 
            }
        },
        methods:{
            ck()
            { this.person.sex = "男"  }
        }
    }
</script>

解决办法

methods:{
    ck(){ 
        //这里使用$set， 用当前的person添加sex，添的是女
        this.$set(this.person, 'sex', '女')
        this.$set(this.person.hobby, 0, '逛街')
        this.$delete(this.person, 'name')
    }
}

//麻烦点
import Vue from "vue"
ck(){ 
    //这里使用$set， 用当前的person添加sex，添的是女
    Vue.set(this.person, 'sex', '女')
    Vue.delete(this.person, 'name')
}