vue_05项目配置

Posted 2021-03-21 shaozheng

目录

• vue项目配置：
  • 前端样式结构：
  • settings配置：
  • vue项目路由配置：
  • vue全局js配置：
  • vue全局css配置：
  • 父传子：
    • 父组件
    • 子组件
  • 二.子传父
    • 子组件
    • 父组件

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>