At the beginning of learning VUE, I wrote a Todolist as a demo. Later, I rewrote and strengthened Todolist to make it into a mobile terminalBook reading management AppNow, I would like to share with you this entry field project




vue.png

A Preliminary study of the project

Project Overview:





Homepage. PNG





The sidebar. PNG





Page for details. The PNG

Project address: github.com/PengLL/Book… Development environment:

  • The node 6.9.2
  • NPM 4.2.0
  • Webpack 2.2.1

Start a project with Git:

git clone https://github.com/PengLL/BookRecord.git

cd BookRecord

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

Copy the code

Code structure of the project

The project framework is a vuE-CLI template, but does not use esLint,test, Karma, etc., and then adds some Loader and NPM packages based on actual requirements





Code structure.png

Tips:

1. We can see that the directory structure is almost the same as the official Vue WebPack template, with the exception of SRC

SRC /assets // self-written JS, CSS library files, images, etc. SRC/Store // Vuex status manager contentsCopy the code

2. The project supports SASS, so Node-sass and Sass-loader 3 are added to the template. For multi-screen adaptation on mobile, add flexible-.js from mobile to static/ JS to use REM 4. Vuex is added to the template. 5. Better Scroll is used to handle scroll events on the mobile end. 6

Iii. Project Analysis

1. From the project structure and Tips in the previous part, we can see that although this project is small, it has all the five organs, including mobile terminal multi-screen adaptation and basic event processing. Through this small project, we can practice the following contents

  • vue2.0
  • vuex
  • vue-router
  • ES6
  • webpack
  • More screen adaptation
  • Mobile event handling

2. We use Localstorage to simulate the increase, deletion, change and check of back-end data

3. In order to distinguish it from other third-party code, Pl is used as the prefix. The CSS class name of the component starts with the component name, and the constant names of mutation-types in VUEX are named according to the function. So many names are relatively long, easy to see the name of meaning.

4. All components of the book reading management App:





Components. PNG

5.vuex





vuex.png

The author does not correspond one JS file to one component in vuex modules. At present, only three modules are divided according to the complexity of the actual state. If functions are added to some components in the future, the internal structure of VUex needs to be rebuilt. The author of the official Vuex demo originally referred to the official recommended code structure.

6.vue-router





vue-rouer.png

Due to the simplicity of the project, only two components jump, so vue-Router has only one index.js file

Four summarizes

So far as the basic structure of the whole project is concerned, those who are interested in in-depth understanding need to look at the actual code, the article can not elaborate some logical structure or more details. But there are a few small lessons I can share outside of the project: WHEN I start writing something, I always finish it as soon as it works, but that way I don’t get any fundamental changes or improvements. Then we realized that we needed to review the code we had written, analyze the areas that could be improved, constantly optimize our projects, and try to make our code readable, elegant, and efficient. Every month, I look at my old code and see how bad I was a month ago.

Finally, if the field program has helped you, don’t be stingyYour star,