vue-cli更新到3.x,改动很大,首先需要进vue-cli3官网了解一遍
安装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 [email protected] -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代码
.....
js代码
声明变量
import { Loading } from 'vux'
data() {
return {
loadText: '加载中',
showLoading: true,
}
},
methods:{
调用接口,在请求到数据的时候 this.showLoading = false
},
components: {
Loading
}