Vue工程化项目01-通过cli创建vue项目

1、创建文件夹

在D盘目录下例如为AAA，进入到AAA目录，然后在地址栏输入cmd，即可打开cmd窗口

2、通过命令创建项目

1、然后在cmd窗口中输入

创建项目        vue create 项目名

例如：vue create first

2、选择创建项目的方式

利用（vue3模板、利用vue2模板、手动创建），目前处于学习阶段，需要了解项目结构，所以选择手动创建，后期熟悉之后可以选择利用模板创建。点击下键，选择第三个 ，然后回车。

3、选择项目中使用的模块或者插件

选择1、4、5、6四个选项，（通过上下键进行上下移动，通过空格键进行选中或取消），选完之后点击回车

4、选择使用的vue版本，这里我们学习的是vue2，所以选择第二个。

5、选择路由模式，在这里直接回车就好。

6、选择高级CSS预编译器，这里直接回车。

7、上面选择的模块需要配置文件，独立生成配置文件，这里直接回车就行。

8、是否选择配置清单，不需要，所以输入n然后回车。

9、出现以下内容的时候，项目创建成功

9、运行项目

切换到项目根目录：cd first

运行项目：npm run serve

杀死正在运行的项目：按住Ctrl然后点击两下C

10、项目创建成功之后，出现访问地址。（复制到浏览器可以进行访问）

local  是本地访问地址

network  是远程访问地址

3、VScode中的vue项目

1、将上述创建的项目文件拖进VScode（即利用vscode打开）

2、项目结构：
      2-1、node_modules:  项目需要依赖的模块都在次文件夹中（此文件夹是npm维护的我们不需要操作）
      2-2、public：文件夹，保存项目入口需要的静态文件
                       favicon.ico  浏览器选项卡的图标
                       index.html  当前项目的入口文件
      2-3、src 文件夹，源代码（重点 重点 重点）
                       assets: 静态资源，页面中需要的静态资源
                       components: 组成页面的组件，公共组件，多个页面共用的组件可以存放次文件夹
                       router: 路由，可以理解为一个规则(路径+资源)
                       store: 状态存储仓库
                       views: 存储的页面（页面组件）
                       App.vue: 文件 根组件，所有组件的起始
                       main.js: 文件 项目的逻辑入口
      2-4、.gitignore：文件，git忽略配置
      2-5、babel.config.js: 文件，babel的配置文件，配置代码转换的
      2-6、jsconfing.json: 项目运行js的配置文件
      2-7、package.json：包配置文件，项目根目录下，它是项目配置文件
      2-8、vue.config.js：vue脚手架配置文件

4、在vscode中打开终端运行项目

输入运行项目的命令

vscode终端运行的结果中，按住ctrl然后点击链接可实现自动打开浏览器访问。

5、文件讲解

资源的加载方式：html--->main.js--->App.vue

1、App.vue文件（浏览器的根组件）

<template>
  <div id="app">
    <h1>你好 VUE</h1>
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

2、main.js文件（程序启动时的逻辑）

// 从vue包中导入vue类
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  // 注册路由
  router,
  // 注册仓库
  store,
  render: h => h(App)
  // 监听App.vue中id为app的标签
}).$mount('#app')

3、vue.config.js文件（程序的相关配置）

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 写代码时的相关配置
  devServer:{
    // 自动打开浏览器运行项目
    open: true,
    // 修改程序运行时占用的端口
    port: 9527
  }
})

6、组件的创建与引用

在components中创建组件，例如创建Header.vue和Footer组件

Header.vue文件内容如下：（可以通过快捷键vue来快速生成模板）

<template>
    <!-- 每个组件都需要一个根标签,根标签的选择器尽量和文件名有关 -->
    <div class="header">
    周杰伦、周润发、李连杰
    </div>
</template>

<script>
// 导出默认对象
export default {
    // name是对外开放的名字，外部引用时用的名字，一般和当前文件名保持一致
    name: 'Header',
    data: function(){
        return {}
    }
}
</script>

<style lang="scss">

</style>

Footer.vue文件内容如下：（可以通过快捷键vue来快速生成模板）

<template>
    <div>
        这是footer
    </div>
</template>

<script>
    export default {
        name:'Footer',
        data: function(){
            return {}
        }
    }
</script>

<style>
</style>

App.vue引用Header.vue组件和Footer.vue组件的时候，代码如下：

<template>
  <div id="app">
    <h1>你好 VUE</h1>

    <!-- 3、引用，使用引入的组件 -->
    <my-header></my-header>

    <!-- 
      引入组建的时候还可以直接输入 < + 大写的组件名，然后回车，
      这样会会自动实现导入，注册，引用等三个步骤，例如下面输入  <Foo然后回车即可
    -->
    <Footer></Footer>
  </div>
