Table of contents
3. Other configuration of the project
3.1 When the project is running, let the browser open automatically
3.2 Turn off the eslint verification function
3.3 Shorthand method of src folder
1. Create a project
vue create 项目名
2. Project file introduction
The created project contains the following files:
(1) node_modules: store the dependencies required by the project
(2) public: generally place static resources (such as pictures). Note : Static resources placed in the public folder will be packaged into the dist folder intact when using webpack for packaging, and will not be packaged into the js file as a module.
(3) src: the folder where the code is stored, which contains assets, components folders and App.vue, main.js files
* assets folder: Generally, static resources shared by multiple components are placed. Note : When the static resources stored in the assets folder are packaged by webpack, webpack will treat the static resources as a module and package them in the JS file.
* components folder: generally placed non-routing components (global components)
* App.vue: the only root component
* main.js: program entry file, which is the first file executed in the whole program
(4).gitignore: the file used when uploading git
(5) babel.config.js: configuration file
(6) package.json file: It can be considered as the ID card of the project, which is used to record what the project is called, what dependencies are in the project, and how the project runs.
(7) package-lock.json: cache file
(8) REAMDE.md: Description file
3. Other configuration of the project
3.1 When the project is running, let the browser open automatically
Run the project first. Enter the following command in the project path:
npm run serveIf you encounter the following error:
The reason is that the version is not compatible. Execute the following command, and then execute npm run serve
set NODE_OPTIONS=--openssl-legacy-providerSuccessfully run as follows:
But the browser will not open automatically at this time, we need to manually enter in the browser address bar: http://localhost:8080/
If you want to automatically open the browser, you need to add --open to line 6 in package.json
At this point, re-run npm run serve to automatically open the browser.
3.2 Turn off the eslint verification function
eslint can detect whether the syntax is correct, but there will be situations where declaring a variable is useless and prompting an error, so it can be turned off.
Closing method:
In the project root directory, create a file named vue.config.js
Add the following code to this file
module.exports = {
lintOnSave:false //关闭eslint
}
3.3 Shorthand method of src folder
Function: Configure the alias as @, let @ represent the src folder, so that there will be too many files in the future, and it will be much more convenient to find
step:
Create a file named jsconfig.json in the root directory
Add the following code to this file:
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"dist"
]
}