Practical project in vue+iview+less+echarts (detailed tutorial)

This article is a summary of the author’s experience and pitfalls after learning vue iview less echarts to create a small system. It is worth learning and reference.

First of all, let’s share the source code: https://github.com/kunfan96/vue-admin

For a novice like me who just started using Vue to do projects, in the component data definition I made a lot of mistakes, especially on this page

when I redefined the predetermined data when performing data selection, resulting in very messy data, specifically in storeDetail. Lines 14--321 of vue, I feel that it is very necessary to cut out so much data, and use js to perform calculations to complete the data. This relatively reduces the background tasks a lot, but only increases the amount of front-end rendering data

Data communication issues between parent and child components

When I first started writing Modal, the data shared by the modal parent and child components was switched on and off. Then when it was closed, the child component changed the data passed by the parent component. An error will be reported, which is the value of props

##. There are two solutions here, one is to use vuex to share the Modal switch (it is a bit convoluted to write, and the code is not concise) , Another best way is to create a mixins folder and operate in the js of mixins. The key code--->mixins/closeModal.js--->this.$emit('on-cancel',false ), the sub-component causes the parent component to on-cancel through emit and responds to an event. This writing allows other sub-components to use the Modal shared code

Component naming method

Here I have defined the folders myself using big camel case naming, such as the folders Store and Shop, and the files and variables using small camel case naming, if storeDetail.vue, parcelList.vue

Use flex more

In 2018, flex will be the mainstream, and there is no need to pay attention to compatibility issues. Pay more attention to the grid layout, which may also become popular

Multi-use lazy loading

Using lazy loading is convenient and can bring a better user experience when the bandwidth is low. Referring to the iview admin code, I unified the usage of lazy loading as

{
 path:"/parcel-list",
 meta:{
  group:"parcel",
  item:"parcel-list"
 },
 component: resolve =>import('@/pages/Parcel/parcelList')
 }

Sidebar refresh problem

It should be noted here that the component has given two bound variables active-name and open-names. Here we are When setting the route, add

meta:{
  group:"",
  item:""
 }

Through this.$route.meta.group, this.$route.meta.item, you can match active-name and open-names to achieve no-refresh operation

Remember npm run build

iview has some problems. Sometimes it is necessary to modify the Modal style. I clearly changed the npm run dev style successfully after modifying the style (without scoped) tag. , but the style is restored after the build. Later, the style can be modified successfully by placing it in the static folder. Also, the table cannot be centered after the build. In short, it is a good thing to discover and solve the multi-build problem early (don’t forget to Department~~~)

Use of Echarts in VUE

There is a pitfall here. When instantiating echarts, there is a piece of code in chart.vue

<p :id="chart.id"></p>
 let myChart=this.$echarts.init(document.getElementById(this.chart.id))

I noticed that there is an id here. The reason why I do this here is to set the id of the component as a variable mainly because the echarts official website document states that the id of p instantiated by echarts in the web page is unique. Because I This chars component needs to be called multiple times by the same component, so the id can only be set as a variable (this is really a trap, I adjusted it many times and read the official documentation several times before I figured it out...). In addition, it is best to Encapsulate the data of echars

Write more public components

The essence of the framework is to reduce code. When the public components are written and called, use data rendering. Okay, this can greatly reduce the amount of code, and it is also in line with the idea of ​​MVVM

The above is what I compiled for everyone, I hope it will be helpful to everyone in the future.

Related articles:

What are the process steps for publishing a vue project online through Baidu’s BAE after being packaged?

What are the steps to use content projection to input the ngForOf template to the component through Angular?

What are the steps to set the request and return the interceptor through axios global request parameters?

The above is the detailed content of Practical project in vue+iview+less+echarts (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!