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

Dear 丶 2021-07-25 01:53 292阅读 0赞

# 项目环境配置 #

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

## 1. 项目环境配置 ##

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

## 2. 项目目录结构分析 ##

1.  文件解释

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

## 3. 文件解释 ##

1.  node\_modules为依赖的模块
2.  src放置组件和入口文件
3.  static放置静态资源文件
4.  index.html文件入口  
    ![在这里插入图片描述][20190829212158530.png]

# vue-cli操作 #

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

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

1.  先引用:在父组件中使用

import zi from './zi'

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

1.  再调用：

components:{
        zi
    }

1.  最后使用

## 组件传值 ##

### 正向传值 ###

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

### 逆向传值 ###

*必须通过事件来触发*

1.  创建事件，并且调用事件自定义抛出  
    项目演示:  
    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>
        
        
        
        <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>
    
    
    <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>
            
            <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>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70]

# 那些自己给自己挖的坑 #

## 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的使用 ##

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

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

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

[20190829212158530.png]: /images/20210724/85624ab0733d40a1a4eb5806dd634e6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70]: /images/20210724/7ee3193c76ce439aa722efb517271028.png