vue-cli2 需要引入的插件集合

一：Vue中引入less
1，首先安装less与less-loader

npm install less less-loader

2，其次配置loader。在base.config.js中新增rules

{
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader",
      },

3，再次使用：

<style scoped lang="less">//注意：需指定为less
  div {
    font-size: 14px;
  }
</style>

二：vue 中引入axios
首先，有时候直接安装 axios 在 vuecil 会报错
先安装！

npm install axios

然后！

npm install --save axios vue-axios

配置模板！

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)

三：vue添加element-ui

1、首先安装 element-ui ，

npm i element-ui -S

2，在src/main.js中添加代码

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

3、然后在.vue文件里就直接可以用了

四：lib-flexible + rem，实现移动端自适应

1，安装flexible

npm install lib-flexible --save

2，在项目入口文件main.js中添加如下代码，引入flexible

import 'lib-flexible'

3，px 转 rem ，安装px2rem-loader

npm install px2rem-loader --save-dev

4，然后在vue-cli项目找到built/utils文件，在里面加上以下代码：

const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75     // (这里是指设计稿的宽度为 750 / 10)
  }
}

5,然后在generateLoaders函数里面插入px2remLoader ，再重启 npm run dev服务即可。

function generateLoaders (loader, loaderOptions) {
      const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

vue-cli2 需要引入的插件集合

猜你喜欢