</template>

<script>
    //1、导入 import 名称 form '路径'
    import Footer from './components/Footer.vue';
    import Header from './components/Header';

    export default {
        name: 'App',    // name名一般和当前文件名保持一致

        //2、注册 在components中添加外部组件    
        components:{
          // 组件名     配置项
          'my-header': Header,  //es5写法
          Footer  //es6写法
        }

    }
//支持选择器里面套选择器来进行设置后代标签的样式
<style lang="scss">
#app{
  main{
    color: red;
  }
}

</style>

7、组件之间的数据传输

可以传递任何数据，比如变量、对象、数组等等。

创建一个项目，在components中创建组件，例如创建Header.vue和Footer组件，内容同6一样，

1、将父组件的数据传递给子组件

1.1、在父组件中添加data（工程项目中的data是函数形式的），然后在return里面添加数据

export default {
    name: 'App',
    data: function(){
      return{
        msg:'App中的数据',
        abc:'abc数据',
        arr: [1,2,3,4,5,6]
      }
    },
    components:{
      'my-header': Header,  //es5写法
        Footer  //es6写法
    }
}

1.2、在template中在引用的组件标签中利用  :变量="data中的变量名"  将msg的值传递给自定义变量 fu

<template>
  <div id="app">
    <my-header hhh="999"   :fu="msg" :_arr="arr"></my-header>

    <main>
      {{msg}}------
      <span v-text="abc"></span>
    </main>

    <Footer></Footer>
  </div>
</template>

1.3、Header.vue进行接收

利用props接收父组件传递过来的数据，props是数组的形式进行接收的

props和data内部的属性用法一样

export default {
    name: 'Header',
    data: function(){
        return {}
    },
    props:['hhh','fu',"_arr"]
}

1.4、利用数据进行展示（例如展示fu和_arr）

<template>
    <!-- 每个组件都需要一个根标签 -->
    <div class="header">
    周杰伦、周润发、李连杰
    {{ hhh }}----{{ fu }}------{{ _arr }}
    <span v-for="v in _arr" :key="v">{{ v }}</span>
    </div>
</template>

总结：

用vue控制自定义属性的值，然后在子组件中利用props接收数据，然后将数据进行展示

2、将子组件的数据传递给父组件

2.1、首先在父组件中的methods中添加自定义带有参数的函数，例如下面创建的自定义函数为getChildMsg(num){ }，标记为函数C

export default {
    name: 'App',
    data: function(){
      return{
        aaaa:''
      }
    },
    components:{
        Footer  //es6写法
    },
    methods:{
      // 创建的自定义函数，标记为函数C
      getChildMsg(num){
        console.log(num,1111111);
        //将接收的数据赋值给aaaa
        this.aaaa=num
      }
    }
}

2.2、在上面引用的标签中添加自定义函数B，函数B是Footer内的函数。

<template>
  <div id="app">

    <!-- @_sentMsg为自定义方法，假设为函数B -->
    <Footer @_sentMsg="getChildMsg"></Footer>    <!-- 函数B绑定函数C -->

    <!-- 展示接收到的数据 -->
      {{aaaa}}
  </div>
</template>

2.3、在Footer组件中添加方法，_sentMsgToFu()方法，标记为函数A

自定义事件需要编写代码才能触发

       this.$emit( '自定义事件名' ,参数)        $emit( )表示触发事件

函数A中有函数B，当函数A执行的时候，函数B也执行，并且携带数据。

export default {
    name:'Footer',
    data: function(){
        return {
            aa:'500'
        }
    },
    methods:{
        _sentMsgToFu(){    //函数A
            // 触发自身的自定义事件_sendMsg
            this.$emit('_sentMsg',this.aa)    //函数B
        }
    }
}

2.4、在Footer组件中添加按钮点击事件，当点击按钮的时候，执行绑定的函数A。（后期可以把函数A写在生命周期函数中，这样就不用人为的去点击了）

<template>
<div class="foot">
    这是footer
    <!-- 假设_sentMsgToFu为函数A -->
    <button @click="_sentMsgToFu">向父组件发送消息</button>    
</div>
</template>

总结：

1、在父组件中创建有参的接收函数C，然后在引用的标签中为其添加自定义函数B，B触发C

2、在子组件中创建自定义函数A，自定义函数A中包括函数B，A触发B，函数B执行的时候携带数据

3、在子组件的标签中添加按钮点击事件，用来触发事件A（后续可以利用生命周期函数自动触发事件A）

3、将子组件的数据传递给子组件

方案1：子组件1先将数据传递给父组件，然后父组件将数据传递给子组件2。

方案2：利用vueX将数据放在一个公共的地方，其他兄弟组件可以直接拿来用。