preface

Recently IN the development of background management project, at the beginning of the plan to use someone else’s, to write a later. Writing this article is to record my experience and summary in the development process. Need to install in advance (Node, Npm, Vue Cli3), know in advance (Vue, Vue Router, Vuex, Ant Design Vue, ES6)

Create a project

Run the Vue UI command to open the GUI

  1. Select folder (place projects in that directory)

  1. Preset (I have player action configuration)

  2. Features (select preinstalled dependencies)

  3. Configuration (code configuration for the project)

  4. Successful installation

6. Run it

Now that you’ve installed it, it’s time to configure the project.

Configuration items

1. Install dependencies (install dependencies as needed)

How to introduce Ant-design-vue

2. Configuration load on demand (babel-plugin-import must be installed first)

Ensure the following configurations.

// babel.config.js
plugins: [
	[
		'import',
		{ libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true}]]Copy the code
// main.js
import { Button } from 'ant-design-vue'Vue. Use (Button) // Global registration required componentsCopy the code
// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: { javascriptEnabled: true}}}}Copy the code

If there is a Button on the page, the configuration is successful! I’m ready for the next step

3. Organize project folders

|-- manage |-- .editorconfig |-- .gitignore |-- package-lock.json |-- babel.config.js |-- vue.config.js |-- package.json | | - README. Md - public | | -- the favicon. Ico | | -- index. / / HTML | - SRC | - API interface | | - assets / / static resources -- logo. PNG | - Components / / component | - | - layout / / config / / project configuration layout | | - a mock / / simulation data - routing | -- the router. The router / / js | - store / / vuex | - store. Js | -- -- utils / / tools | | - views / / page -- Home. Vue | -- App. Vue | -- main. JsCopy the code

Then install the required dependencies first

// package.js
"dependencies": {
	"vue": "^ 2.6.10"."vue-router": "^ 3.0.3." "."vuex": "^ 3.0.1." "."axios": "^ 0.18.0." "."ant-design-vue": "^ 1.3.10"."core-js": "^ 2.6.5." "."nprogress": "^ 0.2.0." "."moment": "^ 2.24.0"."vue-ls": "^ 3.2.0"
},
"devDependencies": {
	"@vue/cli-plugin-babel": "^ 3.8.0." "."@vue/cli-plugin-eslint": "^ 3.8.0." "."@vue/cli-service": "^ 3.8.0." "."@vue/eslint-config-standard": "^ 4.0.0"."babel-eslint": "^ 10.0.1." "."babel-plugin-import": "^ 1.12.0"."eslint": "^ 5.16.0"."eslint-plugin-vue": "^ 5.0.0"."less": "^ 3.0.4"."less-loader": "^ 4.1.0." "."vue-template-compiler": "^ 2.6.10"."mockjs": "^ -beta3 1.0.1"
}
Copy the code

This chapter said here, the next chapter is to build the project of the foundation shelf, shelf steady work.

I’m a little nervous about my first post, and I hope I can point out my shortcomings.