vue后台管理系统的一些准备工作(element-ui+axios+sass+vue-router)

https://www.cnblogs.com/liuqianrong/p/9172750.html

这一篇已经讲过如何用vue-cli搭建一个vue项目了

一开始，main.js是长这样的

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

1.引入elementUi

cnpm install element-ui --save

在main.js中写入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

在element官网上找一些组件使用看看有没有生效

2.安装axios

目前主流的vue项目都选择axios来完成ajax请求

cnpm install axios --save

在main.js中引入axios

import axios from 'axios'

在其他的组件中是无法使用axios命令的，我们把axios放在vue.prototype.$http原型上就能解决这个问题

Vue.prototype.$http= axios

这样直接使用this.$http.post请求接口

3.安装sass

cnpm install sass-loader node-sass vue-style-loader --D

在style标签中加上 lang=”scss” 就可以使用sass了

App.vue是我们的主组件，所有页面都是在app.vue下进行切换的，所以在他下面引用公用样式stylesheet

<style lang="scss">
@import './style/stylesheet';
</style>

4.vue-router

https://www.cnblogs.com/liuqianrong/p/9578960.html

 

最后总结一下,main.js长这样

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// 引用elementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
//引用axios
import axios from 'axios'
//将axios改写为Vue的原型属性
Vue.prototype.$http= axios
axios.defaults.baseURL = '/api'
//引用路由
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import routes from "./router";
const router = new VueRouter({
routes
})

Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})