vue 项目常用加载器及配置详解

vue 项目常用加载器及配置详解

本文介绍了vue 项目常用加载器及配置详解，分享给大家，具体如下：

1.安装sass:

1.1 由于sass-loader依赖于node-sass，所以在安装sass-loader的同时还需安装node-sass

npm install --save-dev node-sass

npm install --save-dev sass-loader

1.2 安装完成后修改

2.安装axios:

axios用于数据请求，在Vue1.0的时候有一个官方推荐的 ajax 插件 [vue-resource](https://github.com/pagekit/vue-resource)，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource，推荐使用axios。

2.1 安装：

npm install axios --save-dev

2.2. 在main.js中引入：

import axios from 'axios'

Vue.prototype.$http = axios

2.3. 在组件中使用：

this.$http({

method:'get',

url:'http://breadoffer.com/api/artcile',

params:{

platformCode:'pc' // 用于向后台传参

}

}).then(response => {

console.log(response)

})

3.安装mock:

3.1. 安装：

npm install mockjs --save-dev

3.2. 使用：在src下新建mock.js文件

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":"进行中",

}],

}

})

3.3. 在需要数据的组件中引入：

import datas from '../mock' // 根据自己实际目录引入

methods: {

request() {

this.$http({

method: 'get',

url: 'http://platform.breadoffer.com/api/oversea',

params: {

courseMaxCount: 2, //设置课程返回的数据为2条

teacherMaxCount: 10, //设置导师返回的数据为10条

}

}).then(response => {

console.log(response)

}).catch(error => {

console.log(error)

})

},

}

4.安装 lib-flexible: --实现移动端自适应

4.1 安装：

npm install lib-flexible --save

在实际开发过程中，使用flexible插件时会自动把px转换成rem单位，在vue项目中我们使用px2rem这个工具进行转换，所以需要安装px2rem加载器：

npm install px2rem-loader

4.2 在main.js中引入：

import 'lib-flexible'

4.3 配置px2rem-loader: （在build/untils.jhttp://s）

remUnit 的意思是1rem=多少像素， 结合lib-flexible，我们将px2remLoader的option.remUnit 设置成设计稿宽度的1/10，假设我们的设计稿宽度是750，则remUnit为75，然后在cssLoader后面加一个px2remLoader即可

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.安装 sass-resourses-loader

如果在项目中使用sass，或多或少会用到全局的变量，mixin/function等，那么如何将其设为全局状态，以避免在每个vue文件中引入？

5.1 安装 sass-resources-loader:

npm i sass-resources-loader

5.2 在main.js中引入

import 'lib-flexible'

5.3 配置px2rem-loader: （在build/untils.js）

在文件中找到这句注释

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

在注释上面添加如下函数：

function resolveResouce(name) {

return path.resolve(__dirname, '../src/sass/' + name); // sass文件所在目录

}

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)

}

}

并且将以下代码

// return {

// css: generateLoaders(),

// postcss: generateLoaders(),

// less: generateLoaders('less'),

// sass: generateLoaders('sass', { indentedSyntax: true }),

// scss: generateLoaders('sass'),

// stylus: generateLoaders('stylus'),

// styl: generateLoaders('stylus')

// }

替换为：

return {

css: generateLoaders(),

postcss: generateLoaders(),

less: generateLoaders('less'),

sass: generateSassResourceLoader(),

scss: generateSassResourceLoader(),

stylus: generateLoaders('stylus'),

styl: generateLoaders('stylus')

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。