首页手记 vue-cli笔记

vue-cli笔记

标签：

AngularJS

vue-cli笔记

1、main.js 程序入口文件，是初始化vue实例并使用需要的插件,加载各种公共组件.

import Vue from 'vue'

import App from './App'

import router from './router'

其实最完整的写法分别是：

import Vue from "../node_modules/vue/dist/vue.js";

import App from './App.vue';

简写说明：

a.import...from...的from命令后面可以跟很多路径格式，若只给出vue，axios这样的包名，则会自动到 node_modules中加载；若给出相对路径及文件前缀，则到指定位置寻找。

　　　　b.可以加载各种各样的文件：.js、.vue、.less等等。

　　　　c.可以省略掉from直接引入。

vue-cli笔记

这里new Vue代表新建vue对象

el官方解释：为实例提供挂载元素。值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML 元素的函数。

这里就通过index.html中的<div id="app"><div>中的id=“app”和这里的“#app”进行挂载。

components:代表组件。这里的App，实际是App:App的省略写法，template里使用的 <App/>标签来自组件App.vue。

template：代表模板。官方解释：模板将会替换挂载的元素。挂载元素的内容都将被忽略。

也就是说:template: '<App/>' 表示用<app></app>替换index.html里面的<div id="app"></div>

总结：main.js中的根实例会挂载到index.html中的<div id="app">，且用template替换，即替换为<App></App>. 由于根实例注册了App组件，所以这标签就是App.vue组件。由于App.vue中含有<router-view/>，所以路由匹配成功的页面都在这里进行渲染和切换。

2、App.vue

App.vue是我们的主组件，页面入口文件，所有页面都是在App.vue下进行切换的。也是整个项目的关键，app.vue负责构建定义及页面组件归集。

可以理解所有的路由也是App.vue的子组件，所以我将router标示为App.vue的子组件。

vue-cli笔记

router-view：用来渲染匹配到的路由的

这里，App.vue里面有<router-view/>

在main.js里面，定义了路由path:'/'，匹配了HelloWorld组件，所以在默认首页，<router-view/>就渲染了HelloWorld组件里面的内容

©著作权归作者所有：来自51CTO博客作者xxxpjgl的原创作品，如需转载，请注明出处，否则将追究法律责任

相关阅读

html转vue页面

html页面转化为vue

html页面迁移到vue