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:
- Why was it used?
element-plus
Instead of usingelement-ui
.element-plus
Vue 3.x is based on the upgraded version. - 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