preface

Since the official version of Vue 2.0 was released in October last year, React has been fully developed on Vue. We have developed four or five projects one by one and accumulated some experience. Now I would like to share and discuss with you. My English level is too low, if there are mistakes, please correct me.

Standard configuration of modern front-end

In the past two years, the front end has developed rapidly with each passing day and various frameworks have emerged in endlessly. This is a bad era as well as the best era. It is fortunate to be able to witness it and practice it in this era.

  • Front-end frameworks: Vue, React, Angular
  • Packaging tools: Webpack, Gulp, Rollup
  • Syntax effect: Eslint
  • CSS preprocessor: Less, Sass, PostCSS
  • Syntax compilers: Babel, TypeScript… The advent of a new era of Web technology pushes history forward like a torrent.

Unified packaging configuration for multiple projects

Although Vue officially provides scaffolding for vuE-CLI for our rapid development, if there are multiple projects, each project generates a set of packaged configuration, it is easy to make some customization for each project, which leads to some deviation between projects. However, these are not what we want. Therefore, it is necessary to separate out a set of internal packaging configurations, create a separate Git package, and then have other projects rely on that Git package.

How should Vuex be used?

I’m sorry that Vuex is only used to Store user information and other universal data in my project. I don’t suggest storing the data of every page in Store, because that will cause the program to be extremely complicated and make me feel doubled pressure every time I add a page.

Unified Mixins handle page data requests

In SPA applications, cannot leave the most is how quick and easy access to the page data, unified handling routing changes to update the data, data cache for the page to list and details, editing and sharing a new model, and sometimes fields than the details of the list of fields, so need to add a field mechanism of completion.

Export default function MixinPagesGet () {const opt = {list: } object. assign(opt, arguments[0]) return {list: {// list of mixins of various logic}, detail: {// Details, modifications, new mixins of various logic}}}Copy the code

Uniformly handle errors of Methods

In order to avoid the callback hell, Promise is a magic tool. Once it is met, it is too late. Both Fetch and third-party request modules generally support Promise, so we can use vue-methods-Promise module to deal with all kinds of errors uniformly

Better specification for Vue component development

In JS, there is no order in the key value of object object, but there is an order in the reading order of people. Writing according to the order of hook execution can make others better understand your code, if it is not the hook, it will be put last. Such as:

export default {
  mixins: [],
  data () {
    return {}
  },
  mounted () {
  },
  destroyed () {
  },
  watch: {
  },
  methods: {
  }
}Copy the code

How to pack a standard package

In daily development, we have development environment, test environment, formal environment and so on. We need to print out a standard package for operation and maintenance to configure different environments. We can set this in the HTML file of the entry

<% if (process.env.NODE_ENV == 'production') { %> <script src="<%=webpack.publicPath %>configs.js? v=<%=new Date().getTime()%>"></script> <% } %>Copy the code

Set in JS of config

Let configs = {} if (process.env.node_env === 'production') {configs = window.__configs // set in config.js} export default configsCopy the code