Writing in the front

From vuE-CLI3, vuE-CLI scaffolding tools have taken a big leap forward, bringing a new development experience, simplified configuration solutions, and even visual interface operation. This wave is really amazing!

In terms of details, there are mainly the following experience upgrades: 1. Create a project

  • vue create hello-world
  • UI Operationsvue ui

2. Configuration options for creating a project can be saved as preset file.

  • savedpresetThere will be usershomeThe next directory is called.vuerc 的 JSONIn the file. If you want to modify the savedpresetOption to edit the file.
  • During the project creation process, you will also be prompted to selectpreset

Vue-cli uses a plug-in based architecture, which is quite different from the old vue-CLI.

The old vuE-CLI had no choice but to change the project structure, webpack configuration, and the introduction of third party features/plug-ins. The new version of VUe-CLI is not the same, you can write plug-in, DIY various functions, also can search other people’s plug-in to use, is really a lot of silk slippery.

4. Webpack configuration introduces webpack-chain, we can use the chained API to modify the WebPack configuration.

5. Environment variables and modes have a vue.config.js configuration file by default, which is removed from the previous config folder and introduced the concept of patterns.

I decided to do a project to try a wave of ~

Project introduction

Map-chart is a visual mobile Web app built on Vue and Mint UI. Using the latest front-end technology stack, built AMap use scheme and echarts use and a variety of configuration schemes, support dynamic routing, simulation data, advanced search, map, data statistics and many other features.

It is also a great learning project, including solutions to common problems such as: front-end data simulation, data visualization, PWA, mobile maps, charts, skeleton screens, etc.

Online preview: Quick access on mobile

Online experience: git. IO /JeMCZ

Source: github.com/Neveryu/map…

The source code

Github.com/Neveryu/map…

Development & Use

1, after downloading the code, you can choose to introduce the project into the Vue UI visual interface to operate, in the left menu bar, you can carry out a series of installation dependencies, start the project, project configuration and so on.

2. After downloading the code, you can use the command line tool to go to the project directory and install dependencies and start the project the traditional way.

"scripts": {
    "start": "npm run serve"."serve": "vue-cli-service serve"."build": "vue-cli-service build"."lint": "vue-cli-service lint"."nofix": "vue-cli-service lint --no-fix"."new": "plop"
}
Copy the code

plop

Description of the NPM run new command

When we create a.vue file in the editor, it is blank by default. We need to create

So here, in this project, based on plop, there are two basic templates for creating new Views or components. You just need to run the following command:

npm run new
Copy the code

It is then easy to generate the base code snippets we want from the interactive prompts on the command line. I’ve just written a very basic snippet template that you can customize to your own needs.

If you find the configuration too complicated, I recommend installing a Snippets VS Code plug-in like Vue 2. This kind of code fragment can improve a lot of development efficiency in daily work.

The deployment of

The deployment of this project is simple. First, you may need to make some changes to the publicPath field in vue.config.js to suit your desired deployment environment. Then, use the NPM run build command to build the build front-end file and deploy the file to your server.

Write in the last

My home page: neveryu. Making. IO/index. HTML

QQ group: 685486827