Project build
1. cmd enters the terminal under the project path
2. Enter vue create project
project is the name of the built project, which can be modified by yourself
You can choose which version of vue to use
After selecting, press Enter, and the project will start to build
If you want to choose the third Manually select features custom configuration, you can refer to this blog for specific configuration items https://blog.csdn.net/weixin_42617917/article/details/115774098
3.npm run serve to start the project
See the following interface to indicate that the project was built successfully
Project directory introduction
1. public folder
Generally, some shared static resources are placed, and when they are packaged and launched online, the resources in the public folder are packaged into the dist folder intact
2. src folder
（1）assets
It is often used to place some static files (metaphorical pictures). When the project is packaged, the resources in this folder will be packaged as a module (in the js folder)
（2）components
Generally place non-routing components (or project common components)
(3) App.vue
the only root component
（4） main.js
main.js entry file (the first file executed by the program)
3. babel.config.js
babel configuration file
4.package.json
You can see the project description, project dependencies, and project operation instructions here
5.README.md
project documentation
6.jsconfig.json
By default, without any additional configuration, VSCode already provides JavaScript support for js files in Workspace, including IntelliSense (intelligent prompt), Snippets (code snippet), Debug (debugging), Format (formatting ), Validate (check), etc. But in some special scenarios, we need a file called jsconfig.json, which specific occasions can be Baidu
7.package-lock.json
package-lock.json is a file generated during npm install, which is used to record the specific source and version number of each npm package actually installed in the current state, and lock the version number of the package during installation. When the project needs to be uploaded to git , you can ensure that everyone's dependency packages are consistent.
8.vue.config.js
vue.config.js is an optional configuration file
9.gitignore
Files recorded here will not be uploaded to git
Some practical basic configuration
1. The configuration is automatically opened in the browser after the project runs
in the package.json file
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}Add the following code in vue.config.js:
devServer: { host: 'localhost', port: 8080 }2. Close the eslint verification tool
In the vue.config.js file, add the following code
module.exports = { lintOnSave:false}3. Configure an alias for the src folder
In order to introduce files under src more concisely, you can configure an alias for src
Create jsconfig.json file
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"dist"
]