vue-cli 3.0脚手架与vux的配合使用
在最近的项目中,引用了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的配合使用的更多相关文章
- Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
- vue/cli 3.0脚手架搭建
在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli 安装成功: 安装完成 ...
- vue/cli 3.0 脚手架【进阶】 使用 amfe-flexible 和 postcss-px2rem进行移动端适
安装vue-cli3 npm install -g @vue/cli 创建项目 vue-cli-test 脚手架-项目-成功-运行项目 基于vue-cli配置移动端自适应 转自:http://hj ...
- 【1】vue/cli 3.0 脚手架 及cube-ui 安装
安装 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+).你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本. 检查node版本: $ ...
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
- 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因
1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...
- vue cli 4.0.5 的使用
vue cli 4.0.5 的使用 现在的 vue 脚手架已经升级到4.0的版本了,前两日vue 刚发布了3.0版本,我看了一下cli 4 和cli 3 没什么区别,既然这样,就只总结一下vue cl ...
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
- VUE CLI 3.0 安装及创建项目
一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/ 详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...
随机推荐
- ABAP CDS - SELECT, WHERE
格式 ... WHERE cond_expr ... 结果 定义CDS视图结果集的Where条件.访问CDS视图时,结果集仅包含来自数据源数据源的数据,该数据源数据源满足在where之后指定的条件co ...
- gcc常用命令
1简介 2简单编译 2.1预处理 2.2编译为汇编代码(Compilation) 2.3汇编(Assembly) 2.4连接(Linking) 3多个程序文件的编译 4检错 5库文件连接 5.1编译成 ...
- Servlet过滤器---登录权限控制
实现了登录时权限控制:进入首页.登录页以及登录servlet时,不用验证权限:进入其它页面时,须验证是否登录,未登录则跳转到登录页. 一个简单的首页:index.jsp <%@ page lan ...
- 我的转行之路(电气转IT)------2018阿里校招面经
博主本专业电气,今年3月下定决心转向互联网行业,本来想依仗自己比较自信的学习能力自学成才的,不过学了一段时间感觉还是需要一个人来指点,不仅仅是指点一些技术性的问题,更是需要有人来指点一下方向性的问题. ...
- asp.net 身份验证-Form 身份验证
一. .net身份验证简介 1.身份验证就是检测用户是否登录及所访问的资源是否有权限.当我们在访问一个受保护网络资源时,往往需要输入用户名.密码信息,或通过其他证书.第三方身份验证等方式.验证(Aut ...
- 为什么要内存对齐 Data alignment: Straighten up and fly right
转载于http://blog.csdn.net/lgouc/article/details/8235471 为了速度和正确性,请对齐你的数据. 概述:对于所有直接操作内存的程序员来说,数据对齐都是很重 ...
- postman与charles的结合使用
1.准备charles环境 Charles端口一般配置的为8888,不知道怎么配置详见charles文档 打开charles,发现访问浏览器任意页面都是失败. 在浏览器的高级设置中设置代理服务器,以火 ...
- Python代码书写规范
Python 编码规范 一 代码编排1 缩进.4个空格的缩进(编辑器都可以完成此功能),不要使用Tap,更不能混合使用Tap和空格.2 每行最大长度79,换行可以使用反斜杠,最好使用圆括号.换行点要在 ...
- mac虚拟机上(centos系统)设置联网第二种方式
这种方式简单,不容易出错,用的桥接的方式. 这样的安装的centos会得到ip地址 然后编辑一下网卡配置,使其变为静态得ip 输入命令 # vi /etc/sysconfig/network-scri ...
- IPMITool driver
官网链接: https://docs.openstack.org/ironic/latest/admin/drivers/ipmitool.html IPMITool driver 概述IPMI(In ...