项目环境配置及单文件组件

最新推荐文章于 2024-08-05 06:49:21 发布

从人到猿

最新推荐文章于 2024-08-05 06:49:21 发布

阅读量574

点赞数 1

分类专栏： Vue 文章标签：项目环境配置及单文件组件

本文链接：https://blog.csdn.net/qq_39200185/article/details/100147259

版权

Vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

项目环境配置

安装 node.js
淘宝镜像
- 【扩展】cnpm安装：npm install -g cnpm --registry= https://registry.npm.taobao.org

1. 项目环境配置

安装 vue-cli：npm install vue-cli -g（可以自动的构建项目结构和项目目录）
安装webpack：npm install webpack -g
cd 到指定的项目路径中并且初始化文件夹 npm init
创建项目：vue init webpack 项目名
切换到所创建的项目目录下：cd 你创建的项目文件夹
安装启动模块：npm install
启动项目：npm run dev

2. 项目目录结构分析

文件解释

build 中配置了webpack的基本配置，开发环境配置、生产环境配置（不建议修改）
config中配置了路径端口值等

3. 文件解释

node_modules为依赖的模块
src放置组件和入口文件
static放置静态资源文件
index.html文件入口

vue-cli操作

删除helloword.vue文件里面的template里面的内容，并且修改成自己的
必须要做的：把app.vue中的默认的图片删除，但是注意千万不要把router-view删除，并且把里面的style样式全部删除

单文件组件在使用父子组件的时候

先引用:在父组件中使用

import zi from './zi'

来进行引用，但是注意import后面的内容是给当前引用的组件起个名字，from要加./文件名，不加后缀

再调用：

components:{
    zi
}

最后使用

组件传值

正向传值

在子组件中创建一个props
在父组件中调用子组件的位置传入参数

逆向传值

必须通过事件来触发

创建事件，并且调用事件自定义抛出
项目演示:
App.vue

<template>
  <div id="app">
   
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
  *{
    margin:0;
    padding: 0;
  }

  html{
    font-size:26.67vw;
  }
</style>

HelloWorld.vue

<template>
  <div>
    <p>你好，么么哒</p>
    <!-- 3.使用 -->
    <!-- 正传2 在子组件被调用的时候传递父组件的数据 -->
    <!-- 逆向传值3:在子组件被调用的位置进行自定义事件的接受 -->
    <zi :ziprops="msg" @zipao="fufun"></zi>
  </div>
</template>

<script>
//1.先引用
// import 给你引用的组件起个名字 from '你要引用的组件路径'
import zi from './zi'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '我是父组件的数据'
    }
  },
  //2.调用
  components:{
    zi
  },
  // 逆向传值4:在父组件中接受子组件抛出的数据
  methods:{
    fufun(val){
      this.msg=val
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

zi.vue

<template>
    <div>
        <!-- 逆向传值1：创建一个事件调用自定义事件抛出 -->
        <p @click="fun()">我是子组件{{zitext}}-------{{ziprops}}</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            zitext:"你好么么哒"
        }
    },
    // 正向传值1  在子组件中创建props等待接受外部传值
    props:{
        ziprops:{
            type:String,
            required:true
        }
    },
    methods:{
        fun(){
            // 逆向传值2 :在事件中进行自定义事件抛出
            this.$emit("zipao",this.zitext);
        }
    }
}
</script>
<style scoped>
    p{
        color:red;
    }
</style>

vue可以用来干啥，前面学习了模板，组件，传参，路由等很多的知识，但是没有系统的将这些知识串起来，下面写个练手的demo，把之前学的东西串以下，加深知识
移动端页面练手demo：
HellowWorld.vue

<template>
    <div class="con">
        <div v-for="(v,i) in obj" :key="i">
            <left :biaoti="v.title" :neirong="v.content"></left>
            <right :urls="v.imgsrc"></right>
        </div>
    </div>
</template>

<script>
import left from './left';
import right from './right';
export default {
    components:{
        left,
        right
    },
    data(){
        return{
            obj:[
                {title:"新闻标题1",content:"我是内容111111--------我是内容111111我是内容111111",imgsrc:"../../static/5.jpg"},
                {title:"新闻标题2",content:"我是内容222222--------我是内容222222我是内容222222",imgsrc:"../../static/6.jpg"},
                {title:"新闻标题3",content:"我是内容333333--------我是内容333333我是内容333333",imgsrc:"../../static/7.jpg"},
                {title:"新闻标题4",content:"我是内容444444--------我是内容444444我是内容444444",imgsrc:"../../static/8.jpg"},
                {title:"新闻标题4",content:"我是内容555555--------我是内容555555我是内容555555",imgsrc:"../../static/9.jpg"}
            ]
        }
    }
}
</script>  

<style scoped>
    .con>div{
        display: flex;
    }
</style>

left.vue

<template>
    <div>
        <h1>{{biaoti}}</h1>
        <p>{{neirong}}</p>
    </div>
</template>

<script>
export default {
    props:["biaoti","neirong"]
}
</script>  

<style scoped>
    h1{
        font-size: 0.2rem;
    }

    p{
        font-size:0.16rem;
    }
</style>

right.vue

<template>
    <div>
        <img :src="urls">
    </div>
</template>

<script>
export default {
    props:["urls"]
}
</script>  

<style scoped>
    img{
        width:1rem;
        height:1rem;
    }
</style>

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
  *{
    margin:0;
    padding: 0;
  }

  html{
    font-size:26.67vw;
  }
</style>

效果图：
在这里插入图片描述

那些自己给自己挖的坑

1. img标签的src

使用动态绑定img的时候发现并不能把图片正常绑定到视图中

{title:"新闻标题1",content:"我是内容111111-------------------------",imgsrc:"../assets/5.jpg"},

图片的引入路径是正确的，但是在运行后，却不能显示图片，也不提示报错
解决img标签的src动态绑定问题：
把图片方式到static中可以使用正常方式引用

{title:"新闻标题1",content:"我是内容111111--------我是内容111111我是内容111111",imgsrc:"../../static/5.jpg"},

2. v-for key的使用

<div v-for="(v,i) in obj">
    <left :biaoti="v.title" :neirong="v.content"></left>
    <right :urls="v.imgsrc"></right>
</div>

代码可以执行，但是一直报错
解决办法：

使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
key的作用主要是为了高效的更新虚拟DOM

<div v-for="(v,i) in obj" :key="i">
    <left :biaoti="v.title" :neirong="v.content"></left>
    <right :urls="v.imgsrc"></right>
</div>

温馨提示，vue的学习要循序渐进，首先要熟练写出语法，每个语法或者功能都有它必要的地方，在熟悉这些功能的时候，才能更好的进行下一步的学习和开发，与诸君共勉，持之以恒

从人到猿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
项目环境配置及单文件组件

项目环境配置安装 node.js淘宝镜像【扩展】cnpm安装：npm install -g cnpm --registry= https://registry.npm.taobao.org1. 项目环境配置安装 vue-cli：npm install vue-cli -g（可以自动的构建项目结构和项目目录）安装webpack：npm install webpack -g...
复制链接

扫一扫

专栏目录