05 vue项目

发布时间：2020-12-20 10:38:34 所属栏目：Python 来源：网络整理

导读：1、runserver django项目 1、项目预期配置前端静态资源 ? ? ? ?页面展示 ? ? ? ? ? ?2、webpack模板 vue项目生成 vue全家桶 vue+vue-route+vuex ? 1、webpack模板 vue init webpack # 初始化 npm run dev # 启动 ? ? ? ? ? ?生态系统 ? ? ? ? 2、目录结构分

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://www.bootcss.com

在Vheader 放入bootstrap代码

?App.vue使用Vheadr组件

效果图

6、自定义样式

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!