2018.6.12 vue的组件化的两种简单使用方式

官方文档讲的很详细，不过太多了，找到了自己需要用的方式

两种使用方式：

    1.vue-cli  webpack下局部注册组件：

    先写一个组件放在components的文件夹里，

         比如 创建一个 ComponentA.vue 的文件在components里（内容自己写或者复制旁边的helloworld都行，按照template script style写）

   然后在根组件中应用：

< template >

< div id= "app" >

< img src= "./assets/logo.png" >

< router-view >

</ router-view >

< router-link to= "/ljj" >ljj页面 </ router-link >

< ComponentA ></ ComponentA >

</ div >

</ template >

< script >

import ComponentA from './components/ComponentA'

export default {

name: 'App',

components: {

ComponentA

},

}

</ script >

官方文档出处：https://cn.vuejs.org/v2/guide/components-registration.html

第二种点击跳转使用方式，1.创建组件 2创建路由 3使用组件

1.创建组件    创建ljj.vue two.vue

2.创建路由     router/index.js

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

import ljj from '@/components/ljj'

import two from '@/components/two'

Vue. use( Router)

export default new Router({

routes: [

{

path: '/', //直接渲染在页面

name: 'HelloWorld',

component: HelloWorld

},

{

path: '/ljj', //跳转标志

name: 'ljj',

component: ljj

},

{

path: '/two', //跳转标志

name: 'two',

component: two

}

]

})

3使用方式：根组件App.vue

< template >

< div id= "app" >

< img src= "./assets/logo.png" >

< router-view />

< router-link to= "/ljj" >ljj页面 </ router-link >

< router-link to= "/two" >two页面 </ router-link >

</ div >

</ template >