【vue笔记】调试日志

最新推荐文章于 2024-08-20 09:41:26 发布

AXIMI

最新推荐文章于 2024-08-20 09:41:26 发布

阅读量2.5k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/AXIMI/article/details/88338859

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

1.main.js中的挂载不对：

报错内容： cannot find element: #App
在这里插入图片描述
报错原因： el: ‘#app’，id为app的元素，这个a字母是小写的
解决方式： 在main.js文件中将el:’#App’改为el: ‘#app’

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueRouter from 'vue-router'
Vue.use(ElementUI)
Vue.use(VueRouter)

import Login from './components/Login'
const routes=[
  {path:'/',component:Login}
]

const router=new VueRouter({
  routes
})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render:h=>h(App),
  components: { App },
  template: '<App/>'
})

2.chrome跨文件访问失败：

原代码是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        window.onload=function () {
            new Vue({
                el:'#itany',
                methods:{
                    send(){
                        axios({
                            method:'get',
                            url:'user.json'
                        }).then(function (resp) {
                            console.log(resp.data);
                        }).catch(resp=>{
                            console.log('failed to request'+resp.status);
                        })
                    }
                    }
            });
        }
    </script>
</head>
<body>
<div id="itany">
    <button @click="send">send the AJAX request</button>
</div>
</body>
</html>

这段代码的功能是使用axios访问一下同层目录中的"user.json"文件。显示的界面如下：
在这里插入图片描述
如果是直接在浏览器中输入这个文件的绝对路径然后再单击按钮的话会显示报错：
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension

意思是不能跨文件访问。解决的方法是在webstorm中直接运行这个html文件，在webstorm打开的页面中点击“send the AJAX request”按钮就可以正确访问到"user.json"文件了。