Common vue project loaders and configuration details, vue loading configuration details

Common vue project loaders and configuration details, vue loading configuration details

This article describes common vue project loaders and their configuration details. The details are as follows:

1. Install sass:

1.1 because sass-loader depends on node-sass, you must install node-sass while installing sass-loader.

npm install --save-dev node-sassnpm install --save-dev sass-loader

1.2 modify the <style> label after the installation is complete:

 <style lang="scss"></style>

2. Install axios:

Axios is used for data requests. At Vue1.0 there was an officially recommended ajax plug-in [vue-resource] (https://github.com/pagekit/vue-resource), but since Vue was updated to 2.0, vue-resource will not be updated officially. We recommend that you use axios.

2.1 installation:

npm install axios --save-dev

2.2. Introduce the following in main. js:

import axios from 'axios'Vue.prototype.$http = axios

2.3. Use in components:

This. $ http ({method: 'get', url: 'http: // breadoffer.com/api/artcile', params: {platformCode: 'pc' // used to transmit parameters to the background }}). then (response => {console. log (response )})

3. Install mock:

3.1. installation:

npm install mockjs --save-dev

3.2. Use: Create a mock. js file under src

Import Mock from 'mockjs'; export default Mock. mock ('HTTP: // platform.breadoffer.com/api/oversea', {"data": {"breadActivities | 9": [{"title": "@ csentence (5, 25)", "desc ": "@ paragraph (2)", "beiginTime": "@ date", "endTime": "@ date", "stateName ": "in progress",}],})

3.3. introduce:

Import datas from '.. /mock '// introduce methods: {request () {this. $ http ({method: 'get', url: 'http: // platform.breadoffer.com/api/oversea', params: {courseMaxCount: 2, // set the data returned by the course to 2 teacherMaxCount: 10, // set 10 pieces of data returned by the instructor }}). then (response => {console. log (response )}). catch (error => {console. log (error )})},}

4. Install lib-flexible: -- Implement mobile terminal self-adaptation

4.1 installation:

npm install lib-flexible --save

In the actual development process, px is automatically converted to the rem unit when the flexible plug-in is used. In the vue project, we use the px2rem tool for conversion. Therefore, we need to install the px2rem Loader:

npm install px2rem-loader 

4.2 introduced in main. js:

import 'lib-flexible'

4.3 configure px2rem-loader: (IN build/untils. js)

RemUnit indicates how many pixels 1 rem =. Combined with lib-flexible, we set the px2remLoader option. remUnit is set to 1/10 of the design draft width. Assume that the design draft width is 750, The remUnit is 75, and then add a px2remLoader after cssLoader.

 var px2remLoader = { loader: 'px2rem-loader', options: {  remUnit: 75 } } // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { const loaders = [cssLoader,px2remLoader] if (loader) {  loaders.push({  loader: loader + '-loader',  options: Object.assign({}, loaderOptions, {   sourceMap: options.sourceMap  })  }) }

5. Install sass-resourses-loader

If sass is used in a project, global variables, mixin/function, and so on will be used more or less, how can we set it to a global state to avoid being introduced in each vue file?

5.1 install sass-resources-loader:

npm i sass-resources-loader

5.2 introduced in main. js

import 'lib-flexible'

5.3 configure px2rem-loader: (IN build/untils. js)

Find this comment in the file

// [Https://vue-loader.vuejs.org/en/configurations/extract-css.html] (https://vue-loader.vuejs.org/en/configurations/extract-css.html)

Add the following functions to the annotation:

Function resolveResouce (name) {return path. resolve (_ dirname ,'.. /src/sass/'+ name); // directory of the sass file} function generateSassResourceLoader () {var loaders = [cssLoader, // 'postcss-loader ', 'sass-loader ', {loader: 'sass-resources-loader', options: {// it need a absolute path resources: [resolveResouce ('_ mixin. scss ')]}]; if (options. extract) {return ExtractTextPlugin. extract ({use: loaders, fallback: 'vue-style-loader '})} else {return ['vue-style-loader']. concat (loaders )}}

And run the following code:

 // return { // css: generateLoaders(), // postcss: generateLoaders(), // less: generateLoaders('less'), // sass: generateLoaders('sass', { indentedSyntax: true }), // scss: generateLoaders('sass'), // stylus: generateLoaders('stylus'), // styl: generateLoaders('stylus') // }

Replace:

 return {  css: generateLoaders(),  postcss: generateLoaders(),  less: generateLoaders('less'),  sass: generateSassResourceLoader(),  scss: generateSassResourceLoader(),  stylus: generateLoaders('stylus'),  styl: generateLoaders('stylus') }

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.