├── index.html 入口页面
├── build 构建脚本目录
│ ├── build-server.js 运行本地构建服务器,可以访问构建后的页面
│ ├── build.js 生产环境构建脚本
│ ├── dev-client.js 开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新
│ ├── dev-server.js 运行本地开发服务器
│ ├── utils.js 构建相关工具方法
│ ├── webpack.base.conf.js wabpack基础配置
│ ├── webpack.dev.conf.js wabpack开发环境配置
│ └── webpack.prod.conf.js wabpack生产环境配置
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ ├── prod.env.js 生产环境变量
│ └── test.env.js 测试环境变量
├── mock mock数据目录
│ └── hello.js
├── package.json npm包配置文件,里面定义了项目的npm脚本,依赖包等信息
├── src 项目源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ ├── components 公共组件目录
│ │ └── title.vue
│ ├── assets 资源目录,这里的资源会被wabpack构建
│ │ └── images
│ │ └── logo.png
│ ├── routes 前端路由
│ │ └── index.js
│ ├── store 应用级数据(state)
│ │ └── index.js
│ └── views 页面目录
│ ├── hello.vue
│ └── notfound.vue
├── static 纯静态资源,不会被wabpack构建。
└── test 测试文件目录(unit&e2e)
└── unit 单元测试
├── index.js 入口脚本
├── karma.conf.js karma配置文件
└── specs 单测case目录
└── Hello.spec.js
<template>
<!-- vue的模板里面所有的内容要被一个根节点包含起来 -->
<div id="app">
<h2>{{msg}}</h2>
<br>
这是一个根组件
<br>
<h3>{{obj.name}}</h3>
<br>
<ul>
<li v-for="item in list">
{{item}}
</li>
</ul>
<br>
<ul>
<li v-for="item in list1">
{{item.title}}
</li>
</ul>
<br>
<ul>
<li v-for="item in list2">
{{item.cate}}
<ol>
<li v-for="news in item.list">
{{news.title}}
</li>
</ol>
</li>
</ul>
</div>
</template>
<script>
//表示把组件暴露出来
export default {
//组件的名字
name: 'app',
//业务逻辑定义的数据
data () {
return {
//用两个{{}}绑定数据
msg: '你好vue',
//绑定对象
obj:{
name:'张三'
},
//定义数组,[]
list:['111','222','333'],
//数组里面取对象
list1:[
{'title':'aaa'},
{'title':'bbb'},
{'title':'ccc'}
],
//数组里面有对象,对象里面有数组,有序数组<ol></ol>
list2:[
{
"cate":"国内新闻",
"list":[
{'title':'国内新闻1'},
{'title':'国内新闻2'},
{'title':'国内新闻3'}
]
},
{
"cate":"国际新闻",
"list":[
{'title':'国际新闻1'},
{'title':'国际新闻2'},
{'title':'国际新闻3'}
]
},
]
}
}
}
</script>
运行截图: