vue使用vux的配置

1.根据vux文档直接安装

  1. 如果还没安装vue脚手架 先在cmd中执行 npm install vue-cli -g
    创建名为 demo 的模板 vue init airyland/vux2 demo
    进入项目项目文件夹 cd demo
    开始安装依赖文件 npm install --registry=https://registry.npm.taobao.org (在项目文件夹中直接cnpm install 启动时会报错)
    运行项目 npm run dev

2.在已创建的Vue工程里引入vux

1.在项目文件夹中打开里cmd,执行 npm install vux --save。
2.安装vux-loader,项目文件夹运行 npm install vux-loader --save-dev。
3.安装less-loader以正确编译less源码 npm install less less-loader --save-dev。
4.安装 yaml-loader 以正确进行语言文件读取 npm install yaml-loader --save-dev。
5.添加 viewport meta 在index.html中,把原来的meat标签替换为:(项目文件夹下的index.html)
6.在build/webpack.base.conf.js 文件进行配置
(1) 在module.exports上面一行添加
const vuxLoader = require(‘vux-loader’)
(2)然后将原来的module.exports 改为 const webpackConfig。例:const webpackConfig = {…} ({}中的内容不变)
(3) 最后在此js文件的最后面添加下面的代码
module.exports = vuxLoader.merge(webpackConfig, {
  plugins: [‘vux-ui’, ‘progress-bar’, ‘duplicate-style’]
})
6.添加 Fastclick 移除移动端点击延迟,在项目文件夹下的src目录找到main.js,在main.js文件中添加 const FastClick = require(‘fastclick’); FastClick.attach(document.body)。(需要安装依赖 cnpm install fastclick --save)
7.引入 reset.less,默认样式不包含reset,并且部分用户自己有一套reset样式,因此需要在项目文件夹下的src文件夹中的App.vue进行手动引入

8.重新启动项目。
9.按需引入组件import { Group, Cell} from ‘vux’,正常开发。

猜你喜欢

转载自blog.csdn.net/qq_40018437/article/details/88110614