Based on a multi-page mobile scaffold end vueCli3

View Multiple Pages

Based on multi-page scaffold vue-cli3.0 + [email protected] of

Project Address: Click here

Online demo: Click this link

Compilation speed and heat with the new speed is superior to webpack2.0,3.0, but the corresponding memory consumption increases, memory overflow occurs in the node, such as too many pages, use

npm run fix-memory-limit

Then

npm run dev

Project setup

npm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

RUN Build npm: dev   // packaged development environment 
npm RUN Build: DevTest // packaging development and testing environment 
npm RUN Build: the Test // packaged test environment 
npm RUN Build // packaged formal environment

Different packaging environments using different api address and other configuration in the config inside.

Added moving end tools such as mint-ui, 300s click delay, rem, a common header and a bottom, less, store, pages / public_app.js, and a package micro-channel and signature request, etc.

| - dist                              // package directory 
| - src                               // source directory 
| | - Components                    // global components 
| | - utils                         // utility functions. 
| | - arrMethods.js             // Array Functions 
| | - back.js                   // Returns the event 
| | - request.js                // request package 
| | - changeUrl.js                 // page jump 
| | - eleMethods .js             // dom method 
| | - time_slot_change.js       // time method
| | - Pages and the                         // Page View 
| | - Home                      // Home Modules folder 
| | - index                 // Home folder 
| | - index.vue         // Home template file 
| | - index.js          / / Home js file 
| | - home1                 // Home folder inside pages 
| | - home1.vue         // in the Home page template file 
| | - home1.js          // within the home page js file 
| | - the Discover                  / / discovery module folder 
| | - the discover              //Folders found 
| | - discover.vue      // discovery template file 
| | - discover.js       // find js file 
| | - public_app.js             // public js, may lead the public css, vue ui libraries 
| - .gitignore                        // ignore file 
| - page.config.js                    // use node reads the pages folder to folder configuration CLI3 VUE 
| - vue.config.js                     // VUE cli configuration 
| - - README.md                         // Description 
| - package.json                      // resource Kit

Explanation

  • Reset styles css / common.less years.
  • Added axios request library and do a simple interception.
  • Added fastclick solve mobile end Click 300ms delay.
  • Added mint-ui libraries, you want to add your own UI library, references to the pages / public_app.js.
  • Rem movable end is adapted to add, to set the width of the design draft 750,1rem = 30px, may statics / js / public.js modify.
  • Added vue-lazyload picture lazy loading, viewing pages / public_app.js in
  • Please add a page in the pages folder under the new directory, and .vue js placed on the inside (recommended to copy an existing folder change the name of development).

note

  Since version cnpm and npm There are differences that may arise using cnpm installation depends not run the project, it is best to use npm install

Guess you like

Origin www.cnblogs.com/linfblog/p/12148044.html