Some time agovue3launchedbataVersion, but the official version is still some time, today to provide a build by# vue-cli4 + vue2.6 + vuex + vue-router + axios + element-uiBuild the framework, so that we can quickly develop, skip the complex project creation and configuration process. The project has encapsulated requests and tools, directives, and common functions:Project screenshots:

Vue – cli scaffold

Vue is a set of progressive frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. On the other hand, when combined with modern toolchains and various supporting libraries, Vue is perfectly capable of providing drivers for complex, single-page applications.

The installation

With Node and NPM already installed, it only takes one command to install.

npm install -g @vue/cli
Copy the code

Create a project:

vue create project-name
# (project-name is your project name)
Copy the code

By default, will be installed vue – the router, vuex, axios, eslint, typescript, Babel and other commonly used tools, can be selectively installed manually. Here I will not repeat, because our framework has been built, the framework is based on vuE-CLI4 to build, compared with the previous VUE-CLI2, and VUE-CLI3 have a lot of optimization.

Vue-router Indicates a routing tool

Vue-router is the official routing plug-in of vue.js. It is deeply integrated with vue.js and suitable for building single-page applications. The single-page application of VUE is based on routing and components, which are used to set access paths and map paths to components. The traditional page application uses some hyperlinks to realize the page switch and jump. In vue-Router single-page applications, it is switching between paths, that is, switching between components. The essence of routing module is to establish the mapping between URL and page. This framework has implemented the route interception, dynamic routing and other configurations.

Route interception:
// Route interception
router.beforeEach((to, from, next) = > {              // Add a progress bar for route redirection
  // Handle page location
 if(to.fullPath === '/'){
  router.push('/baseStudy')}// if(to.name ! = 'login' && ! commonUtil.getCookie('login')){
  // // vue.showalert (' not logged in, adjusted to home page ')
  // router.push('/login')
  // return
  // }
  NProgress.start();    // Top progress bar
  next()
});
Copy the code
Route configuration and dynamic routing
const baseRoute = [
 {
  name: 'layout'.path: '/'.component: layout,
  / / zi lu by
  children: arr
 }
]
// Use the new feature addRoutes of Vue-Router2.2.0 to implement dynamic route loading and menu loading, which is used in the background management system. Route data is extracted from the database
router.addRoutes(baseRoute)
export default router
Copy the code

Vuex status management

Vuex is a state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way. The purpose of Vuex is to manage shared state. To do this, Vuex has a set of rules to follow, such as changing data source state, triggering actions, etc., in order to make the project structure clearer and easier to maintain. At the heart of every Vuex application is the Store. A Store is basically a container that contains most of the states in your app. In large projects, VUEX is essential.

