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 报错及解决方案
在运行vue 报错误:
This dependency was not found
解决方案:
npm install stylus-loader css-loader style-loader --save-dev
7.2 报错及解决方案
在运行vue 报错误:
Cannot find module ‘stylus’
解决方案:
npm install stylus --save-dev