vue.js 2.0 版本—组件化demo

1.拆分组件

将页面拆分成：头部区域，导航区域，内容区域

2.创建目录

vue项目src/component目录下创建：
├── header                         //头部区域文件夹
│    ├──header.vue               
├── content                         //内容区域文件夹
│    ├──content.vue               
├── tab                         //导航区域文件夹
│    ├──tab.vue

3.头部区域，导航区域，内容区域的代码编写

• 编写header.vue文件内容如下

<template>
  <div class="header">
    this is header
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'header',
  data () {
    return {
      msg: 'Welcome to this is header'
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">

</style>

• 编写cotent.vue文件内容如下

<template>
  <div class="content">
    this is content
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'content',
  data () {
    return {
      msg: 'Welcome to this is content'
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>

• 编写cotent.vue文件内容如下

<template>
  <div class="tab">
    this is tab
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'tab',
  data () {
    return {
      msg: 'Welcome to this is tab'
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>

4.app.vue代码的编写

<template>
  <div id="app">
    <app-header></app-header>
    <app-content></app-content>
    <app-tab></app-tab>
  </div>
</template>

<script>
import AppHeader from '@/components/header/header'
import AppContent from '@/components/content/content'
import AppTab from '@/components/tab/tab'

export default {
  name: 'App',
  components: {
    AppHeader,
    AppContent,
    AppTab
  }

}
</script>

<style>
</style>

5.运行结果

this is header
this is content
this is tab

6.创建vue模板

File - Settings - File and Code Templates 右侧的+添加vue file文件，在内容里面添加

<template>
</template>
<script type="text/ecmascript-6">
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>

7.vue报错处理

7.1 报错及解决方案

1. 在运行vue 报错误：

   This dependency was not found

2. 解决方案：

   npm install stylus-loader css-loader style-loader --save-dev

7.1参考地址

7.2 报错及解决方案

1. 在运行vue 报错误：

   Cannot find module ‘stylus’

2. 解决方案：

   npm install stylus  --save-dev

7.2参考地址