vue 项目的目录结构

在编辑器中安装vue.js和vue插件vue-component-creator。

 项目目录：

 

 

 

vue项目的目录结构：

1. package.json 主要是说明项目的一些信息，依赖文件，命令定义等
2. node_modules 依赖文件
3. public 主要是放一些外部的静态文件
4. src    主要的代码文件

 

下面主要介绍src文件：

assets------------>资源文件

components -->公共组件目录
router-----------> 路由定义
views------------>页面文件
App.vue---------->根组件，入口vue文件，后面所有的页面都是从这个页面延伸出来。一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)。
main.js------------>  项目的主文件，入口文件，可以理解为 c语言的main()。可以引入vue框架，根组件及路由设置，并且定义vue实例。主要作用是初始化vue实例并使用需要的插件。

 

 

 

vue项目的执行逻辑：
1. main.js 这个主文件
2. 加载路由，也就是router/index.js
3. 进入App.vue 这个主页面文件

vue文件最常见的结构：
1. 三层结构：html + js + css

html: 固定格式

<template>
<div>
xxxxx 这里就随便怎么写都行
</div>
</template>

 

2. js部分：

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
name: 'home',         // 类的名称
components: {        // 类的依赖
       HelloWorld
},
props:{                   // 类初始化接受的参数
          arg: String,
},
date(){                   // 类的成员变量
return {
       message: 'message',
       a: "xxxx",
}
},
methods: {          //类的成员变量
         getData(){
},
},
created(){          //类的初始化函数

},
}
</script>

 

把它当成一个类。

class home:
    message = "my message"   #类比 data

    def __init__(arg)： #类比 props
        arg = 'hello'

    def getData(self):  #类比methods
        return ""    

　　

3. css: scoped代表是这个css只作用于当前文件

<style scoped>
.mycss {

}
</style>

如何使用组件：
1. 创建组件
2. 在父组件里面导入子组件
3. 在父组件里面的components进行注册
4. 把子组件的名称当做是标签来使用