安装vue-cli 3

Node 版本要求:需要 8.9 或更高版本 (推荐 8.11.0+)
检查node版本：

$ node -v

结果：　　v8.9.3
如果node版本过低，可进node官网下载安装包安装

检查vue-cli版本

vue --version

旧版本的vue-cli需要先卸载，卸载命令

npm uninstall vue-cli -g

下面开始安装vue-cli3

npm install -g @vue/cli

安装完再次用命令：vue --version检查vue版本

创建项目

vue create demo

随后选择babel，eslint 还有router !
安装完成后，按照提示运行项目

cd demo
npm run serve

重点来了 vue-cli3环境下安装配置vux

安装各插件
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

配置vux环境
这里注意由于vue-cli3使用的是webpack4而且更新过vue-loader，所以vux使用起来会存在一些兼容的问题，这里需要额外配置一下。
官方更新过vue/cli3.x 的vue-loader，正常配置会导致加载错误。所以需要手动指定vue-loader的版本来解决加载问题。

npm install vue-loader@14.2.2 -D

在根目录下新建文件vue.config.js，配置代码如下

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

这个文件还要配置其他一些信息，如文件路径我也是在这里配置的

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack(config) {
    config.resolve.alias
      .set('components', resolve('src/components'))
  },
  configureWebpack: config => {
    require('vux-loader').merge(config, {
      options: {},
      plugins: ['vux-ui']
    })
  }
}

这样在引用组件的时候只需：
import Header from 'components/Header'

使用Loading等待加载组件
html代码

<div>
  <loading v-model="showLoading" :text="loadText"></loading>
  <div v-if="!showLoading">.....</div>
</div>

js代码
声明变量

import { Loading } from 'vux'
data() {
    return {
      loadText: '加载中',
      showLoading: true,
  }
},
methods:{
  调用接口，在请求到数据的时候 this.showLoading = false  
},
components: {
    Loading
  }

最后编辑于：2019.04.30 15:52:51