vue_05项目配置
vue项目配置:
前端样式结构:
<style scoped>
.car-detail {
/* vw:屏幕宽度 vh:屏幕高度*/ (仅仅与页面有关)
/*width: 100vw;*/
/*height: 100vh;*/
/*background-color: orange;*/
}
</style>
settings配置:
# ap:国际化配置
# TODO --> 开发进度注释
LANGUAGE_CODE = 'zh-hans' # 中文注释
TIME_ZONE = 'Asia/Shanghai' # 地区
USE_I18N = True
USE_L10N = True
USE_TZ = False #同步时间
# media
MEDIA_URL = '/media/' # 设定 http 路径
# 项目media文件夹的绝对路径
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
vue项目路由配置:
1、环境
node:官网下载安装包,傻瓜式安装 - https://nodejs.org/zh-cn/ => 附带按照了npm
cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org
vue/cli:cnpm install -g @vue/cli
2、项目创建
cd 存放项目的目录
vue create 项目名 => 需要安装的组件babel、vue-router、vuex
3、配置项目启动
pycharm打开项目,配置npm启动
4、main.js完成vue环境的加载、完成根组件的渲染、加载vue-router、vuex等环境、加载自定义环境
5、vue-router配置路由:
<router-link to=""></router-link> | this.$router.push() 完成跳转
<router-view /> 完成页面组件的占位
在router/index.js中 完成路由配置 路径-视图组件 映射关系
两种路由传参
配置 跳转 获取
path:'/user' to="/user?pk=1" $route.query.pk
path:'/user/:pk' to="/user/1" $route.params.pk
:to="{name: 'user'}"
6、组件生命周期钩子:组件从创建到销毁的整个生命周期中特殊时间节点回调的方法
created(){完成后台数据的请求}
mounted(){完成极其耗时的后台数据请求}
7、js原型
Vue.prototype.count = 100
所有Vue实例都可以访问count
vue全局js配置:
#创建 assets/ js / settings.js
export default {
base_url: 'http://127.0.0.1:8000'
}
main.js配置环境
vue全局css配置:
#创建 assets/css/global.css
html, body, h1, h2, h3, h4, h5, h6, p, ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
#main.js 配置环境
父传子:
父组件
先写父组件
<template>
<子组件 :子组件的变量名='父组件的变量'> </子组件> //子组件的变量名前的冒号千万别丢了有和没有是两种意思
</template>
<script>
.......//没用的内容我省略了
data(){
return {父组件的变量:1}
}
</script>
子组件
<template>
<inpu type='text' v-model='子标签的变量名'/>
</template>
<script>
.......//没用的内容我省略了
props:['子标签的变量名'] //而不是写data里
</script>
二.子传父
-- 先写子组件
子组件
<template>
<button @click='子组件的方法'>
子传父
</button>
</template>
<script>
.......//没用的内容我省略了
data(){return {子组件变量:1}}
methods:{
子组件的方法(){
this.$emit('父组件中的方法名',this.子组件变量)
}
}
</script>
父组件
<template>
<button @emit中定义的方法名='父组件的函数'>
子传父
</button>
</template>
<script>
.......//没用的内容我省略了
methods:{
父组件的函数(msg){
console.log(msg) //这里msg就是this.子组件变量
}
}
</script>
vue_05项目配置的更多相关文章
- Project server 2016 “没有为此项目配置网站”错误处理
问题: 没有为此项目配置网站. There is no site configured for this project 解决办法: 依次点击设置>PWA设置>连接到sharepoint网 ...
- thinkphp3.22 多项目配置
1.index.php if(version_compare(PHP_VERSION,'5.3.0','<')) die('require PHP > 5.3.0 !'); // 开启调试 ...
- VS2010的项目配置
一直对VS的项目配置都是不怎么了解的,以前用过点,半年不用后,什么都忘记了... 下面这个是免于输入过长的引用头文件的,比如:#include “D:/C++/curl-7.37.0/libcurl/ ...
- VC项目配置基础以及快捷键(收藏)
来自http://blog.csdn.net/phunxm/article/details/5082488 一.IDE基础配置 1.字体 VC6中“Tools→Options→Format→Font” ...
- ThinkPHP多应用/项目配置技巧(使用同一配置文件)--(十六)
原文:ThinkPHP多应用/项目配置技巧(使用同一配置文件)--(十六) ThinkPHP多应用配置技巧(没有使用分组,这是通过入口文件产生的Home.Admin)----很实用! 比如:现在有Ho ...
- 理解 IntelliJ IDEA 的项目配置和Web部署
1.项目配置的理解 IDEA 中最重要的各种设置项,就是这个 Project Structre 了,关乎你的项目运行,缺胳膊少腿都不行.最近公司正好也是用之前自己比较熟悉的IDEA而不是Eclipse ...
- 在找一份相对完整的Webpack项目配置指南么?这里有
Webpack已经出来很久了,相关的文章也有很多,然而比较完整的例子却不是很多,让很多新手不知如何下脚,下脚了又遍地坑 说实话,官方文档是蛮乱的,而且有些还是错的错的..很多配置问题只有爬过坑才知道 ...
- ASP.NET Core 项目配置 ( Startup )(转载)
原文:https://www.twle.cn/l/yufei/aspnetcore/dotnet-aspnet-startup.html 由于是个人网站,怕没了,特意复制保存,个人觉得讲的非常透彻 前 ...
- Intellij IDEA导入eclipse项目配置jdk、tomcat到浏览器正常访问
转发自:博客园---Lindp(大佬写的甚好) 以下是转发的正文 intellij idea中文资料网上比较少,对于eclipse的项目如何导入intellij idea也没有完整的说明,本人在这里整 ...
随机推荐
- hashlib和hmac模块
目录 一.hashlib模块 1.0.1 hash是什么 1.0.2 撞库破解hash算法加密 一.hashlib模块 1.0.1 hash是什么 hash是一种算法(Python3.版本里使用has ...
- Java 集成速卖通开发.
一.申请成为开发者 申请入口:http://isvhz.aliexpress.com/isv/index.htm 说明文档:http://activities.aliexpress.com/open/ ...
- IT兄弟连 HTML5教程 HTML5的曲折发展过程 浏览器之间的大战
播放电影和音乐要使用播放器,浏览网页就需要使用浏览器.浏览器虽然只是一个设备,并不是开发语言,但在Web开发中必不可少,因为浏览器要去解析HTML5.CSS3和JavaScript等语言用于显示网页, ...
- webpack入门配置步骤详解
1.初始化 1.npm install webpack webpack-cli webpack-dev-server --g 全局安装必要的第三方插件 2.mkdir config dist src ...
- Python extend函数解读
num = [1,2] print('将1迭代2次') num.extend([1]*2) print(num) print('将2迭代3次') num.extend([2] * 3) print(n ...
- H3C DRNI学习
DRNI:Distributed Resilient Network Interconnect,分布式弹性网络互连.DR:分布式聚合接口IPP:内部控制链路端口IPL:内部控制链路DRCP报文:分布式 ...
- Rust对协程的思考
最近和同事聊起来,觉得lua缺乏编译型语言的类型校验功能,还有变量拼写检查之类的,导致线上总是有低级错误出现.比如最近有一个是变量名拼写少了一个字母,导致某功能没开启:还有一个是变量传参时,之前测试多 ...
- Zabbix 系列文章
Zabbix 所有文章目录 本系列文章都基于 Zabbix 4.0 , Zabbix 4.0 是属于长期支持版本,其它的长期支持版本有 3.0 .2.2 . 官方已经有中文文档, 官方文档链接: Za ...
- 深度剖析各种BloomFilter的原理、改进、应用场景
Bloom Filter是由Bloom在1970年提出的一种多哈希函数映射的快速查找算法.通常应用在一些需要快速判断某个元素是否属于集合,但是并不严格要求100%正确的场合. 一. 实例 为了说明B ...
- C# - WinFrm应用程序MessageBox自动关闭小实验
概述 在程序中MessageBox弹出的对话框,用于向用户展示消息,这是一个模式窗口,可阻止应用程序中的其他操作,直到用户将其关闭.但是有时候在自动化程序中,如果弹出对话框,程序将会中断,等待人工的干 ...