vue-cli更新到3.x，改动很大，做前端的朋友推荐我将vux项目转到vue-cli3上，通过看文档和查资料，花了几个小时，终于完成，特此记录。

一、安装vue-cli 3

首先官方文档：https://cli.vuejs.org/

官方文档包含了很多的内容，很靠谱，比较全面，第一步当然是把官方文档看一遍。

安装

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

你还可以用这个命令来检查其版本是否正确 (3.x)：

vue --version

 创建项目

运行以下命令来创建一个新项目：

vue create demo

随后选择babel，eslint 还有router !

安装完成后，按照提示可以看到界面 

cd 项目名

npm run serve

 二、配置vux

在网上搜了会，发现几乎都是vue-cli旧版的配置方法，有一些已经不能用了，在这里整理下正确的配置方法

安装各插件

1、安装vuex

npm install vuex --save-dev

2、在项目里面安装vux

npm install vux --save

3、安装vux-loader（必须安装）

 npm install vux-loader --save-dev

4、安装less-loader（这个是用以正确编译less源码，否则会出现 ' Cannot GET / '）
npm install less less-loader --save-dev

5、安装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.2 -D
or
npm install vue-loader@14.2.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就行了

这部分内容是参考：https://segmentfault.com/a/1190000014586699

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

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

 在这里贴一下vue.config.js文件的配置，这是我目前用的配置

module.exports = {
        // 基本路径
     baseUrl: process.env.NODE_ENV === 'production'
    ? '/langya/'
    : '/langya/',
    // vux 相关配置,使用vux-ui
    configureWebpack: config => {
        vuxLoader.merge(config, {
            options: {},
            plugins: ['vux-ui']
        })
    },
    devServer: {
        port: 8081
    },
    css: undefined,
    lintOnSave: false,
    outputDir: undefined,
    assetsDir: undefined,
    runtimeCompiler: true, //包含运行时编译器的 Vue 构建版本
    productionSourceMap: false,
    parallel: undefined
}

 

这样，配置就完成了，我们来测试以下，vux是否可用。

实验证明，OK ！

这样，给予vue-cli3的vux就配置完成了。

此外，个人比较喜欢router的history模式，修改方法：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  base:'demo',
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

在Router 里面加上mode属性就行了，还可以使用base属性，使用项目名。