有关如何搭建 vue.js 框架我这看了一篇文章, 自己也根据它进行搭建环境.
文章地址: vue.js2.0 实战 (1): 搭建开发环境及构建项目 https://segmentfault.com/a/1190000008049815
接下来对初始的框架进行讲解, 只讲 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 稍微绕了个弯.
自己也是一边学一边写, 有错的地方或者有更好的解释也希望大家予以指点.
想的太多, 做的太少, 中间的落差就是烦恼, 要么去做, 要么别想 中尉 [8]
来源: https://www.cnblogs.com/qdhxhz/p/8835903.html