Element-admin goes from beginner to master

1. Official documents

Element – admin panjiachen. Gitee. IO/vue – element…

Element – the UI element. The eleme. Cn / # / useful – cn/com…

2. Download and install

Integrated version (select i8N branch to enter Chinese version)

git clone https://github.com.cnpmjs.org/PanJiaChen/vue-element-admin.git

Basic version

git clone https://github.com.cnpmjs.org/PanJiaChen/vue-admin-template.git

3, run,

Install dependencies

npm install --registry=https://registry.npm.taobao.org

Start the project

npm run dev

4. Project structure

5. Rename the project

Change the name of the project folder. Change the name, description, and author of package.jsom and the name of package-lock.jsom

6. ElementUI Chinese version

Find the SRC/main. Js

// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
 
----------------------------------------------------------------
 
// Vue.use(ElementUI, { locale }) 
// If you want the Chinese version of Element-UI, declare it as follows
Vue.use(ElementUI)
Copy the code

7. Disable ESLint validation

Find the vue. Config. Js

lintOnSave: false, // process.env.NODE_ENV === 'development',

8. Menu Settings

Find the SRC/Settings. Js

Replace your ico icon in public/favicon.ico
Find Logo components SRC/layout/components/Sidebar/Logo. The vue

data() {
    return {
      title: 'Dream Valley Blog Management System'.logo: require('@/assets/logo-new.png') // Do not write '@/assets/ logoe-new.png '.}}Copy the code

The showSettings command is used to set whether to display the control panel

TagsView is used to set whether to display the page label

9. Icon (SVG)

In Ali icon, download SVG to SRC/ICONS/SVG

Reference in the project

< svG-icon icon-class="password" /> // icon-class is the name of icon

Rich text tiny

Remove the default menu display

<! -- Just change the calling code -->
<tinymce :height="300" v-model="content"  menubar=""></tinymce>
Copy the code

Add font and size

export default{name: 'tinymce'.props: {id: {type: String},value: {type: String.default: ' '},toolbar: {type: Array.required: false.default() {
          / / the first step
          / / modify before
      　　// return ['removeformat undo redo | bullist numlist | outdent indent | forecolor | fullscreen code', 'bold italic blockquote | h2 p media link | alignleft aligncenter alignright']
      　　/ / modified
          return ['removeformat undo redo | bullist numlist | outdent indent | forecolor | fullscreen code'.'bold italic blockquote | h2 p media link | alignleft aligncenter alignright | fontsizeselect | fontselect']}}},mounted(){thisInitTinymce ()},methods: {initTinymce(){window.tinymce.init({toolbar: this.toolbar,menubar: this.menubar,plugins: 'advlist,autolink,code,paste,textcolor,colorpicker,fullscreen,link,lists,media,wordcount,imagetools'.// Step 2, add the size option
　　　　　　fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt".end_container_on_empty_block: true.powerpaste_word_import: 'clean'.code_dialog_height: 450.code_dialog_width: 1000.advlist_bullet_styles: 'square'.advlist_number_styles: 'default',})}}}Copy the code

Image upload

// Configure the upload address during initialization
window.tinymce.init({
    // Image upload address
    images_upload_url: 'Your server image upload address'.Copy the code

The back-end request parameter is file, and the response location is the image address

11, the router

Route whitelist

// src/permission.js
const whiteList = ['/login'] // no redirect whitelist
Copy the code

Bread crumbs Dashboar Chinese display

In the SRC/components/Breadcrumb/index. Vue repair the front page instead

Flex the menu bar

Remove flex menu bar buttons

1, the SRC/layout/components/Navbar. Mr. Hamburger component vue commented

2, in/SRC/store/modules/app. Js, changing the opened to true

3. There are also two comments in app.js

14. Cross-domain and interface

Set up thevue.config.jsComments,mock

devServer: {
    port: port,
    open: true.overlay: {
      warnings: false.errors: true
    },
    proxy: {
          [process.env.VUE_APP_BASE_API]: {
            target: process.env.VUE_APP_BASE_API,
            changeOrigin: true.// Configure cross-domain
            pathRewrite: {[A '^' + process.env.VUE_APP_BASE_API]: ' '}}}// before: require('./mock/mock-server.js')
  }
Copy the code

in.env.developmentSet up theVUE_APP_BASE_API

VUE_APP_BASE_API = 'http://localhost:80/php/'
Copy the code

Interface request format

// api/article.js
import request from '.. /utils/request';
export function fetchList(query) {
  return request({
    url: '/article/list'.method: 'get'.params: query
  })
}


// views/example/list
import { fetchList } from '@/api/article'
export default {
  data() {
    list: null.listLoading: true
  },
  methods: {
    fetchData() {
      this.listLoading = true
      fetchList().then(response= > {
        this.list = response.data.items
        this.listLoading = false})}}}Copy the code

Header Specifies the request header

// src/utils/request.js

if (store.getters.token) {
  // You can add your own headers
  config.headers['X-Token'] = getToken()
}
Copy the code

PHP Interface format


      
	header('Content-Type: text/html; charset=utf-8');
        header('Access-Control-Allow-Origin:*'); // * indicates that any url request is allowed
	header('Access-Control-Allow-Methods: HEAD, GET, OPTIONS, POST, PUT');
        // Set the received header. You can customize it
	header('Access-Control-Allow-Headers: X-Token,Content-Type, Content-Range, Content-Disposition, Content-Description');
	header('Access-Control-Max-Age: 1728000');
	header('Access-Control-Allow-Credentials: true');

    $data = array(
        'token'= >"admin-token"
    );
    
    $result = (object)array(
              'code'= >20000.'message'= >'success'.'data'= >$data,);echo json_encode($result);
? >
Copy the code

Request status code and error message

// src/utils/request.js
// code indicates the status code of success
if(res.code ! = =200) {
  Message({
    message: res.msg || 'Error'.// MSG is an error message
    type: 'error'.duration: 5 * 1000
  })
Copy the code

Dynamic menu

PHP Interface format


      
    header('Content-Type: text/html; charset=utf-8');
    header('Access-Control-Allow-Origin:*'); // * indicates that any url request is allowed
    header('Access-Control-Allow-Methods: HEAD, GET, OPTIONS, POST, PUT');
    header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');
    header('Access-Control-Max-Age: 1728000');
    header('Access-Control-Allow-Credentials'.'true');

    $data = array((object)array(
            'path'= >'/goods'.'component'= >'Layout'.'redirect'= >'/goods/index'.'name'= >'goods'.'meta'= > (object)array(
                'title'= >'Merchandise Management'.'icon'= >'goods'
            ),
            'children'= >array((object)array(
                    'path'= >'list'.'component'= >"goods_list".'name'= >'goods_list'.'meta'= > (object)array( 'title'= >'List of Goods'.'icon'= >'menu'),), (object)array(
                    'path'= >'coop'.'component'= >"goods_coop".'name'= >'goods_coop'.'meta'= > (object)array( 
                        'title'= >'Matching goods'.'activeMenu'= >'/project'.// Specify menu highlighting
                        'icon'= >'menu')))));$result = (object)array(
        'code'= >200.'message'= >'success'.'data'= >$data,);echo json_encode($result);
? >
Copy the code

src/router/index.js

/** * Define the map object for the replacement component */
export const componentMap = {
  'Layout':require('@/layout').default,
  'redirect_index':() = > import('@/views/redirect/index').then(m= >m.default),
  'login_index':() = > import('@/views/login/index').then(m= >m.default),
  'login_auth_redirect':() = > import('@/views/login/auth-redirect').then(m= >m.default),
  'error_page_404':() = > import('@/views/error-page/404').then(m= >m.default),
  'error_page_401':() = > import('@/views/error-page/401').then(m= >m.default),
  'dashboard_index':() = > import('@/views/dashboard/index').then(m= >m.default),
  'guide_index':() = > import('@/views/guide/index').then(m= >m.default),
  'icons_index':() = > import('@/views/icons/index').then(m= >m.default),
  // Create a page to replace routes based on name
  'goods_list':() = > import('@/views/goods/list/index').then(m= >m.default),
  'goods_coop':() = > import('@/views/goods/coop/index').then(m= >m.default),
}
Copy the code

src/store/modules/perssion.js

// Introduces componentMap and the back-end menu interface
import { asyncRoutes, constantRoutes , componentMap } from '@/router'
import { getRouter } from '@/api/user'.// Replace the Component in the route object
function replaceComponent(comp){
  if(comp.component && typeof(comp.component) == 'string'){
    comp.component = componentMap[comp.component]
  }
  if(comp.children && comp.children.length>0) {for(let i=0; i<comp.children.length; i++){ comp.children[i] = replaceComponent(comp.children[i]) } }return comp
}


const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve= > {
      // Add new code start
      // Accept backend menu data and process it
      getRouter().then(response= > {
        let MyRoutes = response.data.filter(curr= > {
          if(curr.children == null || curr.children.length == 0) {delete curr.children
          }
          return replaceComponent(curr)
        })
        // Add new code end
        let accessedRoutes
        if (roles.includes('admin')) {
          accessedRoutes = MyRoutes || []
        } else {
          accessedRoutes = filterAsyncRoutes(MyRoutes, roles)
        }
        commit('SET_ROUTES', accessedRoutes)
        resolve(accessedRoutes)
      }) // Add this line of code}}})Copy the code

And then finally get rid of the redundancyasyncRoutescode

17. Menu styles

Sets the height of each word menu

src/styles/sidebar.scss
// menu hover
.submenu-title-noDropdown..el-submenu__title {
  height: 50px; // Set the height of each word menu
  &:hover {
    background-color: $menuHover ! important; }}Copy the code

Sets the color of the selected menu

src/styles/sidebar.scss
// Set the color of the selected menu
.el-menu-item.is-active {
   background-color: #35B4B9 ! important;
}
Copy the code

src/styles/variables.scssSets the submenu color