preface

I have been learning VUE for more than half a year. Because I am not too busy recently, I want to use VUE to reconstruct the previous e-commerce project and write a mobile version, which mainly includes: user module, commodity module, shopping cart module, order module.

Project Address: [Github address]

Technology stack

vue2 + vuex + vue-router + webpack + ES6/7 + axios + sass

Framework: VUE bucket was used for development, vue-Router was used for routing, axiOS plug-in was used for data request, and ES6/7 was used for development.

Mobile adaptation: Since it is a Web-app, it needs to be compatible with the screen sizes of different devices. The flexible solution recommended by Handtao is used here, which dynamically sets the font size of the root element and uses REM for mobile adaptation. Since rem is used for layout, we are usually given 640px and 750px as standard, and it is difficult to convert the PX size to REM when writing, so we use PostCSS-px2REM, which will automatically convert PX to REM when compiling.

CSS preprocessor: Currently, the popular CSS preprocessing methods are stylus, LESS, and SASS. Personally, THERE is little difference between LESS and SASS. Stylus indent syntax is a bit unaccustomed, so SASS is selected for style writing.

Background interface: the interface provided by THE MOOC network is used here: interface document, relevant tutorial recommendation: e-commerce project combat

Cross-domain processing: Because of the external interface used, the front-end project runs at a different address than the interface accesses, and the browser’s same-origin policy forces us to deal with cross-domain, so cross-domain processing needs to be simple.

  1. In development mode: You need to configure the index. Js file in config
proxyTable: {
     '/api': {  
         target: 'http://test.happymmall.com', // Source address changeOrigin:true// Change the source pathRewrite: {'^/api': ' '// Path overwrite}}}Copy the code

When making an interface request, add/API before the interface path. After compiling, / API will be overwritten to the interface address on the line

2. In production mode: Nignx is used here. You need to install Nignx on the remote server and configure location in the nginx.conf file.

Function is introduced

Vue is mainly used here to reconstruct the mooC online e-commerce project before and make a mobile version with basically the same functions, mainly including 4 modules:

User module: login, registration, personal information modification, password retrieval, update password.

Product module: home page, classification, product search, product details

Shopping cart module: shopping cart goods increase, delete, all, single, multi – selection

Order module: including address management, submit orders, order list, details, cancel orders and so on

Here I wanted to be a payment module, but I found that the two-dimensional code returned by the interface was invalid, so I only went to the payment details.

Follow-up:

  1. The basic functions are simply realized here. Of course, as a Web-app, user experience comes first, and the performance of the project will continue to be optimized in the future
  2. The data request piece uses the AXIos plug-in, which will be implemented later using the native FECth

Project presentations


    








Project running

# install dependencies
npm install

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

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --reportCopy the code