preface

Take note of building a VUE project from scratch using VUe-CLI4 and encapsulating some of the tools. I hope that through this process, I can understand the knowledge used in a Vue project and integrate it into a system.

Install scaffolding vue-CLI4

Now the construction of Vue project is all built with the one-key scaffolding vue-CLI. Different versions of vue-CLI generate different project directories. Vue-cli has been updated to version 4.3.1 (2020/4/25). Note that the vue-CLI package name has been changed from vue-cli to @vue/cli on NPM since version 3.0.

So how to check the vue-CLI version number? Use the vue –version command. That’s right, you read that right. It’s vue. Not the vue-cli we take for granted.

This new project uses the latest version of Vue-CLI. My computer still installs version 3.5, so I need to update it first.

Sudo CNPM I -g@vue /cli

Create a Vue project

With vue-CLI installed, start a new project.

Run the vue create < Project name > command, and several preset configurations appear, to be selected as needed, or no brain Enter. I have chosen to use Vuex and Vue-Router by default, both of which are required for business projects.

Associate a local repository with a remote repository

The new project created via vue-CLI has been automatically initialized as a Git repository, so we need to associate the local repository with the remote repository.

  • Start by creating a repository on a code hosting site, such as Github or the code Cloud, and copy the repository address. Such as:https://github.com/Yourbones/vue-project.git.
  • Then open the command line in the local repository and typeGit remote add origin, press enter, and the remote library is successfully associated. thengit pushYou can push your code to the remote.

Configure the ESLint specification

Eslint is used to regulate code, and it is necessary to use ESLint to regulate code for both team and individual development. Here is a specification I found, written in.eslintrc.js under the root directory.

Configure different development environments and WebPack

During development, we often encounter different development environments, such as the most common: test environment, pre environment, etc. Different development environments use different interface addresses. So when you’re packaging, how do you know it’s a different environment? The answer is to configure the environment file by passing in a different –mode < environment name > when running the packaging command. This, combined with the.env.< environment name > file in the root directory, will automatically set the process.env environment variable to the environment name.

"scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "compile:test": "vue-cli-service build --mode test",
    "compile:pre": "vue-cli-service build --mode pre",
    "compile:prod": "vue-cli-service build --mode prod",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  }
Copy the code

For information on environment variables, refer to the vue-CLI4 documentation,Cli.vuejs.org/zh/guide/mo…

In addition to webpack, vue-cli4 has changed a lot. There is no webpack.config.js file. Everything is integrated into vue.config.js under the root directory.

Vue-router Indicates the route Settings

Vue projects now use VueRouter for routing management. Vue-router’s default hash mode is to simulate a complete URL using the HASH of the URL, so that when the URL changes, the page does not reload. For example, https://www.baidu.com/#/userInfo. For the browser, if the path after “#” changes, the URL is not considered to be changed, so the page is not refreshed. If we don’t want an ugly hash, we can use the History mode of the route, which makes full use of the History. pushState API to redirect the URL without having to reload the page.

const router = new VueRouter({
  mode: 'history'.routes: [...]. })Copy the code

However, this mode to play well, but also need to support background configuration. Because our application is a single page of the client application, if there is no correct configuration, the background when the user directly in the browser to http://oursite.com/user/id will return to 404, it’s not good-looking.

Instead, you need to add a candidate resource on the server that covers all cases: if the URL doesn’t match any static resources, it should return the same index.html page that your app depends on.

Since there must be more and more routes, we pulled out routes separately at the beginning and put them in the same directory. Create the routes.js file and put the routing relationship in it.

You also need to set up navigation guards and do some logical processing, such as permission determination, before the route jumps.

Vuex configuration

At the beginning of the project, the Vuex configuration remains the same, until the project state management becomes more complex, and then the separation of modules is considered.

Encapsulate HTTP requests twice

This is an important step, as the project communicates with the backend via HTTP requests. But most projects have their own handling of requests: intercepting requests, doing some header configuration, intercepting responses, and encapsulating error status. So we need a layer of encapsulation for the HTTP request.

So the question is, which library to use for HTTP requests? There are now two HTTP requests in the Vue project, the fetch that comes with the browser and the Axios library. Both have their pros and cons, and FETCH is now a built-in request method in the browser, requiring no additional installation of the NPM package. However, fetch does not carry cookies by default and needs to be set manually. Axios is a promise-based third-party request library that is widely used in Vue projects. But axios also defaults to success for requests that return status codes in the 400 and 500 series, requiring manual status code determination and error encapsulation.

I used Axios because I had a lot of experience with it. In the axios.js file, encapsulate POST, GET, and other request methods twice. Then export the entire file as a module. In the entry file main.js, mount the entire axios module to vue.prototype, and from then on, every.vue file can use the axios-wrapped request method directly.

Add a global style file

The global style file is important. For a project, the basic reset.css file is used to unify styles across browsers. In addition, if you want to pull out the common style sheets, you can also store them in the SRC /style folder.

Adding tools

We often encounter some tools that need to be used globally, such as determining whether it is a wechat environment, formatting price numbers and so on. We can accumulate the methods we encounter in daily business, and unify them in the SRC /utils folder, and then introduce them when using.

Adding a Global Filter

Similar to the tooling approach, we also need some generic global filters to format the string.

Px -> VW for mobile

Vw can be a good substitute for REM for style writing, which requires a plug-in to automatically convert PX to VW, it does not need the front end to convert PX itself, it is recommended.

Using component libraries

Component libraries are necessary for large businesses. For details, please refer to the official documentation of component libraries for installation. Vant-ui and Cube-UI are recommended here.

The warehouse address

The above are just the main points to consider; the code content is in my repository, where each commit description represents every step of the way. The world is difficult, must be done in easy, the world, must be done in fine. With you!