[VUE start] Build vUE project quickly and introduce third-party plug-ins

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

Blessed by Buddha, there is no bug. Hello everyone! I am across the sea!

Quickly set up vUE project document portal

About the fast new VUE project online tutorial a lot, I will not redundant, HERE I mainly talk about vUE project after the new, into the introduction of third-party plug-ins and the use of the way

Quick project creation (Quick walkthrough)

Use VScode to open the created project and execute Yarn Serve

Introducing the element – the UI

Element – UI portal

The installation

yarn add element-ui
Copy the code

Import, we use on-demand references

With babel-plugin-Component, we can reduce the size of the project by introducing only the components we need.

yarn add babel-plugin-component -D
Copy the code

You can install dependencies under devDependencies in package.json with the -d suffix

In accordance with theThe official documentation for Element-UITo do,According to the need to introduce.

The contents of the lib/element/index.js file are as follows

import "element-ui/lib/theme-chalk/index.css";

import {
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Timeline,
  TimelineItem,
  Link,
  Divider,
  Image,
  Calendar,
  Backtop,
  PageHeader,
  CascaderPanel,
  Loading,
  MessageBox,
  Message,
  Notification,
} from 'element-ui';

export default (Vue) => {
  Vue.use(Pagination);
  Vue.use(Dialog);
  Vue.use(Autocomplete);
  Vue.use(Dropdown);
  Vue.use(DropdownMenu);
  Vue.use(DropdownItem);
  Vue.use(Menu);
  Vue.use(Submenu);
  Vue.use(MenuItem);
  Vue.use(MenuItemGroup);
  Vue.use(Input);
  Vue.use(InputNumber);
  Vue.use(Radio);
  Vue.use(RadioGroup);
  Vue.use(RadioButton);
  Vue.use(Checkbox);
  Vue.use(CheckboxButton);
  Vue.use(CheckboxGroup);
  Vue.use(Switch);
  Vue.use(Select);
  Vue.use(Option);
  Vue.use(OptionGroup);
  Vue.use(Button);
  Vue.use(ButtonGroup);
  Vue.use(Table);
  Vue.use(TableColumn);
  Vue.use(DatePicker);
  Vue.use(TimeSelect);
  Vue.use(TimePicker);
  Vue.use(Popover);
  Vue.use(Tooltip);
  Vue.use(Breadcrumb);
  Vue.use(BreadcrumbItem);
  Vue.use(Form);
  Vue.use(FormItem);
  Vue.use(Tabs);
  Vue.use(TabPane);
  Vue.use(Tag);
  Vue.use(Tree);
  Vue.use(Alert);
  Vue.use(Slider);
  Vue.use(Icon);
  Vue.use(Row);
  Vue.use(Col);
  Vue.use(Upload);
  Vue.use(Progress);
  Vue.use(Spinner);
  Vue.use(Badge);
  Vue.use(Card);
  Vue.use(Rate);
  Vue.use(Steps);
  Vue.use(Step);
  Vue.use(Carousel);
  Vue.use(CarouselItem);
  Vue.use(Collapse);
  Vue.use(CollapseItem);
  Vue.use(Cascader);
  Vue.use(ColorPicker);
  Vue.use(Transfer);
  Vue.use(Container);
  Vue.use(Header);
  Vue.use(Aside);
  Vue.use(Main);
  Vue.use(Footer);
  Vue.use(Timeline);
  Vue.use(TimelineItem);
  Vue.use(Link);
  Vue.use(Divider);
  Vue.use(Image);
  Vue.use(Calendar);
  Vue.use(Backtop);
  Vue.use(PageHeader);
  Vue.use(CascaderPanel);

  Vue.use(Loading.directive);

  Vue.prototype.$loading = Loading.service;
  Vue.prototype.$msgbox = MessageBox;
  Vue.prototype.$alert = MessageBox.alert;
  Vue.prototype.$confirm = MessageBox.confirm;
  Vue.prototype.$prompt = MessageBox.prompt;
  Vue.prototype.$notify = Notification;
  Vue.prototype.$message = Message;
};

Copy the code

To put thisElement plug-inIntroduced to themain.js 中

willhelloworld.vueDelete the original content and put in oneelementthebuttonSee if it works.

<template>
  <div class="hello">
    <el-button>112233</el-button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld".props: {
    msg: String,}};</script><! -- Add"scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>

Copy the code

The introduction of echarts

The installation

yarn add echarts vue-echarts
Copy the code

Note that many posts talk about installing vue-Echarts directly, when in fact just installing the new version of Vue-Echarts is not appropriate. You must also install Echarts

Interlude project running error (resolution process)

To solve this problem, there is a small episode (looking back, this problem is actually quite dog blood, is misread, but also solved, the solution process is quite hardcore)

The episode resolution is here: the portal

And when it’s done, it’s normal

Add an Echarts diagram to helloWorld.vue and see

<template>
  <div class="hello">
    <el-button>112233</el-button>
    <div style="width: 95%; height: 170px; border: 1px solid">
      <Echart :options="echartObj" :autoResize="true" style="width: 100%; height: 100%"/>
    </div>
  </div>
