五. web框架-----------VUE初始项目使用和其他库的资料（五）

一 VUE初始项目使用

1 .vue项目文件说明

https://blog.csdn.net/toBetterMe/article/details/88744241          vue-cli项目的目录结构介绍

目录/文件           说明
build               项目构建(webpack)相关代码
config              配置目录，包括端口号等。我们初学可以使用默认的。
node_modules        npm 加载的项目依赖模块

src                 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets:             放置一些图片，如logo等。
components:         目录里面放了一个组件文件，可以不用。
App.vue:            项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js:            项目的核心文件。

static              静态资源目录，如图片、字体等。
test                初始测试目录，可删除
.xxxx文件            这些是一些配置文件，包括语法配置，git配置等。
index.html          首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json        项目配置文件。
README.md           项目的说明文档，markdown 格式

 2.自己创建的项目

 对应次项目文件↓

Vcontent.vue

<template>
   <div class="warp">
     <h1>我是内容</h1>
       这是content哈哈哈
              <br>
       {{msg}}
   </div>

</template>

<script>

//页面的业务逻辑
export default {
  name: 'Vcontent',
  data () {
    return {
      msg: '这是content欢迎啦啦啦'
    }
  }
}

</script>
<style scoped>
h1{
   color: red;
}
.warp{
    height: 200px;
     800px;
    background-color: burlywood;


}
</style>

Vheader.vue

<!--页面结构-->
<template>
  <header class="nav">
    <h1>我是头部</h1>
                               这是hearer哈哈哈
                         <br>
                {{msg}}
       
  </header>
</template>

<!--页面逻辑-->
<script>


export default {
  name: 'Vheader',
  data () {
    return {
      msg: '这是hearer欢迎啦啦啦啦啦'
    }
  }
}
</script>


<!--页面样式-->  <!--scoped  这个属性表示对当前主组样式起作用-->
<style scoped>  

h1{
  color: brown;
}
.nav{

   600px;
  height: 200px;
  background-color: cyan;

}
</style>

Vfooter.vue

<template>
  <footer class="footer">
         <h1>我是底部</h1>
                     这是footer哈哈哈
            <br>
               {{msg}}    
  </footer>
</template>

<script>
export default {
  name: 'Vfooter',
  data () {
    return {
      msg: '这是footer欢迎啦啦啦'
    }
  }
}

</script>


<style scoped>

h1{
   color: blue;

}
.footer{
   height: 150px;
    500px;
   background-color: yellow;

}
</style>

App.vue

<template>
  <div class="app">
    <!--页面的结构-->
                    页面的结构！！！！！！！！！！！！！
            <br />
          <h1> {{msg}}</h1>
             <br />
           <Vheader></Vheader>
           <Vcontent></Vcontent>
           <Vfooter></Vfooter>
                  
  </div>
</template>

<script>

//引入子外部组件
import Vheader from './components/Vheader.vue'
import Vcontent from './components/Vcontent.vue'
import Vfooter from './components/Vfooter.vue'

//页面的业务逻辑
export default {
  name: 'app',
  data () {
    return {
      msg: '根组件'
    }
  },methods:{  
  
  },
  computed:{    //计算属性
  
  },
  
//组件图     挂载
  components:{   // 挂载 外部引入来的组件
           Vheader,
           Vcontent,
           Vfooter,
  }
}

</script>


<!--scoped  这个属性表示对当前主组样式起作用-->
<style scoped>
h1{
  color: peru;

}
.app{
   1500px;
  height: 100px;
  background-color: plum;
  
}
body{
  margin: 0;
  padding: 0;
}

</style>

注意常报错

App.vue

<template>
  <div id="app">

            <Vheader></Vheader>
            <Vcontent></Vcontent>
            <Vfooter></Vfooter>
           <!-- <p> <img src="./assets/logo.png" alt="哈哈哈" /></p> -->
             <p> <img :src="imgSrc" /></p>

  </div>
</template>


<script>
//引入子外部组件
import Vheader from './comp/Vheader.vue'
import Vcontent from './comp/Vcontent.vue'
import Vfooter from './comp/Vfooter.vue'
 // 动态导入图片
import imgSrc from './assets/logo.png'


export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      imgSrc:imgSrc
    }
  },//组件图     挂载
  components:{   // 挂载 外部引入来的组件
           Vheader,
           Vcontent,
           Vfooter,
  }
}
</script>


<style>

</style>

2. Element 网站快速成型工具

https://element.eleme.cn/#/zh-CN

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

3 .vue  Font Awesome    图标字体

https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs

Font Awesome现在有一个官方的Vue.js组件，可供所有希望在其Vue.js项目中使用我们的图标的人使用。

4 .vue资源精选-前端组件库资源-前端选型 资源库

                  http://vue.awesometiny.com/  

5 .Vue开源项目汇总(史上最全)

              https://blog.csdn.net/badaaasss/article/details/86129393

             https://github.com/rumengkai/awesome-vue 

6. axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端 

https://www.cnblogs.com/gaoya666/p/9102954.html      使用axios发送ajax请求(vue中)

https://blog.csdn.net/VVVZCS/article/details/82494888      使用axios发送ajax请求

http://www.axios-js.com/

https://www.jianshu.com/p/c1f43ac82a33

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF