四、VUE学习笔记 4 | 进阶 Vue CLI---bootstrap、axios、自定义CSS、组件结构、工程结构

本部分参考学习小马视频 http://komavideo.com

目录

一、引入Bootstrap4

1、vue-webpack工程安装bootstrap4框架

2、在main.js中引用bootstrap

3、测试bootstrap是否引用成功

 二、使用Ajax库-axios

三、自定义css样式

 四、* *组件结构

组件格式

五、工程结构

---

初始化VUE CLI模板

 

注意：

Vue cli 中入口的js是main.js 

入口的组件是App.vue

关于如何找到HelloWorld.vue 参考--文章

一、引入Bootstrap4

1、vue-webpack工程安装bootstrap4框架

~~~bash
$ cd myweb
$ npm install bootstrap --save --save-exact

 注意：$ npm install bootstrap --save --save-exact 中的--save是指将bootstrap作为依赖库存到package.json中，--save-exact是指精确到版本号

2、在main.js中引用bootstrap

import 'bootstrap/dist/css/bootstrap.min.css'

安装完成后，package.json增加如下内容

3、测试bootstrap是否引用成功

在App.VUE中引入

结果如下

---

 二、使用Ajax库-axios

知识点

* 为网页增加远程数据存取能力（Ajax）
* HTTP库axios（浏览器 or Node.js）

$ cd myweb
$ npm install --save --save-exact axios vue-axios

编辑main.js
添加

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios) //注册到VUE全局组件中

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import 'bootstrap/dist/css/bootstrap.min.css'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在组件HelloWorld中 添加

<pre>{{content}}</pre>
...
export default {
  name: "HelloWorld",
  data() {
    return {
      content: ""
    };
  },
  mounted() {
    // 生命周期函数，在页面渲染完成后执行。利用axios组件的post方法向指定网站进行提交，返回结果集body，把body里的data赋值给content
    this.axios.post("http://api.komavideo.com/news/list").then(body => {
      this.content = body.data;
    });
  }
};

<template>
  <div class="hello">
    <pre>{{content}}</pre>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      content:""
    }
  },
  mounted() {
    // 利用axios组件的post方法向指定网站进行提交，返回结果集body，把body里的data赋值给content
    this.axios.post("http://api.komavideo.com/news/list").then(body => {
      this.content = body.data;
    });
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

 结果

 

三、自定义css样式

 

有时我们不想用bootstrap的样式，则需要定义属于自己的样式单文件，如my.css
 

$ cd assets

创建文件my.css,输入

.myclass1 {
    color: red;
    border: 1px solid blue;
} 

编辑App.vue（是组件的入口文件） 

...
#这里必须是该文件对于my.css的相对路径，在script标签中写
import './assets/my.css'
...
<div class="myclass1">你好！</div>
...

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hr>
      <button class="btn btn-primary">确定</button>
      <button class="btn btn-success">使用</button>
      <button class="btn btn-danger">注意</button>
    <hr>
    <div class="myclass1">你好！</div>
    <hr>
    <router-view/>
  </div>
</template>

<script>
import './assets/my.css'
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 四、* *组件结构

所有的组件都被统一放在工程中的组件文件夹中。

~~~
{myproject}/src/components/*
~~~

组件格式

必须包含：

* template:组件html内容
* script:组件js脚本(ES6)
* style:组件css样式单

 

HelloWorld.vue

<template>
  <div class="container">
    <pre>{{msg}}</pre>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Hello World"
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
pre{
  color: rgb(0, 89, 255);
}
</style>

结果

五、工程结构

 webpack模板工程

* build
  + webpack设置文件
* config
  + 工程设置文件
* src
  + 源文件夹
* static
  + 静态文件夹(编译时直接拷贝至发布文件夹)
* index.html
  + 网页启动入口文件