• 章节:38
  • 访问:862
  • 时长:00:05:51
  • 日期:2019-07-02 06:30

修改App.vue如下

<template>
<div id="app">
<h4>
To Do List
</h4>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>

运行一下 查看效果

增加一个css框架

使用npm 安装bootstrap 4.0

npm install bootstrap@4.0.0

在 main.js中增加下面代码

import "bootstrap/dist/css/bootstrap.min.css";

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import "bootstrap/dist/css/bootstrap.min.css";
new Vue({
render: h => h(App)
}).$mount('#app')

修改html元素

修改app.vue

<template>
<div id="app">
<h4 class="bg-primary text-white text-center p-2">
To Do List
</h4>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>

运行项目

npm run serve

clipboard.png