VueJs(2)---VueJs开发环境的搭建和讲解index.html如何被渲染
2018-04-15 09:46
357 查看
VueJs开发环境的搭建和讲解初始框架
有关如何搭建vue.js框架我这看了一篇文章,自己也根据它进行搭建环境。文章地址:vue.js2.0实战(1):搭建开发环境及构建项目
接下来对初始的框架进行讲解,只讲index.html是如何被渲染出来的。
一、启动项目
第一步:cmd进入项目文件里,运行npm run dev 启动项目 这里说明启动端口号是8080第二步:往页面输入:localhost:8080
二、解析渲染步骤
先看整体框架样式和index.html:从上面我们可以看出,index的body中只有一个id为app的div,那是如何被渲染的呢。一步一步寻找
第一步:main.js
main.js是我们的入口文件,主要作用是初始化vue实例并使用需要的插件。
这里new Vue代表新建vue对象
el官方解释:为实例提供挂载元素。值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数。
这里就通过index.html中的<div id="app"><div>中的id=“app”和这里的“#app”进行挂载。
components:代表组件。这里是'App',这说明。首先页面肯定有<app></app>这样的标签,同时有个组建为‘App.Vue‘文件
这个地方我思考好久,才明白,首先App.vue是有的,因为上面已经import导入了,但index.html中并没有<app></App>标签
template:代表模板。官方解释:模板将会替换挂载的元素。挂载元素的内容都将被忽略。
也就是说:
template: '<App/>'表示用
<app></app>替换
index.html里面的
<div id="app"></div>
那到底是不是这样,我们先把main中components这行注释掉:
再看页面:发现里面就有一个<app></app>标签。这样那么逻辑就通了。
这样mian.js就通了,那通过components: { App },我们来看App.vue
第二步:App.vue
首先一个正常的vue结尾的文件里,一般包含三部分:<template>,<script>,<style>
这里面的<img>标签,就代表页面的vue的logo,它下面又有一个组件<HellWord>
我们只要在进入到HellWord.vue中明白了。
第三步:HellWord.vue
这样一来,页面所渲染的东西都找到了,其实并不复杂,只是在main.js稍微绕了个弯。
自己也是一边学一边写,有错的地方或者有更好的解释也希望大家予以指点。
源码
GitHub源码:源码想的太多,做的太少,中间的落差就是烦恼,要么去做,要么别想 [b]中尉【8】[/b]
相关文章推荐
- 搭建Eclipse+MyEclipse开发环境 摘自(soft.bokee.com/index.html)
- 教你如何搭建一个超完美的服务端渲染开发环境
- 如何在Windows下搭建Android开发环境(转)
- 如何搭建乐Phone开发环境(3GC101)
- 如何在64位的windows下搭建汇编开发环境?
- 【转】android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创)
- 如何在Windows下搭建Android开发环境
- android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解
- HTML5+开发移动app教程1-环境搭建
- 如何搭建Chef 本地开发环境
- 如何用iPhoneToolChain搭建iPhone程序开发环境
- 搭建target开发环境时,如何配置TFTP Server。
- 如何在Windows下搭建Android开发环境
- 如何搭建Android的开发环境->在虚拟机上安装unbuntu 10.04 (三)
- react-native如何搭建开发环境搭建上手教程(转)
- 如何用eclipse搭建Android的开发环境
- 如何使用 IntelliJ IDEA 2017 配置PHP开发环境 及项目搭建
- 如何搭建Dcm4chee的开发环境
- 如何成为一个游戏制作人——第二章:如何开始你的编程(开发环境搭建、C++语言适应)