关于用vue-cli构建的项目的初等解析

最近在看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这一段 .. 这个部分等下在解析

扫描二维码关注公众号，回复： 34502 查看本文章

这里

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

关于用vue-cli构建的项目的初等解析

猜你喜欢