码迷,mamicode.com
首页 > 其他好文 > 详细

05 vue项目

时间:2019-09-20 23:35:31      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:www   hello   ade   django   route   初始化   hid   绑定   img   

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、自定义样式

 

05 vue项目

标签:www   hello   ade   django   route   初始化   hid   绑定   img   

原文地址:https://www.cnblogs.com/venicid/p/11560093.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!