VUE.JS+KOA2 Mobile e-commerce combat 2

introducing the Vant component library

In the work, there are many of their own library of components, but before the development of these will choose a stable set of open source as a wheel as the basis (big companies are capable of making their own wheels). Because we want to be an e-commerce system, we chose the vant as the basic component and styling component of Vue.

　Installing Vant

NPM I Vant-s

Once installed, take a look at our Package.json file and confirm the version.

First method of introducing vant (not recommended)

Once vant is installed, it can be introduced using previously used methods-a way to introduce it globally.
The global introduction is done directly in Src/main.js.

Import vant from ' vant' vant/lib/vant-css/index.css 'vue.use (vant)

Simple three lines of code can already be introduced into the vant, but this is not elegant, also makes the final package release will increase the size of the packet, Vue's spa first screen opened when the original is somewhat slow, so it is not recommended to use this method to introduce.

Elegant introduction of Vant

Vant is a support for Babel-plugin-import introduced, it allows us to introduce component modules on demand, and does not manage our style, now the main introduction method of Vue Project component library.
Installing Babel-plugin-import

NPM I babel-plugin-import-d

Configuring plugins (Plug-in) in. BABELRC

"Plugins": [    "Transform-vue-jsx",     "Transform-runtime",    ["import", {" LibraryName ":" Vant "," style ":true}]  ]

Use Vant components on demand

After we set up the. BABELRC, the Vant framework can be introduced as needed. For example, now we're introducing a Button component.
Add the following code to the Src/main.js:

Import {Button} from ' Vant '

With this code, we can add in the required component page Button .

<van-button type= "PRIMARY" > main buttons </van-button>

VUE.JS+KOA2 Mobile e-commerce combat 2