vue第一行代码

项目创建好了首先写第一行代码就随便写个菜单

一、首先要替换掉初始化的这个页面

先不管三七二十一,我在components里面写了一个组件

vue第一行代码_第1张图片

照着他模板写

vue第一行代码_第2张图片

然后index.html在任何地方肯定是起始页。里面就一个

,id=app。我替换了一下果然就失败了。仔细想想,他Vue都没看到使用呢。

真实的目录结构:


vue第一行代码_第3张图片

 

上面的是App.vue里面的一块代码,还没有使用。script是导包js的,肯定是从这里使用vue的,果然这个是将本页的模板暴露出去的地方。

于是加上

然后点开main.js


vue第一行代码_第4张图片
main.js

走到现在运行一下会发现屏幕是白的,为什么呢,上图main.js里面没加Vue.component(),官方文档有说,但我没去看,百度告诉我的。上面是已经加好了的。

模板已经替换完毕了

现在可以按照文档,做功能搞嵌套了,我也要去研究网络请求和跨域了。

二、过程中遇到的坑。

1.Expected indentation of 4 spaces but found 6 第一个异常

意思是这个地方写的不规范,我们都是这个里写4个空格的,你写了6个。

上面的异常很恶心,包括单引号,双引号使用,逗号分号换行。只要编译一报错,我就会去看是不是这类问题。懒得看英文的此类问题复制后百度,秒解决

2. v-for 升级了

  • {{item}}
  • 后面要跟一个key,key的值没限制,一般放id

    网上有改第二种解决方案的,让软件不检查这个地方:“code/菜单”->"首选项"-搜索vetur.validation.template->关掉

    你可能感兴趣的:(vue第一行代码)