最近在看vue,以前有看过一段时间vue,那时候直接用<script>标签引入vue,对vue的基本概念有了一些了解,现在尝试一下用vue-cli的工具构建一下,话又说回来了,现代(emmm)js需要用很多的工具去构建,如果想了解的话就必须试着去使用这些工具.
工具构建好以后文件目录应该是这样子的,首先入口index.html 没啥异议(由于nodejs还不是很熟,所有这里我就不知道为啥是index.html了...)
然后没有发现index.js 也没有在文件里面引入不过根据观察main.js很可能是他的js文件,然后搜索main.js发现webpack.base.conf.js 中有一段 emmmm不过原理仍然不知道,以后想深入的话再去研究吧
mian.js的内容如下
import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
第一句应该是引入vue 的意思,我看到webpack.base.conf.js有一段
这里$应该是正则里面的意思,我们去掉
import Vue from 'vue'
这一行 发现页面为空
这里我们需要了解一下 es6 import 和export 的含义
然后我们去掉router这一段 .. 这个部分等下在解析
这里
components: { App },
是es6的的写法等同于components: { App:App },
吧App.vue里面的代码删减
<template> <img src="./assets/logo.png"> </template>
我们改变
import App2 from './App'
发现页面变空白 把components参数变成
components: { App:App2 },
发现页面又正常了 由此推断组件里面的 App2 就是import后的名称
关于最后
template: '<App/>'
我发现必须和{ App:App2 } 第一个相同才行 且 格式必须是 <***/> 才会去寻找模板文件 如果是其它的就会直接输出模板
以上就是关于vue的低级解析 ,我发现,很多文件都是自动载入的,其中的规则我并不是很清楚,以后再研究吧
emmmm 现在再研究一下router