在最近的项目中,引用了vux,在可拓展性以及复用性,都算是比较优秀的框架了。但是美中不足的是对于vux在对于vue-cli3.0的跟进还没有同步 需要自己做下修改,同比 有赞的vant 以及 iview 都有了对于vue-cli3.0的兼容了

  现记录如下:

 一、安装vue-cli 3

  首先官方文档:https://cli.vuejs.org/

  官方文档包含了很多的内容,很靠谱,比较全面,第一步当然是把官方文档看一遍。

 安装

  Node 版本要求

  Vue CLI 需要 Node.js 8.9 或更高版本 (推荐LTS)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

  可以使用下列任一命令安装这个新的包:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

  创建项目

  运行以下命令来创建一个新项目. 选择babel,eslint 还有router 等等!

  vue create demo

  安装之后执行就可以使用了

cd 项目名

npm run serve

  

 二、配置vux
  在网上搜了会,发现几乎都是vue-cli旧版的配置方法,有一些已经不能用了,在这里整理下正确的配置方法

  安装各插件

  1、在项目里面安装vux

npm install vux --save

  2、安装vux-loader(必须安装)

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

  配置vux环境

  这里注意由于vue-cli3使用的是webpack4而且更新过vue-loader,所以vux使用起来会存在一些兼容的问题,这里需要额外配置一下。

  官方更新过vue/cli3.x 的vue-loader,正常配置会导致加载错误。所以需要手动指定vue-loader的版本来解决加载问题。

yarn add vue-loader@14.2. -D
or
npm install vue-loader@14.2. -D

  在packageage同级目录下新建一个文件vue.config.js

  vue-cli3.x的一些服务配置整个的结构都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置提供了vue.config.js。那么问题来了,对于这么一个入口,肯定不能直接按照vux-loader的方法直接在配置文件置空webpackConfig了。而单独组件引用的话又被告知         使用错误(事实上都直接报错了,因为没有正确对于组件的load)。
       参照vux-loader文档的配置说明,那么就是merge以下vux-loader的配置到webpackConfig里面呗,接下来就简单了。我们只需要在vue.config.js文件中的webpackConfig的配置中mergevux-loader就行了

  根据官方文档,在文件里加入以下内容:

module.exports = {
configureWebpack: config => {
require('vux-loader').merge(config, {
options: {},
plugins: ['vux-ui']
})
}
}

  目前就可以使用了, 不过到目前为止 还是有些小问题 提的issue 还没有回应 如果采用解构的方式在main.js 引用 并不能成功引用  

  可以采用这种方式(示例)

import Popup from 'vux/src/components/popup'
import Alert from 'vux/src/components/alert'
import Confirm from 'vux/src/components/confirm'
import Cell from 'vux/src/components/cell'

  

ok  就酱紫~~~

vue-cli 3.0脚手架与vux的配合使用的更多相关文章

  1. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  2. vue/cli 3.0脚手架搭建

    在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli  安装成功:  安装完成 ...

  3. vue/cli 3.0 脚手架【进阶】 使用 amfe-flexible 和 postcss-px2rem进行移动端适

    安装vue-cli3   npm install -g @vue/cli 创建项目 vue-cli-test 脚手架-项目-成功-运行项目 基于vue-cli配置移动端自适应 转自:http://hj ...

  4. 【1】vue/cli 3.0 脚手架 及cube-ui 安装

    安装 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+).你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本. 检查node版本: $ ...

  5. @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

    目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...

  6. 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因

    1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...

  7. vue cli 4.0.5 的使用

    vue cli 4.0.5 的使用 现在的 vue 脚手架已经升级到4.0的版本了,前两日vue 刚发布了3.0版本,我看了一下cli 4 和cli 3 没什么区别,既然这样,就只总结一下vue cl ...

  8. 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

    译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...

  9. VUE CLI 3.0 安装及创建项目

    一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/   详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...

随机推荐

  1. python读取文件

    请参考:http://www.cnblogs.com/sysuoyj/archive/2012/03/14/2395789.html

  2. Hibernate---数据操作示例BY实体类注释

    通过实体的映射文件创建表的示例,除了基本jar包外,还需要jar包如下 ejb3-persistence.jar.hibernate-annotations.jar这两个包均在hibernate-an ...

  3. Spring---资源访问工具类

    JDK所提供的访问资源的类并不能很好的满足各种底层资源的访问需求,因此,Spring设计了一个Resource接口,它为应用提供了更强大的访问底层资源的能力 主要方法 boolean exists() ...

  4. java跨服务器请求url获得数据

    在项目中,有时需要通过请求远程服务器上的url获取数据(前提是程序所在服务器可以和url服务器ping成功), 用java在后台发送请求时,用到了java.net.URL, java.net.URLC ...

  5. gprof使用介绍 (gcc -pg) [转]

    原文出处: http://blog.csdn.net/unbutun/article/details/6609498 linux服务端编程,性能总是不可避免要思考的问题. 而单机(严格的说是单核)单线 ...

  6. 抓取网站访问者的QQ号码

    开源,是一种精神.但不开源,并不是没有精神,而可能是代码写得惨不忍睹,我属于后者.(首先申明:对代码提出意见可接受,虚心接受,但不能人身攻击啊!)     最近闲的蛋疼,喜欢到处看看做得好的站点, 莫 ...

  7. phpStorm9.0 +xampp+chrome php调试环境配置!

    不多说,直接上step by step: 1.xampp配置 看看我的XAMPP版本: 修改配置文件,该打开打开,该加上加上,结果如下(当前需要重新启动apache,配置才会生效): [XDebug] ...

  8. jmeter察看结果树响应数据中文乱码解决办法

    1.到jmeter目录文件中bin文件夹下找到jmeter.properties文件,该文件为jmeter配置文件.使用编辑工具打开它. 2.找到    #sampleresult.default.e ...

  9. java中利用正则表达式获取a标签

    // 设置新闻内容 notice.setContent(editorValue); Matcher m = Pattern.compile("<a[^>]*>([^< ...

  10. python multiprocessing.Pool 中map、map_async、apply、apply_async的区别

    multiprocessing是python的多进程库,multiprocessing.dummy则是多线程的版本,使用都一样. 其中都有pool池的概念,进程池/线程池有共同的方法,其中方法对比如下 ...