<1>. 在项目里安装vux

  npm install vux --save

<2>. 安装vux-loader (这个vux文档似乎没介绍,当初没安装结果报了一堆错误)

  npm install vux-loader --save-dev

<3>. 安装less-loader  (这个是用以正确编译less源码,否则会出现 ' Cannot GET / ')

  npm install less less-loader --save-dev

<4>. 安装yaml-loader  (以正确进行语言文件读取, 我没安装似乎也没报错)

  npm install yaml-loader --save-dev

<5>. 在build/webpack.base.conf.js 文件进行配置

  const vuxLoader = require('vux-loader')

  const webpackConfig = originalConfig

  // 原来的 module.exports 代码赋值给变量 webpackConfig,
 
  //即将原来的module.exports 改为 const webpackConfig

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

 
 

摘自:http://www.jb51.net/article/113003.htm

Vue中使用vux的配置,分为两种情况:

一、根据vux文档直接安装,无需手动配置

1
2
3
4
5
npm install vue-cli -g  // 如果还没安装
vue init airyland/vux2 my-project  // 创建名为 my-project 的模板
cd my-project  // 进入项目
npm install --registry=https://registry.npm.taobao.org  // 开始安装
npm run dev  // 运行项目

二、想在已创建的Vue工程里引入vue组件

<1>. 在项目里安装vux

1
npm install vux --save

<2>. 安装vux-loader (这个vux文档似乎没介绍,当初没安装结果报了一堆错误)

1
npm install vux-loader --save-dev

<3>. 安装less-loader  (这个是用以正确编译less源码,否则会出现 ' Cannot GET / ')

1
npm install less less-loader --save-dev

<4>. 安装yaml-loader  (以正确进行语言文件读取, 我没安装似乎也没报错)

1
npm install yaml-loader --save-dev

<5>. 在build/webpack.base.conf.js 文件进行配置

1
2
3
4
5
6
7
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig
 
// 原来的 module.exports 代码赋值给变量 webpackConfig,
 
//即将原来的module.exports 改为 const webpackConfig
module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })

想在已创建的Vue工程里引入vux组件的更多相关文章

  1. SAP SD如何将销售订单其它ITEM加入到一个已创建好的交货单里

    SAP SD如何将销售订单其它ITEM加入到一个已创建好的交货单里 如下的销售订单,有多个ITEM, 为其中的第一个ITEM创建了DN 80016362, 如果业务发现需要修改该交货单,将销售订单里的 ...

  2. 脚手架搭建的vue项目里引入jquery和bootstrap

    引入jquery: 1.在cmd输入:npm install jquery,回车,等待.. 2.在webpack.base.conf.js里进行如下操作: 3.在webpack.prod.conf.j ...

  3. 详细讲解vue.js里的父子组件通信(props和$emit)

    在进入这个话题之前,首先我们先来想一下在vue里,如何写一个父子组件.为了简单起见,下面的代码我都没用脚手架来构建项目,直接在html文件里引入vue.js来作为例子.父子组件的写法如下: <d ...

  4. 如何在vue项目中引入elementUI组件

    个人博客同步文章 https://mr-houzi.com/2018/02/... 前提:已经安装好Vue 初始化vue vue init webpack itemname 运行初始化demo 运行一 ...

  5. vue工程中使用iconfont在线CDN不生效的问题

    为什么在vue工程中引入iconfont有时候不生效呢? 请依次使用以下方法 1. 在index.html中引入在线资源 <!DOCTYPE html> <html lang=&qu ...

  6. vue - vue-cli脚手架项目中组件的使用

    在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...

  7. 使用vue-cli创建vue工程

    在Windows环境下,打开命令行窗口,跳转至想创建工程的路径. 如:D:\MyWork\22_Github\rexel-cn\rexel-jarvis 创建vue工程,命令:vue create r ...

  8. Xcode 8 修改已创建工程的 organizion name

    在创建工程时,会需要填写公司信息,对于已创建的工程,新建文件时,公司信息显示为刚开始创建的公司信息.如果需要对公司名称进行修改,需进行以下 可以 打开 工程名.xcodeproj 文件 (显示包内容) ...

  9. 创建Vue工程常用的命令

    创建一个vue项目的步骤 1.创建一个名称为myapp的工程 vue init webpack myapp 2.进入工程目录 cd myapp 3.安装 vue-router npm install ...

随机推荐

  1. 面试----你可以手写一个promise吗

    参考:https://www.jianshu.com/p/473cd754311f <!DOCTYPE html> <html> <head> <meta c ...

  2. 让vue-cli脚手架搭建的项目可以处理vue文件中postcss语法

    图中&属于postcss的语法,这样书写样式可以清楚的看出选择器之前的层级关系,非常好用. 在利用vue-cli脚手架搭建的项目中如果不配置是不支持这种写法的,这样写不会报错,但是样式不生效. ...

  3. 搭建golang学习环境,并用chrome headless获取网页内容

    想用go练练手(我是win7系统,已从https://studygolang.com/dl 下载了go安装包并安装,比较简单,不详述. 但作为边民,没法go get ,又不敢用梯子,幸亏有爱心大牛们的 ...

  4. NET缓存框架CacheManager在混合式开发框架中的应用(1)-CacheManager的介绍和使用

    在我们开发的很多分布式项目里面(如基于WCF服务.Web API服务方式),由于数据提供涉及到数据库的相关操作,如果客户端的并发数量超过一定的数量,那么数据库的请求处理则以爆发式增长,如果数据库服务器 ...

  5. 【转】vmware的macos中apple ID一直登陆不上解决 ---(伪造smbios设备信息)

    伪造smbios设备信息 原文网址:http://www.insanelymac.com/forum/topic/292170-how-to-spoof-real-mac-in-vmware/page ...

  6. JS中navigator对象详解

    <code class="language-html"><!doctype html> <html> <head> <meta ...

  7. Python排序算法——插入排序

    有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10787464.html 一.插入排序(Inse ...

  8. gooderp安装

    在做ODOO的前提下需要PostgreSQL,  SO.... #!/bin/bashPID=`echo $$`echo -e "\033[35m该脚本只在CentOS 7.4.1708版本 ...

  9. Python这么强大, 怎样才能快速入坑?

    作为一种年轻的编程语言,Python为何能在短短几年的时间内就以迅雷不及掩耳之势驰骋编程界?答案很简单,在人工智能时代,AlphaGo 都在使用的 Python语言,是最接近 AI 的编程语言. 随着 ...

  10. Generative Adversarial Nets[LSGAN]

    0 背景 在这之前大家在训练GAN的时候,使用的loss函数都是sigmoid_cross_entropy_loss函数,然而xudon mao等人发现当使用伪造样本去更新生成器(且此时伪造样本也被判 ...