Shulou(Shulou.com)06/03 Report--

Vue+iview+less+echarts example analysis, I believe that many inexperienced people do not know what to do, so this article summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

For a rookie like me who just started a project with Vue, I made a lot of mistakes in the definition of component data, especially on this page.

In the process of data selection, we redefine the defined data, resulting in very disorganized data. Specifically in line 14 of storeDetail.vue, I feel that it is very necessary to cut so much data and use js to complete the data. Here, the background task is relatively reduced, but the amount of data rendered by the front end is increased.

Data communication between parent and child components

When you first write Modal, the data shared by the parent and child components of the Modal switch modal, and then when the child component changes the data passed by the parent component, it will report an error, that is, the value of props.

There are two solutions here. One is to use vuex to share the switch of Modal (it is a bit winding to write, and the code is not concise). The other best way is to set up a mixins folder and operate in the js of mixins. The key code is-- > mixins/closeModal.js--- > this.$emit ('on-cancel',false). The child component uses emit to make the parent component on-cancel and respond to an event. Writing in this way allows multiple other subcomponents to use Modal common code

Component naming method

Here I define the folder using the big hump naming method, such as the folder Store,Shop, and the small hump naming method for files and variables, if storeDetail.vue,parcelList.vue

Multi-purpose flex

Flex will be the mainstream in 2018, there is no need to pay attention to compatibility issues, and pay more attention to grind layout, may also be popular

Multi-purpose lazy loading

Using lazy loading to facilitate low bandwidth can bring a better user experience. Referring to the iview admin code, I unify the usage of lazy loading as

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

Sidebar refresh problem

Notice here that the component gives two bound variables active-name,open-names, which we add when routing is set

Meta: {group: ", item:"}

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

Remember more npm run build

There is something wrong with the iview component. Sometimes it is to modify the Modal style. I obviously changed the npm run dev style successfully after the style (without scoped) tag, but the style was restored after build. Later, the style can be successfully modified in a static folder, and the table cannot be centered after the build. In short, it is a good thing to solve the multi-build problem as early as possible.

The use of Echarts in VUE

There is a hole here, and there is a piece of code in chart.vue when echarts is instantiated

Let myChart=this.$echarts.init (document.getElementById (this.chart.id))

I noticed that there is an id, the reason why I do so here, the component id is set as a variable mainly echarts official website document written in the web page echarts instantiated div id is unique, because my chars component needs to be called by the same component many times so can only set id as a variable (this real pit, adjusted to read the official document several times to know. In addition, it is best to encapsulate the echars data.

Write more common components

The essence of the framework is to reduce the code. When the common components are written and called, you can use the data rendering, so that the amount of code can be greatly reduced, which is also in line with the idea of MVVM.

After reading the above, have you mastered the method of example analysis of vue+iview+less+echarts? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.