在vue项目中添加vux,less

本文件是在vue init webpack project命令生成框架的基础上添加修改的

添加vux

安装依赖

npm install vux --save
npm install vux-loader --save-dev
npm install less less-loader --save-dev

–save会存放到package.json 中的”dependencies”，而–save-dev会存放到package.json中的”devDependencies”。 
--save是对生产环境所需依赖的声明(开发应用中使用的框架，库) 
比如：jq，react，vue都需要放到这里面 
--save-dev是对开发环境所需依赖的声明(构建工具，测试工具) 
比如：babel，webpack，都放到当前目录

修改build/webpack.base.conf.js

1.引入vux-loader
const vuxLoader = require('vux-loader')

2.原来的 module.exports 代码赋值给变量 webpackConfig

3.导出webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
　　plugins: [{name: 'vux-ui'}]
});

使用

例如：引入import { XHeader, Divider} from "vux";，然后就可以直接使用了<x-header>首页</x-header>

添加less

安装 less 和 less-loader

npm install less less-loader --save-dev

修改build/webpack.base.conf.js

在文件中 module.exports = 的对象 module.rules 后面添加一段：
{
　　test: /.less$/,
　　loader: "style-loader!css-loader!less-loader"
}

引入使用

在代码中的 style 标签中 加上 lang="less" 属性即可使用,也可通过@import引入.less文件