(Vue-cli)一、初始Vue-cli(安装&创建组件&父子组件之间传值&安装使用Element-UI&安装使用Echarts)

Vue-cli文档 =>火速一键进入学习

一、初始Vue-cli

1.介绍&安装

Vue-cli就是Vue的开发者工具(脚手架工具)
电脑中打开cmd,首先先检查node及npm是否安装,用node -v 及 npm -v来检测版本号

首先在全局cmd中安装 npm install -g @vue/cli
后使用vue --version来检测版本号是否正确,需4.5.以上的版本。

如何创建项目: 使用vue create +项目名(名称内不能有中文及大写字母)例如vue create demo,选择Default Vue2,即可创建完成。
其中
public是静态目录,
src为代码目录
(其中assets为静态资源目录,一般项目中的样式,字体,图标都放在assets中;components为组件存放的包;App.vue是全局组件;main.js是入口文件,main.js中的#app实例在public的index.html中),
node_modules是项目依赖(包),
babel.config.js是es6转es5的文件,
package.json是包的描述文件。
如何运行网页:首先跳转到根目录,再 npm run serve 指令。

components中每个文件就是一个组件,每个组件由三个部分组成;
xxx.vue是vue的单文件组件,template放置模板内容,script里面放置js代码,style里面放置样式代码。一般习惯组件的首字母大写。


2.创建组件

① 单文件组件
单文件组件:把一个组件全部内容汇合到一个文件中,文件名字是以 .vue 结尾,这个文件就是单文件组件。
xxx.vue是vue的单文件组件。
每个vue的单文件组件由三个部分组成:template里面放置模板内容,script里面放置js代码,style里面放置样式。






② 使用组件的步骤
(1)导入组件:

import Child from './components/Child.vue'

(2)注册组件:

export default {
  // name选项定义组件的名称
  name: 'App',
  components:{
    Child
  }
}

③ 使用组件

  

3.父子组件之间传值

(1) 子组件

子组件通过props定义属性,接收父组件传过来的数据。

props中定义的属性是只读、不可修改的,不过可以在data中对父组件传递过来的值进行中转,以修改data中的数据。如果属性是一个对象,可以通过 obj.属性名 修改对象的属性值。
子组件通过$emit()触发自定义事件,将最新的数据作为事件对象传回去。

    

{{title}}


车名:

车价:


飞机名称:

飞机价格:

// 每个组件,其实就是一个导出的对象
export default {
    name:'Child',
    props:['car','planeName','planePrice'],
    // 注意:组件里面的data一定要是一个方法,由方法返回一个对象
    data() {
        return {
            title:'我是Child组件',
            // 中转父组件传递过来的值
            myPlaneName : this.planeName,
            myPlanePrice : this.planePrice
        }
    },
    watch:{
        myPlaneName(val){
            this.$emit('updatePName',val)
        },
        myPlanePrice(val){
            this.$emit('updatePPrice',val)
        }
    }
}

(2) 父组件
父组件可以通过绑定属性,将数据传给子组件。
父组件通过绑定自定义事件,更新数据。

  

{{title}}

汽车信息:{{car}}

飞机信息:{{planeName}}-{{planePrice}}

>
import Child from './components/Child.vue'
export default {
  // name选项定义组件的名称
  name: 'App',
  // data选项定义组件的数据
  data() {
    return {
      //定义一辆车的信息
      car:{
        name:'奔驰',
        price:'50W'
      },
      //飞机信息
      planeName:'波音747',
      planePrice:'10Y'
    }
  },
  components:{
    Child
  }
}

4.如何在脚手架的环境中,使用第三方组件库 =>>> Element-UI组件库导入并使用

ElementUI用法
(1) 安装 npm i element-ui -S
(2) 在main.js文件中:
导入ElementUI组件库import ElementUI from ' element-ui'
导入ElementUI组件库的样式import 'element-ui/lib/theme-chalk/index.css'
由于ElementUI组件库是插件,所以必须要use一哈 Vue.use(ElementUI)
后续将第三方组件库中的代码及data数据引入componetns文件中

(1) 安装

npm i element-ui -S

(2) 导入

// 导入element-ui组件库
import ElementUI from 'element-ui';
// 导入element-ui组件库的样式
import 'element-ui/lib/theme-chalk/index.css';
// 注意:element-ui组件库,是一个插件,所有的插件都要由Vue去use
Vue.use(ElementUI);

(3) 使用






=>> 一键进入 Element-UI官方


5.如何在vue的工程化的环境中去使用可视化Echarts呢

(1) 在创建的项目demo安装

npm install echarts --save

(2) 在需要使用图表库的组件中导入echarts对象

import * as echarts from 'echarts';

(3) 在需要使用图表库的组件中准备容器

  

在vue项目中使用ECharts

(4) 选择示例图

在官网找到想要的示例,下载示例。

(5) 引入 ECharts

基于准备好的dom初始化echarts实例,绘制图表。因为该项目是基于vue,所以需要在mounted生命周期中进行这一步(获取dom,需要在页面挂载完成后进行)。

  • 柱状图实例
    在需要使用ECharts图表库的组件(components下的xxx.vue)中export default对外输出本模块变量
export default {
  name: "Charts",
  data(){
      return {
          list:[
              {
                  title:'衬衫',
                  sale:5,
                  stock:9
              },
              {
                  title:'羊毛衫',
                  sale:20,
                  stock:19
              },
              {
                  title:'雪纺衫',
                  sale:36,
                  stock:55
              },
              {
                  title:'裤子',
                  sale:10,
                  stock:2
              },
              {
                  title:'高跟鞋',
                  sale:10,
                  stock:5
              },
              {
                  title:'袜子',
                  sale:20,
                  stock:35
              },
          ]
      }
  },
  mounted() {
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "产品销售信息",
        subtext:'2021-12-18'
      },
      legend:{
          
      },
      tooltip: {},
      xAxis: {
          // 获取x轴的数据
        data: this.list.map(r=>r.title)
      },
      yAxis: {},
      // 获取系列数据
      series: [
        // 第一个系列显示销量信息
        {
          name: "销量",
          type: "bar",
          data: this.list.map(r=>r.sale)
        },
        // 第二个系列显示库存信息
         {
          name: "库存",
          type: "bar",
          data: this.list.map(r=>r.stock)
        },
      ],
    });
  },
};