Define state and mutations
const state = {
	isLoading: false,
	menuPosition: '1-0',
	isMobile: false,
	isShowMenu: false
}
const mutations = {
	setShowLoading(state, val) {
	state.isLoading = val;
},
Copy the code
Vuex and VuexPersistence are introduced to cache state
import VuexPersistence from 'vuex-persist'
import {state,mutations} from './mutations.js'
Copy the code
Const vuexLocal = new VuexPersistence({storage: VuexPersistence) const vuexLocal = new VuexPersistence({storage: VuexPersistence); LocalStorage, reducer: state => ({menuPosition: state.menuPosition // add menuPosition to cache to prevent menu pointer error after browser refresh), filter: (mutations) => ( mutations.type === 'setMenuPosition' || mutations.type === 'setArbitration' ) }) Vue.use(Vuex) export default new Vuex.Store({ state, mutations, plugins: [vuexLocal.plugin] })

Introducing axios, the request tool

The first thing to understand is what Axios is: Axios is based on promises for browsers and Node.js is an HTTP client. Features include: browser and Node.js support, promise support, request and response interception, request and response data conversion, request cancellation, automatic conversion of JSON data, browser support to prevent CSRF (cross-site request forgery). Any non-static project cannot do without a request tool.

Axios introduction and configuration
import axios from 'axios'
axios.defaults.baseURL = baseURL
Copy the code
Axios requests an interception
// Add request interceptor
axios.interceptors.request.use(function (config) {
 // Request prior to interception
  // Get a cookie before requesting to see if you are logged in
  // if(config.url.indexOf('/login') < 0 && ! commonUtil.getCookie('login')){
  // // vue.showalert (' not logged in, has jumped to home page ')
  // router.push('/login')
  // return
  // }
 store.commit('setShowLoading'.true)
  if (config.method === 'post') {   // Post requests to add paging parameters
    if(! config.data) { config.data = {} }let params = {
      PageNo:baseConfig.pageNo,
      PageSize:baseConfig.pageSize
    }
    config.data  = Object.assign(params, config.data);
  }
  // What to do before sending the request
  return config;
}, function (error) {
 store.commit('setShowLoading'.false)
  // What to do about the request error
  return Promise.reject(error);
});

axios.interceptors.response.use((response) = > {
 // Return data interception
 store.commit('setShowLoading'.false)
  return response
},(err)=>{
 store.commit('setShowLoading'.false)
  return Promise.reject(err)
});
Copy the code
Axios requestFul request encapsulation
 / / patch request
Vue.prototype.$patch = function (url, parmas, successCallBack, errorCallBack) {
    this.$axios.patch(url, parmas).then(res= > {
        successCallBack(res.data)
    }).catch(err= > {
        (errorCallBack && errorCallBack()) || this.showAlert('error', err)
    })
}
/ / delete request
Vue.prototype.$del = function (url, parmas, successCallBack, errorCallBack) {
    console.log(parmas, 'params')
    this.$axios.delete(url, {data: parmas}).then(res= > {
        successCallBack(res.data)
    }).catch(err= > {
        (errorCallBack && errorCallBack()) || this.showAlert('error', err)
    })
}
/ / put request
Vue.prototype.$put = function (url, parmas, successCallBack, errorCallBack) {
    this.$axios.put(url, parmas).then(res= > {
        successCallBack(res.data)
    }).catch(err= > {
        (errorCallBack && errorCallBack()) || this.showAlert('error', err)
    })
}
/ / post request
Vue.prototype.$post = function (url, parmas, successCallBack, errorCallBack) {
    this.$axios.post(url, parmas).then(res= > {
        successCallBack(res.data)
    }).catch(err= > {
        (errorCallBack && errorCallBack()) || this.showAlert('error', err)
    })
}

/ / get request
Vue.prototype.$get = function (url, parmas, successCallBack, errorCallBack) {
    parmas = Object.assign(defaultParams,parmas)
    this.$axios.get(url, parmas).then(res= > {
        successCallBack(res.data)
    }).catch(err= > {
        (errorCallBack && errorCallBack()) || this.showAlert('error', err)
    })
}
Copy the code

Element – UI UI library

The framework uses Element-UI as a component library. The framework is provided by Ele. me,an open source framework with rich components, as well as reace,angular, which is widely used in Web projects.

Mobile adaptation

The framework adopts PX2REM, Lib-flexible adaptation scheme to do mobile end adaptation. The principle is realized based on REM, and it can automatically convert px written in the style to REM. And it doesn’t convert on the Web side.

The framework itself

Main functions:

  1. Vue-cli4 was used to build the system
  2. Vue-router is used to realize routing and single page application
  3. Use VUEX as a state management tool
  4. Axios does the request tool
  5. Element-ui is the UI framework.
  6. The project implements dynamic routing, cross-domain configuration, request interception, route interception, state local storage and so on.
  7. The project joinspx2rem,lib-flexibleImplementation of mobile end adaptation scheme

Most of the source code I wrote is in Github.

Framework download address: address

Online access address: address

Personal blog: Address

Learning is like rowing upstream, not to advance is to fall back, the rapid development of front-end technology, if you don’t keep learning every day, you will not keep up, I will accompany you, every day to push blog, progress with you, I hope you can pay attention to me, the first time to receive the latest article.

The public no. :