vue-cli使用vux分为两种模式,1,创建项目的时候添加,2,已经创建过vue项目后添加
一,创建项目的时候添加
1,安装vue-cli (https://cli.vuejs.org/zh/guide/installation.html)
npm install -g @vue/cli
# OR
yarn global add @vue/cli
2,创建带有vux的项目(https://doc.vux.li/zh-CN/install/biolerplate.html)
vue init airyland/vux2 projectPath
3,进入项目,启动程序
cd projectPath
npm install --registry=https://registry.npm.taobao.org # 或者 cnpm install 或者 yarn
npm run dev # 或者 yarn dev
过程中要查看vue的版本,为3.x
二,已创建vue-cli项目,再加入vux(以下步骤是已经安装vue-cli的添加下)
1,创建一个项目
vue create demo
2,进入项目,测试能不能启动(不能启动自己找原因吧,勿喷)
cd demo
yarn run serve
3,加载vux
yarn add vux
4,加载vux-loader
yarn add vux-loader
5,安装less-loader
yarn add less less-loader
6,安装yaml-loader (以正确进行语言文件读取)
yarn yaml-loader
7,在项目中创建vue.config.js进行配置(本人的如下)
module.exports = {
configureWebpack: config => {
require('vux-loader').merge(config, {
options: {},
plugins: ['vux-ui']
})
},
}
8,最后就是使用运行了
error:运行的时候出现
Module parse failed: Unexpected token (3:0)
You may need an appropriate loader to handle this file type.
| import { render, staticRenderFns } from "./App.vue?vue&type=template&id=7ba5bd90&"
| import script from "./App.vue?vue&type=script&lang=js&"
> ../node_modules/vux-loader/src/script-loader.js!export * from "./App.vue?vue&type=script&lang=js&"
| import style0 from "./App.vue?vue&type=style&index=0&lang=css&"
则:运行下面代码
yarn add vue-loader@14.2.2 -D
or
npm install vue-loader@14.2.2 -D
报错下面错误请看https://github.com/airyland/vux/issues/2503(目前本人还没有其他解决办法)
Uncaught ReferenceError: exports is not defined
注意:本人看了下vux github的内容发现,目前还未适配vue-cli@3.x,而且vux是根据vue官方的webpack版本进行修改的,大家谨慎使用
然后再尝试
本文参考:https://blog.csdn.net/Honnyee/article/details/82181620
https://segmentfault.com/a/1190000014586699
http://xd-code.com/2018/08/24/vue-cli-plugin-vux/