本文件是在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文件