• 若需要vue-cli前的部分（也就是基础）请访问我的Vue基础学习笔记01链接如下
  Vue基础学习笔记01

一、vue-cli（脚手架）2022.7.5

1、什么是单页面应用程序

2、什么是vue-cli

3、安装和使用

3.1）安装使用vue-cli创建项目

• 1、在终端下运行如下命令

npm install -g @vue/cli

• 2、在根目录内大考终端，运行如下命令创建目录

vue create 项目名称

• 3、选择自己所需的方案（上下箭头选择，这里我选择的是第三个，手动生成）
  
• 4、选择自己所需要的库（按空格是选择，这里我选择了babel个css）
  
• 5、选择vue版本（因为我们学习的是vue2，所以我们在这里选择2.x）
  
• 6、选择css处理模块（选择less处理模块）
  
• 7、选择创建的文件类型（独立配置文件还是.json配置文件，这里我们是开发，所以先选独立配置，也就是第一个）
  
• 8、选择是否保存预设（看你自己）
  
• 9、项目创建成功
  

使用 npm run serve 就可以了 如果这里看不明白，就请进入我的webpack文章去看看，链接在下方
Webpack学习笔记

3.2）vue项目中src目录的构成：

• 1、assets 文件夹：存放项目中用到的静态资源文件，例如：css 样式表、图片资源
• 2、components 文件夹：程序员封装的、可复用的组件。都要存放到components 目录下
• 3、main.js 是项目的入口文件，整个项目的运行，要先执行main.js
• 4、App.vue 是项目的根组件

4、vue项目的运行流程

• 测试$mount(‘idname’)
  

二、vue组件

1、什么是组件化开发

2、vue中的组件化开发

3、vue组件的三个组成部分

每个.vue 组件都有三部分组成，分别是：

• template -> 组件的模板结构
• script -> 组件的JavaScript行为
• style -> 组件的样式

4、 .vue组件的格式

<template>
    <div class="text-box">
        <h3>这是用户自定义的test.vue  --- {{ username }}</h3>
        <button @click='changename'>修改用户名</button>
    </div>
</template>

<script>
//默认导出，这是固定写法
export default {
    //data数据
    //注意：.vue 组件中的data 不能像之前一样，不能指向对象
    //注意： 组件中的data必须是一个函数

    data() {
        //这个return出去的 {}中，可以定义数据
        return {
            username: 'admin'
        }
    },
    methods: {
        changename(){
            //在组件中，this就表示当前组件的实例对象
            this.username = 'wahaha'
            console.log('this :>> ', this);
        }
    },
    //当前组件中的侦听器
    watch: {

    },
    //当前组件中的计算属性
    computed: {

    },
    //当前组件中的过滤器
    filters: {

    },
}
</script>


<style lang='less'>
    .text-box{
        background-color:pink;
    }
    h3{
        color: red;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

5、main.js组件代码解析

// 导入 vue 这个包，得到 vue 的构造函数
import Vue from 'vue'
// 导入 app.vue 根组件, 将来要把 App.vue 中的模板结构，渲染到HTML页面中
import App from './App.vue'
import test from './test.vue'

Vue.config.productionTip = false

//创建Vue的实例对象
new Vue({
  // el: '#app',    //el:  和 $mount('#app')都是替换掉原网页中  div为 app的替换成app.vue里面的内容
  // render 把render 函数指定的组件，渲染到 HTML 页面中
  //render函数中，渲染的是哪个.vue组件，那么这个组件就叫做“根组件”
  render: h => h(test),
}).$mount('#app')

//vue 实例的 $mount()  方法，作用和 el 属性完全一样
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

6、组件之间的父子关系

• 1、文件位置：
  
• 2、关系图：
  

6.1、组件使用的三个步骤

• 1、使用实例：
  

6.1.1）配置路径提示

然后我们再settings.json文件中输入：

    "path-autocomplete.extensionOnImport": true,
    "path-autocomplete.pathMappings":{"@":"${folder}/src"},
1
2

即可~

6.2、通过components注册的是私有子组件

6.3、注册全局组件

今天完事了~