</template>

<script>
import echart from "vue-echarts";

export default {
  name: "HelloWorld".props: {
    msg: String,},data() {
    return {
      echartObj: {}}; },methods: {
    loadEcharts() {
      const XData = [
        "The 2019-07-01 00:00:00"."The 2019-07-01 00:01:00"."The 2019-07-01 00:02:00"."The 2019-07-01 00:03:00"."The 2019-07-01 00:04:00"."The 2019-07-01 00:05:00"."The 2019-07-01 00:06:00"."The 2019-07-01 00:07:00"."The 2019-07-01 00:08:00"."The 2019-07-01 00:09:00"."The 2019-07-01 00:10:00"."The 2019-07-01 00:11:00"."The 2019-07-01 00:12:00"."The 2019-07-01 00:13:00"."The 2019-07-01 00:14:00"."The 2019-07-01 00:15:00"."The 2019-07-01 00:16:00"."The 2019-07-01 00:17:00"."The 2019-07-01 00:18:00"."The 2019-07-01 00:19:00"."The 2019-07-01 00:20:00"."The 2019-07-01 00:21:00"."The 2019-07-01 00:22:00"."The 2019-07-01 00:23:00",];const YData = [
        "1.3"."1.2"."1.0"."1.1"."1.3"."0.8"."0.9"."0.9"."1.3"."1.3"."1.2"."1.0"."1.1"."1.3"."0.8"."0.9"."0.9"."1.3"."1.1"."1.3"."0.8"."0.9"."0.9"."1.3",];this.echartObj = {
        tooltip: {
          trigger: "axis".axisPointer: {
            type: "cross".label: {
              backgroundColor: "#6a7985",}}},grid: {
          top: "6%".left: "6%".right: "6%".bottom: "3%".containLabel: true,},xAxis: {
          type: "category".data: XData,
          axisLabel: {
            // Set the calibration labels for the axes.
            formatter(params) {
              let newParamsName = ""; // The final concatenated string
              const paramsNameNumber = params.length; // The number of actual tags
              const provideNumber = 10; // The number of words per line
              const rowNumber = Math.ceil(paramsNameNumber / provideNumber); // To wrap a line, display a few lines, rounded up
              /** * Checks whether the number of labels is greater than the specified number. If yes, line break is performed. If no, equal to or less than, the original label */ is returned
              // The condition is equivalent to rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** loop through each line,p for line */
                // eslint-disable-next-line no-plusplus
                for (let p = 0; p < rowNumber; p++) {
                  let tempStr = ""; // Represents each truncated string
                  const start = p * provideNumber; // Start intercepting position
                  const end = start + provideNumber; // End the intercept position
                  // The index value of the last row is handled specifically here
                  if (p === rowNumber - 1) {
                    // The last time no line breaks
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // Concatenate the string each time and wrap it
                    tempStr = `${params.substring(start, end)}\n`;
                  }
                  newParamsName += tempStr; // The resultant string}}else {
                // Assign the value of the old label to the new label
                newParamsName = params;
              }
              // Return the final string
              returnnewParamsName; }},},yAxis: {
          type: "value",},series: [{data: YData,
            type: "line".smooth: true.// true: a broken line becomes a curve
            itemStyle: { normal: { color: "#47a6ff"}},areaStyle: {
              normal: {
                color: new echart.graphic.LinearGradient(0.0.0.1[// Echart is used here
                  {
                    offset: 0.color: "#47a6ff"}, {offset: 1.color: "#fff",},]),},},},],}; }},mounted() {
    this.loadEcharts(); }};</script><! -- Add"scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>

Copy the code

The result error

Baidu, said:

Echarts 5.0 will report this error. The reason is that there is no LinearGradient method under a graphic object; This can be resolved by lowering the version:

yarn add echarts@4.8. 0
Copy the code

Re-reduce the version after installation

I’m not supposed to install echarts/ Core, nani?

Then install it

yarn add echarts/core
Copy the code

The result is not found package, strange, I went to check the project that used vue-Echarts before, when I used it, I did not use Echarts /core, but the chart can also come out

Vue-echarts, previously used, is a stable version of version 5

yarn add vue-echarts@5.0. 0-beta. 0
Copy the code

Look at the page, alas, the page reported an error

After checking it out, I thought there was a missing component that was not installed

It turns out that it’s the xAxis property and there’s one missing letter, misspelled

We should be more careful and more careful

The effect is as follows:

Now that you’ve seen this, please give me a thumbs up before you go, because your thumbs up means a lot to me

[VUE start] Build vUE project quickly and introduce third-party plug-ins

preface

Quick project creation (Quick walkthrough)

Introducing the element – the UI

The introduction of echarts

Interlude project running error (resolution process)

Related Posts

React Render Props in TypeScript

How to introduce images into Vue pages more gracefully

Use Vue3 and NodeJS to build h5 mobile terminal single page and back-end RESTful project templates