Setting up the front-end environment

The node environment

First, make sure node is installed

Document address: nodejs.cn/

Vue CLI scaffolding

Document address: cli.vuejs.org/zh/

Installation method:

npm install -g @vue/cli
# or
yarn global add @vue/cli
Copy the code

Create a project:

vue create manager-web
Copy the code

Install the plug-ins required for the project

#Install project production dependencies
npm install vue-router vuex element-plus axios -S

#Install project development dependencies
npm install sass sass-loader -D
Copy the code

PS:

  1. Why was it used?element-plusInstead of usingelement-ui.element-plusVue 3.x is based on the upgraded version.
  2. NPM installation – s-D functions and differences (in order to control the length, selected into a separate blog) 👉 click to see

Develop a directory structure

Encapsulates routing

Vue CLI project

You can add a Vue Router as a project plug-in;

CLI will overwrite your app.vue, so make sure to back up this file before running the following commands in your project;

vue add router
Copy the code

Manual packaging

Reference: next.router.vuejs.org/zh/guide/#j…

Environment configuration

Address: document cli.vuejs.org/zh/guide/mo…

Create.env.dev and.env.production files in the root directory as configuration files for the development environment and production environment

Variables start with VUE_APP_. Example:

# .env.dev VUE_APP_BASE_API='/' VUE_APP_MOCK_API='https://www.fastmock.site/mock/dbef3a612bad60772d0d2a08d56d93b8/api' VUE_APP_TITLE=' Test environment title 'Copy the code

In the package.json file, specify the schema

Reading configuration variables

process.env.VUE_APP_TITLE
Copy the code

Axios secondary encapsulation

The document address: www.npmjs.com/package/axi…

The request to encapsulate

There’s a bit too much space here, but it’s a separate blog, 👉

Storage Secondary Encapsulation

Storage here refers to the Local Storage and Session Storage of the browser

For example, the Local Storage format is key=val. However, this val can only be a String. If Object data is stored, it cannot be read.

To prevent variable overwriting when the project is large, namespaces are introduced.

Implementation idea:

Due to the introduction of the namespace, when assigning a value, read it first and convert it to an object format. After adding new data, convert it to a string and store it in the Storage.

Create/SRC /utils/storage.js file, implement storage, read, clean, etc., and then mount to the global;

Home page Layout

reset.css

Introduction/SRC/assets/style/reset CSS file, in the App. Vue was introduced

<style lang="sass">
@import './assets/style/reset.css'
</style>
Copy the code

However, an error was reported, with the following error message

Syntax Error: TypeError: this.getOptions is not a function
Copy the code

The solution

NPM uninstall --save sas-loader // uninstall NPM i-d [email protected] // installCopy the code

structure