vue-cli3.x 使用vux

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 [email protected] -D
or
npm install [email protected] -D

报错下面错误请看https://github.com/airyland/vux/issues/2503（目前本人还没有其他解决办法）

Uncaught ReferenceError: exports is not defined

注意：本人看了下vux github的内容发现，目前还未适配[email protected],而且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/

猜你喜欢