一步步创建vue-element-admin框架实现002-安装必要的插件

使用说明：

一步步创建vue-element-admin框架是基于vue-element-admin和vue-admin-template基础版的代码来实现的，文章会经常说直接拷贝项目的文件

使用控制台/cmd执行命令来安装插件

1）安装element ui

element-admin使用主要组件库

命令:npm i element-ui -S

配置使用

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

2）安装Router路由

vue Router是vue.js官方的路由管理器

命令

npm install vue-router

新增配置文件：src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export const constantRoutes = [
    {
        path: '/helloWord',
        component: () => import('../components/HelloWord'),//组件地址
        hidden: true
    },
    {
        path: '/test',
        component: () => import('../components/Test'),//组件地址
        hidden: true
    },
    ]

const createRouter = () => new Router({
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes
})

const router = createRouter()
export default router

在main.js引入

import router from "./router";

new Vue({
  el: '#app',
  router,//新增
  render: h => h(App),
})

3）安装eslint

一个代码风格约束规范，在项目运行编译就会坚持是不是符合编码要求，统一要求，也可以格式化代码

1）两种方式：

• vue add eslint
• vue UI，从界面上操作

安装成功之后会有自动生产文件：.editorconfig和.eslintrc.js（有点没有，可以自己创建）

再安装：babel-eslint

npm install babel-eslint

配置.editorconfig（编辑代码规范）

# http://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

配置.eslintignore(排除检查目录)

build/*.js
src/assets
public
dist

配置.eslintrc.js（检查规则,这个直接拷贝了vue-element-admin的配置）

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

4）安装vuex

状态管理器

安装命令：npm install vuex --save

新增配置文件：src\store\index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const getters = {

}

const store = new Vuex.Store({
  modules: {
  },
  getters
})

export default store

在main.js引入

import store from './store'

new Vue({
  el: '#app',
  store,//新增
  render: h => h(App),
})

5）安装axios

请求工具

安装命令：npm install axios

新增配置axios统一处理工具类：src\util\request.js

import axios from 'axios'
import {Message} from 'element-ui'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // 请求超时设置
})

//请求拦截器 request interceptor
service.interceptors.request.use(
  config => {
    // 在请求之前处理事件 do something before request is sent

    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

      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

使用axios，直接使用request

import request from '@/utils/request'

export function getList(params) {
  return request({
    url: '/vue-admin-template/table/list',
    method: 'get',
    params
  })
}

6）安装js-cookie

cookie工具

安装命令：npm install js-cookie

使用方式：

Create a cookie, valid across the entire site:
Cookies.set('name', 'value')
Create a cookie that expires 7 days from now, valid across the entire site:
Cookies.set('name', 'value', { expires: 7 })
Create an expiring cookie, valid to the path of the current page:
Cookies.set('name', 'value', { expires: 7, path: '' })
Read cookie:
Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined

新增文件：src\util\auth.js（主要为了后面登录用户存储token信息到cookie）

import Cookies from 'js-cookie'

const TokenKey = 'token_id_123456789'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

7）安装 sass

命令：
npm install sass-loader@8.0.2 --save-dev
npm install sass@1.26.8 --save-dev

8） 安装 normalize.css

命令：npm install --save normalize.css