05 vue项目

1、runserver django项目

1、项目预期

配置前端静态资源

 

 

 

 页面展示

 

 

 

 

 

 2、webpack模板 vue项目生成

vue全家桶

vue+vue-route+vuex

 

1、webpack模板

vue init webpack  # 初始化
npm run dev    # 启动

 

 

 

 

 

 生态系统

 

 

 

 

2、目录结构分析

webpack生成这些

App.vue 显示

router-view

 

 

HelloWorld 组件

 

 

 

 

3、项目实现

 

 

 1、创建子组件

 

 

 

 

 

 Vmain.vue

<template>
    <div class="main">
        主页
    </div>

</template>

<script>
export default {
    name:"Vmain",
    data(){
        return{}
    }
}
</script>

<style scoped>

</style>

 

Vnote.vue

<template>
    <div class="note">
        笔记
    </div>

</template>

<script>
export default {
    name:"Vnote",
    data(){
        return{}
    }
}
</script>

<style scoped>

</style>

View Code

 

 

2、router路由绑定子组件

 

 

 

 3、App.vue显示

 

 

 

 

 4、下载bootstrap

 

 

 

// 1.0 导入bootstrap
import "bootstrap/dist/css/bootstrap.min.css"

 

 

 

 

 

引入成功

 

 

 

5、使用bootstrap

创建Vheader

<template>



</template>

<script>
export default {
    name:"VHeader",
    data(){
        return{}
    }
}
</script>

<style scoped>

</style>

 

 

bootstrap官网 https://HdhCmsTestbootcss测试数据

 

 

在Vheader 放入bootstrap代码

 

 App.vue使用Vheadr组件

 

 

效果图

 

 

 

 

6、自定义样式

查看更多关于05 vue项目的详细内容...