This year is a popular year for VUE. In my spare time, I wrote a simple APP application using vUE family bucket + Vuxui framework. First of all, let’s have a look at the effect (PS: data comes from nuggets).








The above is the basic renderings used in the project

Vuex => State management (PS: Because the project is relatively small, there is no specific use of VUex, just store data locally, to display in the page, Vux => UI framework (PS: I think VUX is not suitable for beginners, it is difficult to use, I suggest using a relatively simple UI framework, such as vue-ydui, mint-UI...) Vue-cli2. x PS: Although vue3.0 scaffolding comes out, but there is no specific documentation, webpack also need to configure their own, it is difficult to get started, it is recommended to use vue2.x version scaffoldingCopy the code


First of all,

Vue Init Webpack project nameCopy the code

The second step

Write down the folders and routes you need to useCopy the code





Why do I want to package a popover plug-in, because VUX I also just use, then look at a face of muddleforce, so I packaged a simple popover plug-in…

There is no difficulty in the code, there is no a lot of SAO operation, only for people who just contact VUE, the code is not correct, but also ask you to correct


First of all, as soon as I hear the package plug-in, most people think it is very difficult, in fact, it is not so difficult, because of my limited technology, so I use the native package plug-in (PS: if you have a good method, please give advice)



The next step is to encapsulate some commonly used functions so that they can be used. Here I only encapsulate the verification phone number, email address and password (password is almost the same as no encapsulation, if you like, you can try it yourself).



We introduced vue only to use the popover plugin that is mounted on the vue prototype. Of course, we can also import dilog.js and use the methods in it, but since it is mounted on the Vue prototype, let's use it to the best of our ability'vue'=> Import vUE, use vue prototype method vue. Prototype.$diaLog.errfunctio () => Use the functions mounted on the Vue prototypeCopy the code


The landing page and game page use a simple CSS3 animation, so if you’re interested, try it out for yourself




No UI some pages are ugly, please forgive me, I wrote some simple under refresh, loading and other operations, below

Look at the code



This project makes full use of component reuse, login, registration to retrieve the password of a common component

The home page and discovery page share one component,

It looks messy, but avoids code clutter

Routing is used in the project and components are lazily loaded

eg:


// Game route lazy loading {path:'/playGame',      name: 'playGame',      component: resolve => require(['@/page/playGame/playGame'], resolve),      meta: {        isShow: false}}, // components: {findList: resolve => require(["./components/findList"], resolve)}, // Lazy loading is used here just as an example of how fast the first screen loads after the code is packedCopy the code

The above is all the code, later uploaded to Github for your reference

Want to study together can leave a message below, welcome you big guy advice correction


end.