I really haven’t updated my blog for a long time, but I haven’t been lazy recently. I have been learning the framework of Vue and making a small project with it. Now I would like to share my interesting small project with you, which is based on Vue 2.0.

inspiration

This is a project related to data visualization. As a student’s head teacher, I need to understand the situation of classmates in all aspects, so I made a questionnaire survey to understand the situation of students in all aspects. Then I came up with the idea of analyzing the group chat records of our class. According to the group chat records, we can get information such as the closeness between classmates and the activity degree of group chat in class. Naturally, I thought I could build a platform to display the data, and since it was data, it would be more intuitive to display it in charts, so I chose the echarts icon library as a compromise. As for why I chose to use the plug-in Vue, I just thought that LEARNING Vue could help me practice my skills, but I found that Vue is really lightweight and easy to use after finishing it. Combining Vuex and VUE-Router, I can basically complete all the requirements in my project.

Online display: http://119.29.57.165:8080/family source: github.com/hieeyh/tong… This tutorial is based on what you already know about VUE. If you don’t know what VUE is, do you want to learn it first

Initial project construction

Start by installing vuE-CLI globally. Vue-cli is vue’s own project build tool. A few simple steps can help you quickly build a Vue project.

npm install -g vue-cliCopy the code

Then, build a VUE project using VUe-CLI

# create a new project based on the "webpack" template $vue init webpack familyCopy the code

Project Document Interpretation

  • In build are the webPack basic configuration files, development environment configuration files, and production configuration files

  • Node_modules are various dependency modules

  • SRC is the VUE component and entry file

  • Static places static files

  • Index.html is the page entry file

Basic page implementation

Once the project is created, you can implement your desired page by modifying the app. vue file in the SRC folder as follows:

<template> <div id="#app"> <! -- Navigation bar --> <my-head></my-head> <my-nav></my-nav> <transition> <router-view></router-view> </transition> <my-foot></my-foot> </div> </template> <script> import myHead from './components/header' import myNav from './components/nav' import myFoot from './components/foot' export default { name: 'app', components: { myHead, myNav, myFoot } } </script>Copy the code

The myHead component is the header of the page, the myNav component is the left navigation bar of the page, the myFoot component is the bottom of the page, and the Router-View component is the view component matching the rendering path in the Vue-Router. The specific implementation of each component can go to github project address to see the source code.

Creating a Configuration Route

Obviously, I want to make a single page application. To use vue-router, first install vue-router and type the following command:

npm install --save vue-routerCopy the code

Then add the routing-related code to the main.js file under the SRC folder as follows:

Import Vue from 'Vue' import App from './App' import VueRouter from 'vue-router' vuue. use(VueRouter) // Define route component const Worldcloud = require('./components/cloud.vue') const Building = require('./components/building.vue') const Canteen = require('./components/canteen.vue') const Selfstudy = require('./components/selfstudy.vue') const Difficult = require('./components/difficult.vue') const Interest = require('./components/interest.vue') const Bedroom = require('./components/bedroom.vue') const Graduate = require('./components/graduate.vue') const Getup = require('./components/getup.vue') const Gotobed = require('./components/gotobed.vue') const Eat = require('./components/eat.vue') const Amuse = require('./components/amuse.vue') const Single = require('./components/single.vue') const Chat = require('./components/chat.vue') const Onlyme = Const routes = [{path: '/', redirect: '/wordcloud'}, {path: '/wordcloud', component: Worldcloud }, { path: '/building', component: Building }, { path: '/canteen', component: Canteen }, { path: '/selfstudy', component: Selfstudy }, { path: '/difficult', component: Difficult }, { path: '/interest', component: Interest }, { path: '/bedroom', component: Bedroom }, { path: '/graduate', component: Graduate }, { path: '/getup', component: Getup }, { path: '/gotobed', component: Gotobed }, { path: '/eat', component: Eat }, { path: '/amuse', component: Amuse }, { path: '/single', component: Single }, { path: '/chat', component: Chat }, { path: '/onlyme', component: Onlyme } ] new Vue({ el: '#app', template: '<App/>', components: { App }, router })Copy the code

