vue 接口 header_前端Vue项目架构总结

工欲善其事必先利其器，对前端框架Vue有了一定的了解和熟悉，总结如下：

---

Vue有著名的全家桶系列，包含了：

1.   vue-router，

2.   vuex， 

3.   axios，

4.   vue-router，

5.    webpack，

6.    es6 + (less)

再加上构建工具vue-cli(Vue脚手架)，就是一个完整的vue项目的核心构成。

---

一、Vue声明模块：

new Vue({    el,   //要绑定的DOM element    data,  //要绑定的资料    props,  //可用来接收父原件资料的属性    template,  //要解析的模板，可以是#id , HTML 或某个DOM element 实体    computed,  //定义资料的getter 与 setter,即需要计算后才能使用的属性    components, //定义子元件，可用ES6简写法 例如(MyHeader)    methods,  //定义可以在元件或样版内使用的方法    propsData, //存放预设的props 内容，方便测试用    relplace, //要不要用template取代el指向的DOM Element预设为ture})

---

二、router路由：

【例子】

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router); // 需要import Vue和Router，不然会报错undefinedconst router= new VueRouter({  //通过这里配置自己的路由  {    path:'/communication/package',     name:'Package',     component: resolve => require(['@/page/communication/package/Main'], resolve),     meta: { title: '主套餐'}  }})        //来定义一个路由，并传入对应的配置，包括路径path和组件components。export default router

---

三、Vue工程目录结构：

1、build：是webpack的打包编译配置文件。

2、config：该文件存放了一些配置项，主要是服务器访问时候的端口配置等。

• index.js：服务器IP配置以及本地测试‘trest’以及服务器测试‘rest’

3、mocker：存放本地测试时的出参(严格按照服务器路径创建)。

4、node_modules：里面存放了npm安装的该项目的依赖库。

5、src：存放了项目css，js，组件，配置文件，路由，接口。

• api：根组件、所有的子组件都将在这里被引入。

• httpCore.js：存放了项目中所有用到的axios数据传输的第三方接口。

• assets：里面存放了页面用到的所有css文件，image，字体样式和部分的所需js文件。

• components：该文件夹存放了页面所有的公共组件，包括但不限于footer，header，Toast等等。

• page：存放了项目中所有的用到的页面，在router里面进行配置即可加载运行。

• router：路由。

  • index.js：整个项目的入口文件，将引用我们的根组件App.vue。

• util：里面存放了项目封装好的js逻辑

• App.vue：根组件、所有的子组件都将在这里被引入。

• main.js：入口文件的js逻辑，在webpack打包之后将会被注入到index.html中，项目核心文件。

6、static：文件夹存放一些静态的、较少变动的image或者css文件。

7、README.md：介绍，一般拿到新项目先看这个文档，然后进行安装修改等。

8、test:初始测试目录，可删除。

9、.xxxx文件：配置文件，包括但不限于语法配置，git配置等。

10、index.html：首页入口文件，可以添加一些meta信息等。

11、package.json：项目配置文件。

---

四、Vue的功能：

1、计算属性：

export  default{  data(){    return{    };  },  computed:{    //计算属性，return(返回)来进行实现  }}

2、模板语法：

包括{{ ··· }} ， v-html ， v-bind , v-on , v-if , v-else , v-show , v-for 以及过滤器等等。

3、组件化：

    component！！！！！！关键作用-----【组件复用】。

    关键如何使用？

    首先，通过import引入想要引入的组件对象组件对象，以head头为例：

import Headers from '@/components/header/Header';components:  {  Headers  },

    然后，就可以愉快的通过事先定义好的标签使用head组件了。

    【需要注意的是】：props[' ··· ']，当我们想在子组件中用父组件的数据时，父组件给其传入相对数据。