vue-cli4.4.1+elementUI搭建后台系统

vue-cli4.4.1+elementUI搭建后台系统

第一步（安装环境）

1、安装Node.js 安装包及源码下载地址为：安装包及源码下载地址
2、安装完成后查看版本：node -version
3、全局安装cli4+脚手架：npm uninstall vue-cli -g
（注意，如果之前已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，需要先通过 npm uninstall vue-cli -g 卸载它。
Vue CLI 需要 Node.js 8.9 或更高版本 (官方推荐 8.11.0+ 我目前是v10.15.3））

第二步（创建项目）

创建方式（一）ui可视化创建

1. 终端运行命令：vue ui 浏览器会自动打开ui界面
2. 点击创建》输入项目名》选择手动》选择需要的依赖环境，创建即可
   
   
3. 创建好的目录
   

//1.public存放静态文件，相当于cli2的static
//2.这里存放公共组件
//3.views在里边编写vue文件
//4.自己新建的配置文件，可以配置开发跨越等环境
//运行方式：npm run serve

1. 安装element:在插件里选择安装插件》搜索elememt》选择
   vue-cli-plugin-element安装》等待一小会儿，弹出按需导入还是全局导入（推荐选择按需导入即可）

创建方式（二）命令创建

1. vue create my-project
2. 按照提示操作即可，成功后，进入项目，安装相关依赖：
   cnpm install vue-router
   cnpm install element-ui -S
   cnpm install vuex -S
   cnpm install -D sass-loader node-sass
3. 在main.js中引入

//main.js
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import Vuex from 'vuex'
import router from './routes'
Vue.use(ElementUI)
Vue.use(Vuex)
new Vue({
 router,
 render: h => h(App)
}).$mount('#app')

第三步（配置elementUI）

1.在src目录下新建plugins文件夹，然后新建element.js文件

//element.js
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'
import {
  Button,
  Form
} from 'element-ui'
Vue.use(Button)
Vue.use(Form)

1. 然后在main.js引入即可
   import ‘./plugins/element.js’

第四步（配置请求）

1.根目录新增文件 vue.config.js

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : './',
  // usesEslint:false,
  // publicPath:'./',//打包时设置
  devServer: {
    proxy: {
      '/api': {
        // target: 'http://192.168.0.201:1603', //接口域名
        target: 'http://192.168.0.201:1603', //接口域名
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  lintOnSave:false
}

2. 在src目录下新建utils目录，接着新建request.js,创建请求拦截器和响应拦截器（配置前安装axios $ npm install axios --save-dev
   ）

具体更多axios配置可以参考官网

//request.js
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 5000 // request timeout
})
// request interceptor
service.interceptors.request.use(
  config => {
    // if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      // config.headers['X-Token'] = getToken()
    // }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
// response interceptor
service.interceptors.response.use(
  response => {
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 1000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

3. 在src目录下新建api目录，接着新建test.js

//test.js
import request from '@/utils/request'
/*.then(res => {
    // 返回数据
})
    .catch(err => {
        // 异常情况
    })*/

// •	获取消息数据接口

// 登录接口
export default {
  querySubscriber (data) {
    return request({
      ContentType: 'application/json',
      url: '/api/scs/login',//接口地址
      method: 'post',
      data
    })
  }
}

3. 之后可以在需要的组件请求数据了，如test.vue

<script>
  import newApi from '@/api/test'
  export default {
    name: 'test',
    methods:{
      login () {
          newApi.querySubscriber(
            {username:"12812098201",
              password:"123456"
            }
          )
            .then(res => {
              // 返回数据
            })
            .catch(err => {
              // 异常情况
            })
      }
    }
  }
</script>

我搭建好的地址cli4.4.1forElemtnt-ui