Vue CLI, Element UI

Vue CLI, Element UI
- 一、Vue CLI
- 二、Element UI

一、Vue CLI

1. Vue CLI概述

Vue CLI是基于Vue.js的应用开发提供的一个标准的脚手架工具，为应用搭建基础的框架结构，提供插件、开发服务、Preset、构建打包功能

2. Vue CLI安装

在安装Vue CLI前，要确认是否安装了Node.js和npm

Node.js 是一个运行在服务端的框架，可以使用JavaScript去编写一些服务端的程序

npm全称Node Package Manager，是node包管理和分发的工具，使用npm可以对应用的依赖进行管理，npm的功能和服务端项目构建工具maven的依赖管理功能差不多，通过npm 可以很方便地下载js库，打包js文件

Node.js已经集成了npm工具，安装好后需要更改默认的包管理路径
通过npm命令安装Vue CLI

3. 使用Vue CLI构建项目

构建步骤：
1. 创建项目文件夹
2. 以管理员运行CMD，进入项目文件夹的路径下
3. 执行命令vue create 项目名
  
  项目文件名不支持驼峰（包含大写字母），建议使用短横线
4. 在CMD中根据提示信息完成配置
5. 将项目导入到VSCode
项目结构
相关配置文件
- package.json
  
  类似于Maven中的pom.xml，保存依赖信息，如axios、element-ui、vue-router
- vue.config.js
  
  声明模块并导出相关对象，如在devServer中定义访问端口号和打包完成自动打开浏览器

4. 组件化开发

在Vue CLI构建的项目主要由各个组件组成
组件分类
- 页面级别的组件(views文件夹)
- 业务上可以复用的组件(components文件夹)
组件的主要组成部分（标签）
- template：HTML页面展示部分
  
  template里面只能有一个根标签，若有多个子标签则在template中使用div将多个子标签放在一起
- script：JS脚本，主要包含name、methods、钩子函数、计算属性...
- style：template部分的CSS样式
组件中的导入和导出操作
- import xxx from "./xxx.vue"
  
  将vue文件中的template、script、style作为成员变量的对象xxx导入本文件中
  
  xxx代表的是用{}表示的对象
  
  xxx可以作为路由route中的component属性的value
  
  路由route中的component属性的value也可以直接用() => import(./xxx.vue)来实现
  
  自定义组件的导入：xxx可以作为当前文件下的DOM中的标签来使用当作DOM的一部分
- 定义props属性为自定义组件传递参数的两种写法：
- import xxx from "./xxx.js"和import xxx from "./xxx.vue"区别
  
  从.js文件中导入是导入变量或对象
- es6语法export default
  
  可以将所有需要导出的变量放入一个对象中，然后通过 export default 进行导出
```
/*****************导出****************************/
export default{
    name:"老孙",
    eat(){
        return "吃点啥！";
    }
}

/*****************导入****************************/
import p from "./person.js";
console.log( p.name, p.eat() );
```

5. Vue CLI项目运行流程

主要流程：
1. 项目运行后先加载入口文件main.js，在main.js中主要是创建Vue实例
  
  Vue实例中的属性包含了router, App.vue的模板
  
  render: h => h(App);
  
  createElement 函数是用来生成 HTML DOM 元素的， createElement 简写成 h
2. App.vue是项目的主组件，也是页面入口文件，项目中的所有页面都是在该文件下进行切换的
  
  可以理解为所有的路由都是App.vue的子组件，添加一个组件就要布置一个路由
  
  App.vue中不但可以当做是网站首页，也可以写所有页面中公共需要的动画或者样式，不在上面写代码也可以
3. router路由文件夹下的文件可以进行页面的跳转和视图渲染
4. 默认访问Home.vue首页（在routes中配置组件Home.vue的路径为/）
  
  Home.vue视图部分可以用标签引入自定义组件

二、Element UI

1. Element UI概述

Element UI是基于 Vue.js 的后台组件库，方便进行页面快速布局和构建

2. Element UI安装和配置

安装和配置步骤：
- 在终端执行安装Element UI命令npm i element-ui -S
  
  安装完成后配置文件中存在element-ui依赖
- main.js中导入组件库
- main.js中导入相关样式
- main.js中配置Vue插件，将Element UI安装到Vue上

3. 树形控件

基本的树形控件

props属性用于配置属性结构

defaultProps对象中：

label属性：各个层级上的显示名称

children属性：当前节点的子节点

<template>
  <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
    
  </el-tree>
</template>

<script>
  export default {
    data() {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  }
</script>

<style scoped>
    
</style>

data对象代表了当前节点的数据对象

custom-tree-node:

单独设置各个层级上的显示名称和当前级别

当没有定义custom-tree-node时默认按defaultProps中的label来显示节点名称

<template>
  <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
    <span class="custom-tree-node" slot-scope="{node, data}">
      <span>{{data.label}}</span>
      <span>level: {{node.level}}</span>
    </span>
  </el-tree>
</template>

自定义树形控件

<template>
  <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
    <span class="custom-tree-node" slot-scope="{node, data}">
      <span>{{data.section_name || data.theme}}</span>
      <span>level: {{node.level}}</span>
    </span>
  </el-tree>
</template>

<script>
  export default {
    data() {
      return {
        data: [{
          id: 5, 
          course_id: 10, 
          section_name: "麻式太极", 
          description: "麻式太极拳,你动我试试", 
          orderNum: 0, 
          status: 2, 
          create_time: "2019-07-11 10:55:10.0", 
          update_time: "2019-10-09 12:43:01.0", 
          isDel: 0, 
          lessonList: [ 
            { 
              id: 32, 
              course_id: 10, 
              section_id: 5, 
              theme: "第一讲:如何给自己洗脑", 
              duration: 10, 
              is_free: 1, 
              order_num: 1, 
              status: 2, 
              create_time: "2019-01-23 20:37:02.0", 
              update_time: "2020-02-24 18:37:34.0", 
              isDel: 0 
            },
            { 
              id: 33, 
              course_id: 10, 
              section_id: 5, 
              theme: "第二讲:如何给别人洗脑", 
              duration: 10, 
              is_free: 1, 
              order_num: 1, 
              status: 2, 
              create_time: "2019-01-23 20:37:02.0", 
              update_time: "2020-02-24 18:37:34.0", 
              isDel: 0 
            } 
          ]
        }],
        defaultProps: {
          children: 'lessonList',
          label: (item) => {
            return item.section_name || item.theme;
          }
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  }
</script>

<style scoped>
    
</style>

posted @ 2022-02-15 18:38 Ramentherapy 阅读(134) 评论(0) 收藏举报

刷新页面返回顶部

Ramentherapy

Vue CLI, Element UI

Vue CLI, Element UI

一、Vue CLI

1. Vue CLI概述

2. Vue CLI安装

3. 使用Vue CLI构建项目

4. 组件化开发

5. Vue CLI项目运行流程

二、Element UI

1. Element UI概述

2. Element UI安装和配置

3. 树形控件

公告