一、vue开发环境搭建
1、搭建vue脚手架
我的方法和别人不一样,因为我是百分百拒绝全局安装vue的,所以我会单体安装vue |
1、创建一个文件夹,安装vue ui依赖 |
npm install --save @vue/cli |
打开vue ui搭建脚手架 |
这一步非常容易出错 |
1、先直接输入命令 vue ui |
2、如果1不行,输入命令npm run vue ui |
3、如果上面都不行,按下面步骤来 |
{
"name":"www",
"version":"0.0.1",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"vue":"vue",
"ui":"vue ui"
}
}
创建完成后会出现项目仪表盘,直接将页面关掉就可以了 |
然后我们需要回到命令行 按ctrl +c退出预编译 |
2、安装相关依赖
1、axios
import axios from 'axios'
Vue.prototype.$axios = axios
import axios from 'axios'
const service = axios.create({
baseURL: 'http://localhost:9001',
timeout: 20000
})
export default service
2、element ui
npm install element-ui --save |
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Element)
二、封装测试
3、封装异步请求
import request from '@/utils/request.js'
export default {
getAllBanner() {
return request({
url: `/cmsservice/crm-banner/api/selectAllBanner`,
method: 'get'
})
},
getNewRecommended() {
return request({
url: `/eduservice/api/selectNewRecommended`,
method: 'get'
})
},
}
4、测试
<el-button>默认按钮</el-button>
<el-button type="primary" disabled>主要按钮</el-button>
import test from '@/api/test.js'
created(){
test.getAllBanner().then(response=>{
alert("成功");
}).catch(error=>{
alert("失败");
})
}
至此前端开发环境就基本搭建完成 |
之后会用到百度的图表之类的,到时候需要的时候在引入就行 |