然后在App.vue中三部曲1.导入组件 2.注册组件3.使用组件

import Charts from './components/Charts.vue'
export default {
  name: 'App',
  data() {
    return {
    }
  },
  components:{
    Charts
  }
}

彳亍,结束

以下是正经的丁老师的代码了( ̄▽ ̄)~■干杯□~( ̄▽ ̄):通过axios获取后台数据。(注意:axios需要先安装,再导入)

// 导入axios
import axios from "axios";
export default {
  name: "Test",
  data() {
    return {
      // 定义一份数据
      list: [],
    };
  },
  methods: {
    // 加载数据的方法
    async getList() {
      // 向后台发送请求,获取一份数据
      let {data} = await axios.get("data/data2.json");
      this.list = data
      this.showdata()
    },   
    // 渲染数据的方法
    showdata() {
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "产品销售信息",
          // 副标题
          subtext: "2021-12-08",
        },
        // 图例组件
        legend: {},
        tooltip: {},
        // X轴信息
        xAxis: {
          // 产品名称数据作为X轴信息展示
          data: this.list.map((r) => r.title),
        },
        // Y轴信息
        yAxis: {},
        // 系列
        series: [
          {
            name: "销量",
            type: "bar",
            data: this.list.map((r) => r.xl),
          },
          {
            name: "库存",
            type: "bar",
            data: this.list.map((r) => r.kc),
          },
        ],
      });
    },
  },
  // 页面挂载完成
  mounted() {
    this.getList();
  },
};

数据:

[
    {
        "title": "衬衫",
        "xl": 5,
        "kc": 9
    },
    {
        "title": "羊毛衫",
        "xl": 20,
        "kc": 19
    },
    {
        "title": "雪纺衫",
        "xl": 36,
        "kc": 55
    },
    {
        "title": "裤子",
        "xl": 10,
        "kc": 2
    },
    {
        "title": "高跟鞋",
        "xl": 10,
        "kc": 5
    },
    {
        "title": "袜子",
        "xl": 20,
        "kc": 35
    }
]

ps:
export主要用于对外输出本模块变量的接口,一个文件就可以被理解为一个模块。export就是导出。
import就是在一个模块中加载另一个含有export接口的模块, import就是导入。
export default和export都能导出一个模块里面的常量,函数,文件,模块等,在其它文件或模块中通过import来导入常量,函数,文件或模块。这样就可以使用它们了。但是,在一个文件或模块中,export,import可以有多个,export default却只能有一个。
通过export方式导出,在导入的时候需要加{}大括号,export default 就不需要{}
原文链接


ps:可以在pachage.json 里off 掉半吊子提示(改了之后必须CTRL+C退出终端,重新npm run serve

Echarts是一个基于 JavaScript 的开源可视化图表库。
=>> 一键进入 Echarts官方
=>> 文档-查看API手册....去旧版本

你可能感兴趣的:((Vue-cli)一、初始Vue-cli(安装&创建组件&父子组件之间传值&安装使用Element-UI&安装使用Echarts))