Introduction to the

  • Vue-cli Creates a VUE project, integrating vuex, VuE-Router, AXIos, and Elemental-UI
  • Project templateDownload address

Create a project

A collection of Java+ front-end projects

  • Create a project using vuE-CLI, using Babel, Router, vuex, Linter/Formatter, using configuration files

  • Plug-in select vue-cli-plugin-element

  • The installation runs on axiOS

  • Run the following commands to install development dependencies: less, less-loader
npm install less
npm install less-loader@ 50.0.Copy the code

The desired effect

  • Redirects to the welcome page when accessing the root path

  • ** When a sidebar child node is clicked, the route automatically changes and jumps to a different child component

支那

  • Click on “Book Info” to jump to booklist. vue and send an AXIos request to the back-end server to get the data and traverse to the page

Initialize the project

  • See package.json for dependencies, which denote the runtime dependencies of the installation, and devDependencies, which denote the development dependencies of the installation
  • The element.js file in the plugins folder represents the elemental-UI plug-in configuration
  • Delete default generated code in index.js from the Router folder, and delete the views folder and subcomponents
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = []
const router = new VueRouter({
  routes
})
export default router


Copy the code
  • The Store folder indicates that vuEX is successfully configured and used to share data
  • Remove the default generated code in the root component app.vue, and remove the child components in the Components folder
<template>
  <divId ="app"> app root component </div>
</template>
<script>
export default {
  name: 'app'
}
</script>
<style>
</style>


Copy the code
  • Write the global style global.css and import it in main.js
  • Finally, enter a command in the terminal to start the project, and the browser accesses the project to check whether an error occurs.

element-ui

  • Element-ui usage stepsreference
  • Use element-UI layout
// In the current project element.jsAll element-UI components have been introduced in the. Import Element directlyfrom 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)


Copy the code
  • The container layout
<! -- Default expanded child node --> <el-menu :default-openeds="['1'.'3']"> <! -- Default selected child node --> <el-menu :default-active="[1-1 ' ']"> <! -- icon --> <i class="el-icon-coin"></i> <! --> index="4"<! --> index="5-1"<! -- Level 3 menu --> <el-menu-item index="4-1-2"> <! -- Default selected color --> <el-menu active-text-color="#409EFF"<! By default, only one child node is expanded --> <el-menu unique-opened>


Copy the code

Router

  • Procedure for using routes: 1. The Router function has been enabled during project construction. 2. Create a subcomponent. 3. Configure routing rules in router/index.js. 4. Route egress; 5. In main.js, router is the attribute of the vue instance

  • Write a welcome page

    • When accessing the root path, the welcome page is displayed
    • Create a new welcome.vue
    • Import welcome. Vue to router/index.js and configure routing rules

  • The sidebar turns on routing

<! --1. App.vueOpen sidebar routing in --> <el-menurouter> <! --2. Set path -> <el- in the child nodemenu-item :index="'/userList'"> <! --3Create a subcomponent, such as userlist. vue, and configure routing rules in the router -->Copy the code

axios

  • Axios uses: main.js to introduce axios, default configuration, registered as an attribute of vue instance
  • Create a new booklist. vue component and send an AXIos request to traverse the returned data to the page
<script> export default {data() {return {books: []}}, created(){// Assign vue object to _this const _this = this; _this.$http.get("book/findAll/3/4").then(function(response){// This in the then method represents response console.log(response.data.content)
            _this.books = response.data.content;
        });
    }
}
</script>


Copy the code

vuex

  • Using the step
// 1Build the project with vuex enabled // store/index.js
import Vuex from 'vuex'      // 2. Introduction of Vue.use(Vuex)            // 3. Export default new Vuex for components registered as vUE instances.Store({
  state: {
    count: 0      // 4. Store texturing method sharing data}, mutations: {}, actions: {}, modules: {}}) // entry filemain.js
import store from './store'
new Vue({
  store,                 // 5Render: h =>h(App)
}).$mount('#app') / / in the bookList.vueThe use of <span>vuex uses: {{$store.state.count}} < /span>


Copy the code

(Reprinted from the article)