vue第一行代码

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

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

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

照着他模板写

然后index.html在任何地方肯定是起始页。里面就一个<div>，id=app。我替换了一下果然就失败了。仔细想想，他Vue都没看到使用呢。

真实的目录结构：

<script>export default { name: 'App'}</script> 

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

于是加上<script>

<script>export default { name: 'home', data () { return { tabname: '菜单', tablist: ['tab1', 'tab2', 'tab3'], show: true } }}</script>

然后点开main.js

main.js

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

模板已经替换完毕了

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

二、过程中遇到的坑。

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

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

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

2. v-for 升级了

<li v-for="item in tablist" :key="item">{{item}}</li> 后面要跟一个key，key的值没限制，一般放id

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