As you can see from the configuration of the route map, the root route to the site jumps directly to/WordCloud. The component of route mapping uses Baidu echarts library, which is a very useful chart library.

How to draw

How do I draw with Echarts? In fact, there are many examples on the official website, the following is a simple illustration of the bedroom.vue component as an example, the code is as follows:

<template> <div class="main_content"> <div id="bedroom"></div> </div> </template> <script> import echarts from 'echarts' Export default {data() {return {chart: NULL, opinion: [' Bad learning atmosphere ', 'general learning atmosphere ',' good learning atmosphere '], opinionData: [{value: 26, name: 'poor learning environment'}, {value: 31, name: 'study atmosphere general'}, {value: 8, name: 'learning atmosphere is very good'}]}}, the methods: { drawPie (id) { this.chart = echarts.init(document.getElementById(id)) this.chart.setOption({ title: { text: {fontSize: 24, fontFamily: 'Helvetica', fontWeight: 400 } }, tooltip: { trigger: 'item', formatte: "{b}: {c} ({d}%)" }, toolbox: { feature: { saveAsImage: {}, dataView: {} }, right: 15, top: 10 }, legend: { orient: 'vertical', left: 5, top: 10, data: this.opinion, }, series: [ { name: 'Dormitory Learning Atmosphere ', Type:' PIE ', RADIUS: ['50%', '70%'], Center: ['50%', '60%'], avoidLabelOverlap: false, label: {Emphasis: { show: true, textStyle: { fontSize: '24', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: this.opinionData, itemStyle: { emphasis: { shadowBlur: 10, shadowOffset: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]})}}, mounted() { this.$nextTick(function() { this.drawPie('bedroom') }) } } </script> <style scoped> #bedroom { position: relative; left: 50%; margin-left: -400px; margin-bottom: 70px; width: 800px; height: 600px; border: solid #D01257 1px; box-shadow: 0 0 8px #FB90B7; border-radius: 10px; } </style>Copy the code

Echarts is a single file component of vue. If echarts has been installed, enter the following command to install it:

npm install --save echartsCopy the code

Drawpie (); / / Add a DOM object to the drawpie function. / / Add a DOM object to the drawpie function.

Two instructions

  1. The DOM object received by the drawpie method must have a certain width and height, otherwise the image will not be displayed

  2. Mounted must contain vm.$nextTick to ensure that the instance has been inserted into the document

Implement login function

The login function is implemented based on VUEX (VUE state Management) and browser sessionStorage. First, create a store folder under the SRC folder to store vuex’s Store (storehouse), and create three files store.js, login.js and user.js. Login. js stores login status, user.js stores user login information, and store.js loads login and user modules.

Note: Babel-polyfill (installed first) in store.js will cause an error because Babel only converts new JavaScript syntax by default, not new apis. Global objects such as Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, Promise, and other methods defined on global objects do not transcode. So you must use Babel-Polyfill to provide a shim for the current environment.

Then modify the main.js file to introduce store:

import store from './store/store' ... . new Vue({ el: '#app', template: '<App/>', components: { App }, router, store })Copy the code

Modify the app. vue file as follows:

<template> <div id="#app"> <! Navigation bar --> <my-head></my-head> <my-nav></my-nav> <transition> <router-view></router-view> </transition> <my-mask v-if="canlogin"></my-mask> <my-login v-if="canlogin"></my-login> <my-foot></my-foot> </div> </template> <script> ... import myMask from './components/mask' import myLogin from './components/login' export default { ... data() { return { canlogin: false } }, computed: { canlogin() { return this.$store.state.login.islogin } } } </script>Copy the code

At this point, you’re basically done. Preview by typing NPM run dev on the command line.

Project released

The project can be previewed locally, but how to publish it online? First, type on the command line

npm run buildCopy the code

A dist folder is generated, and in that folder is the code we can distribute, just upload it to your server.