搭建后台管理系统
1. 全局下载 @vue/cli
指令:yarn global add @vue/cli  或者 npm install -g @vue/cli
2. 创建项目
指令vue create admin
如果出现“无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称”
解决：1)确定node.js安装文件下的d文件地址
      2)任务栏右击打开任务管理器，点击文件，运行新任务，输入sysdm.cpl，确定后弹框选择高级->环境变量，选择系统变量中的path，双击，新增，粘贴d文件地址，保存。
如果出现截图情况:(安装的是2.9版本，但是使用了3.0版本的指令)
解决：1)用2.9的命令初始化项目 vue init webpack admin
      2)使用3.0指令，先卸载npm uninstall -g vue-cli，确认是否卸载干净vue --version，安装3.0以下npm install -g vue-cli@版本号，3.0以上npm install -g @vue/cli@版本号
操作如下：
3. 运行项目  npm run dev
4. 添加element-ui
下载指令 npm install element-ui -s
Main.js文件=>
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
5. 封装axios
下载指定npm install axios -s
新建文件，封装axios
import axios from 'axios';
import qs from 'qs'
import store from '../store'
axios.defaults.timeout = 10000
axios.defaults.baseURL = '119.3.159.78'
axios.defaults.withCredentials = true
// axios.defaults.headers.post['Content-Type'] = 'application/json charset=UTF-8'
// request
axios.interceptors.request.use(
  config => {
    // if (Token) {
    //   config.headers['token'] =&s.getToken
    // }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
// respone  //拦截响应response，并做一些错误处理
axios.interceptors.response.use(
  response => {
    console.log(response.data, '---------------------------e')
    const data = response.data
    if (response.data.responseCode == '0000') {
      return Promise.resolve(data);
    } else {
      return Promise.reject(data);
    }
  }
)
export default {
  get (url, params = {}) {
    var data = params || {}
    // data['sendTime'] = new Date().getTime()
    return axios.get(url, {
      params: data
    })
  },
  post (url, params = { data: {}, contentType: '' }) {
    if (params.contentType && params.contentType == 'form') {
      return axios.post(url, qs.stringify(params.data), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
    } else {
      return axios.post(url, params.data || params)
    }
  },
  getFile (url, params = {}) {
    var data = params || {}
    data['sendTime'] = new Date().getTime()
    return axios.get(url, {
      responseType: 'blob',
      params: data
    })
  },
  getCache (url, params = {}) {
    var data = paramsvue element admin || {}
    return axios.get(url, {
      params: data
    })
  },
}
6. 使用axios (api文件夹，统一管理接口)
import axios from '../utils/axios'
const URL = '119.3.159.78'
export default {
  // 标签管理的分页查询
  ArticleTagFindPag (params) {
    return axios.get(URL + '/articleTag/findPage', params)
  },
}
页面中如果要调用api的方法，引入api文件
import $axios from '@/api/index'
$axios.ArticleScripyFindPage({}).then(res => {
  console.log('res', res);
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。