vue-cli3 项目引入 vux-ui 加 vue.config.js devServer{}配置

前言：

由于项目需要，用的vue-cli3 + vux-ui 来做，vux现在也是比较优秀的前端 移动端 UI 组件库、框架了，可是现在的vux 和 vue-cli3还没有同步更新，现将所填的坑记录下！！！

 

安装基础必要的环境：

首先需要安装Node.js环境、vue-cli脚手架什么的，这里就不再说了，官方文档说得比我详细：

node.js官方：http://nodejs.cn/

vue-cli官方：https://cli.vuejs.org/

安装上面的环境和框架后，现在开始用vue-cli创建项目：

vue create projectName  //projectName是项目名，可自己任意写。

 

安装之后执行就可以启动项目了

cd projectName //进入项目根目录

npm run serve //启动项目

http://localhost:8080   //在浏览器地址栏中打开项目

 

安装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

 

配置vux环境：

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

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

npm install [email protected] -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就行了

　　根据官方文档，在vue.config.js文件里加入以下内容：

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

注：这里还有一个坑就是一般我们和后端联调API时都是在本地联调的，但是在本地联调的话，这样就会有浏览器请求访问API跨域的问题，所以vue-cli为我们在webpack中提供了一个API中转服务，这样在本地联调就没有跨域的问题了。

所以要把vue.config.js文件里的内容，修改如下：

module.exports = {
    baseUrl: './',    // 解决vue-cli在build打包后出现路径错误问题

    configureWebpack: config => {
        
        // 解决vue接口联调跨域问题
        config.devServer = {
            proxy: {
                '/API': {     //在ajax请问的url参数前 加上'/API'就行了，此时的'/API'就是 'https://www.easy-mock.com'的变量。
                    target: 'https://www.easy-mock.com',
                    ws: true,
                    changeOrigin: true,
                    pathRewrite: {
                        '^/API': ''
                    }
                }
            }
        }
        
        // 将vux-ui合并到config中
        require('vux-loader').merge(config, {
            plugins: ['vux-ui'],
        })
    }
};

 

 

以上设置好以后，我们就可以在ajax中使用了，这里我用的是axios插件，使用实例如下：

Axios({ 
        method: "POST",

     // 这里的"/API" 就是在上面vue.config.js中devServer项里的https://www.easy-mock.com'的变量。
        url: "/API/mock/5cf75e4eaa0f686dffdb9ba2/api/menu",

        data: {
            type: 'one',
            name: 'two'
        }

     }).then(res => {

         console.log(res.data) //这是请求成功返回的数据
          
     }).catch(err => {

          console.log(err); //这是请求失败返回的数据

     });

 

vux的用法：

 

开始使用 VUX 之前

如果你刚从后端转到前端，可能会被目前前端(表面的)工程复杂度惊吓到，但是放心，使用 vue-cli 从模板创建项目可以快速开始编码、构建，仅仅是几行简单的命令不是么？

在使用 VUX 之前需要你至少已经会使用 Vue，同时需要你大概了解 Node.js，npm，cnpm，yarn 这些东西。

去官方文档看看把，想要用vux组件什么的你早晚都得去看的，官方文档说得比我详细：

 

vux官方：https://doc.vux.li/zh-CN/