在最近的项目中,引用了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. Oozie 安装及 examples app 的使用

    参考文档 一.Building OOzie 特别注意的是修改Pom.xml文件中的版本与本机中安装的版本相同 二. install Oozie 1.为 hadoop 添加 Oozie 的代理用户,添加 ...

  2. Eclipse EE 运行 Myeclipse Web 应用

    第一步:进入项目所在目录,打开.project文件,找到<natures>...</natures>标签,在中间添加如下子标签内容 <nature>org.ecli ...

  3. CodeForces 873F Forbidden Indices 后缀数组

    忘了当时怎么做的了,先把代码贴上,保存一下后缀数组模板. #include <cstdio> #include <cstring> #include <algorithm ...

  4. Toolbar中menu菜单文字颜色的修改

    Toolbar菜单中menu当中我们大多数都使用图片来按钮,可是有些时候我们也会直接使用文字,文字的颜色如何修改呢. 其实很简单,我们只要修改styles.xml文件中,添加一句 <item n ...

  5. Android学习笔记(四)之碎片化Fragment实现仿人人客户端的侧边栏

    其实一种好的UI布局,可以使用户感到更加的亲切与方便.最近非常流行的莫过于侧边栏了,其实我也做过很多侧边栏的应用,但是那些侧边栏的使用我 都不是很满意,现在重新整理,重新写了一个相对来说我比较满意的侧 ...

  6. 《数据结构与算法分析:C语言描述》复习——第七章“哈希”——哈希表

    2014.06.22 12:36 简介: 哈希是一种数学思想,将不定长数据通过函数转换为定长数据.不定长数据通常意味着碎片化,动态分配内存等等影响存储和性能的因素.当这个定长数据是一个无符号整数时,可 ...

  7. Pascal 杨辉三角

    用于打印杨辉三角的程序,有多种算法仅提供一种 PRogram yh (input,ouput);var  m,n,c:integer;Begin For m:=0 TO 10 Do   Begin   ...

  8. Windows下安装jenkins,关闭jenkins,修改jenkins端口号

    1.Jenkins安装部署 在官网下载Jenkins: https://jenkins.io/download/thank-you-downloading-windows-installer-stab ...

  9. Freemarker 语法详解

    Freemarker 在线中文官方参考手册 Freemarker是一款模板引擎,是一种基于模版生成静态文件的通用工具,它是使用纯java编写的,一般用来生成HTML页面. Freemarker 生成静 ...

  10. python之列表/元组/字典/字符串

    一.列表 格式:list = ['xxx','xxx','xxx'] 性质:可以修改列表内容 copy用法: import copy names = ['] names01 = names #直接引用 ...