Vue的组件化

Vue的组件化

世人慌慌张张,不图碎银几两,而这碎银几两,却可解世间惆怅,可让父母安康,可护幼子成长。

文章目录

    • Vue的组件化
      • Vue脚手架环境搭建
      • 创建Vue脚手架工程
        • 打开项目
        • 运行项目
      • 课堂案例
        • 1.将App.vue文件里面默认代码删除
        • 2.创建组件
        • 3.测试组件化
      • 案例升级
      • 案例再升级
        • 导入axios
        • 更改main.js
        • 前端代码
      • 使用Element-Plus框架

Vue脚手架环境搭建

我这里直接放一个安装教程的PDF

Vue的组件化_第1张图片

下载链接

创建Vue脚手架工程

1、在cmd输入vue ui

Vue的组件化_第2张图片

Vue的组件化_第3张图片

Vue的组件化_第4张图片

Vue的组件化_第5张图片

打开项目

Vue的组件化_第6张图片

运行项目

Vue的组件化_第7张图片

Vue的组件化_第8张图片

课堂案例

用vue的组件化实现

Vue的组件化_第9张图片

1.将App.vue文件里面默认代码删除

Vue的组件化_第10张图片

2.创建组件

在components文件夹下面创建四个组件Top.vue,Bottom.vue,Left.vue,Right.vue分别代表Top,Bottom,Left,Right

Vue的组件化_第11张图片

3.测试组件化

在每一个组件里面加一个可以识别的标签

Vue的组件化_第12张图片

  1. App.vue里面导入组件

    Vue的组件化_第13张图片

    Vue的组件化_第14张图片

  2. 关闭严格的语法检查

    在根目录下创建vue.config.js文件,文件名和路径不能错,重启HBuilder才能生效

    Vue的组件化_第15张图片

    module.exports = {
           
    	lintOnSave:false
    }
    
  3. 调css样式

    Vue的组件化_第16张图片

    
    
    
    
    
    
    

案例升级

Vue的组件化_第17张图片







Vue的组件化_第18张图片

案例再升级

要求连接springboot,前端请求用axios

导入axios

Vue的组件化_第19张图片

Vue的组件化_第20张图片

更改main.js

Vue的组件化_第21张图片

前端代码

Vue的组件化_第22张图片

使用Element-Plus框架

Vue的组件化_第23张图片

Vue的组件化_第24张图片

添加配置
Vue的组件化_第25张图片

就可以看到右侧有默认的代码了,element-plus就已经成功加入来了。

你可能感兴趣的:(Vue,vue.js,前端,javascript)