Vue-Cli3+Antd-based mid-background management model-01-using Vue CLI3 to quickly create projects

First, Preface

From the end of last year to the beginning of this year, a background management framework was built using Vue2.x+elementUI.
The purpose is to build the front-end engineering, customize the Vue-cli2.x source code and add some functions.
By learning the source code of cli and scaffolding template, I have made three kinds of scaffolding for admin, app and web respectively.
One-key generation of scaffolding template project is realized by customizing cli command
 Three types of scaffolding integrate some out-of-the-box functions according to different use environments and scenarios:
Such as interface framework, common components, dynamic extensible routing, Vuex, toolset, interface encapsulation, unit testing, performance optimization, etc.

I've been looking for opportunities to rebuild based on Vue cli3, this time based on Vue cli3 + Ant-Design-Vue.
Step by step implementation of an out-of-the-box mid-background management platform template

The first step is to use Vue CLI3 to create project scaffolding

Second, install Vue CLI3


npm install -g @vue/cli
The name of Vue CLI 3 package changed from vue-cli of 2.x to @vue/cli
 This is the package naming rule recommended by the new npm for scopes

Installation error:

npm ERR! Unexpected end of JSON input while parsing near '...vAL4sFmoEpFPuXkeHiw=='

Clear Cache

npm cache clean --force

3. Create projects under specified directories


bogon:~ brave$ cd GitHubProjects
bogon:GitHubProjects brave$ vue create vue-framework-admin

4. Scaffolding

1) Choosing configuration scheme

Vue CLI v3.9.3
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features 
Customization: Manual select features 

2) Configuration selection

? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
❯◉ Unit Testing
 ◯ E2E Testing
Babel - Automated Selected
 Not using typeScript:vue's support for typeScript is incomplete
 PWA: Background project, no need to support PWA
 router - Need
 vuex - Need
 css pretreatment - need
 lint -- Automatically selected
 Unit Testing - Requirements
 End-to-end testing - not needed yet

3) Routing mode selection:

? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) 
hash mode will appear in url# and can no longer be used for positioning.
Using history mode, URLs are more concise

4)CSS preprocessor selection:

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): (Use arrow keys)
  Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
❯ Less 
Select Less: ant-design-vue component library using less to maintain uniformity and facilitate customization of themes

5)Lint selection:

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
❯ ESLint + Prettier
Select ESLint + Prettier

6) Timing of Lint Trigger

? Pick additional lint features: 
 ◉ Lint on save
❯◉ Lint and fix on commit
Lint both when the code is saved and when the code is submitted

7) Unit testing:

? Pick a unit testing solution: 
  Mocha + Chai 
❯ Jest 
Choose Jest

8) Storage of configuration files:

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arro
w keys)
❯ In dedicated config files 
  In package.json 
Put it in a separate file, not all in package.json

9) Save all current configurations for next use

? Save this as a preset for future projects? (y/N) 

9) Scaffolding Generation and Installation Dependence

Vue CLI v3.9.3
✨  Creating project in /Users/brave/GitHubProjects/vue-framework-admin.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...
> fsevents@1.2.9 install /Users/brave/GitHubProjects/vue-framework-admin/node_modules/fsevents
> node install
[fsevents] Success: "/Users/brave/GitHubProjects/vue-framework-admin/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" is installed via remote
> yorkie@2.0.0 install /Users/brave/GitHubProjects/vue-framework-admin/node_modules/yorkie
> node bin/install.js
setting up Git hooks
> core-js@2.6.9 postinstall /Users/brave/GitHubProjects/vue-framework-admin/node_modules/core-js
> node scripts/postinstall || echo "ignore"
added 1536 packages from 1001 contributors in 25.841s
🚀  Invoking generators...
📦  Installing additional dependencies...
added 121 packages from 121 contributors, updated 3 packages and moved 13 packages in 16.318s
⚓  Running completion hooks...
📄  Generating
🎉  Successfully created project vue-framework-admin.
👉  Get started with the following commands:
 $ cd vue-framework-admin
 $ npm run serve

5. Operating projects

Enter the project folder and execute the command to run:

bogon:vue-framework-admin brave$ npm run serve
> vue-framework-admin@0.1.0 serve /Users/brave/GitHubProjects/vue-framework-admin
> vue-cli-service serve
 INFO  Starting development server...
 98% after emitting CopyPlugin                                                    
 DONE  Compiled successfully in 4112ms                                                                                      13:53:29
  App running at:
  - Local:   http://localhost:8080/ 
  - Network:
  Note that the development build is not optimized.
  To create a production build, run npm run build.

View the results:

Sixth, End

Tags: Vue npm sass JSON

Posted on Tue, 06 Aug 2019 00:55:19 -0700 by __greg