本文件是在vue init webpack project
命令生成框架的基礎(chǔ)上添加修改的
添加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是對生產(chǎn)環(huán)境所需依賴的聲明(開發(fā)應(yīng)用中使用的框架惕蹄,庫)
比如:jq矗钟,react,vue都需要放到這里面
--save-dev是對開發(fā)環(huán)境所需依賴的聲明(構(gòu)建工具壹将,測試工具)
比如:babel灰署,webpack,都放到當(dāng)前目錄
修改build/webpack.base.conf.js
1.引入vux-loader
const vuxLoader = require('vux-loader')
2.原來的 module.exports 代碼賦值給變量 webpackConfig
3.導(dǎo)出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 標(biāo)簽中 加上 lang="less" 屬性即可使用,也可通過@import引入.less文件