Home > Article > Web Front-end > What to put in vue scaffolding public
Generally, some static resources (pictures) are placed in the public folder. When webpack is packaging, they will be packaged intact into the dist folder. Files in the public directory will not be processed by Webpack, they will be copied directly to the final packaging directory (the default is dist/static); these files must be referenced using absolute paths, which depends on your "vue.config.js" In the configuration of publicPath, the default is "/".
The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.
1. The first step (only executed for the first time): Global installation @vue/cli
npm i @vue/cli -g
2 , switch to the directory where you want to create the project, and then create the project
vue create XXX
3. Start the project
npm run serve
Notes:
1. npm Taobao mirror address
npm config set registry https://registry.npm.taobao.org
2. Vue scaffolding hides all webpack related configurations. If you want to view and execute
vue inspect > output.js
node_modules folder:Project dependency folder
public folder:
Generally place some static resources (pictures). It is worth noting that static resources placed in the public folder will be packaged intact into the dist folder when webpack packages them.
Any static resources placed in the public folder will be simply copied without going through webpack. You need to reference them via absolute paths.
Note that we recommend importing resources as part of your module dependency graph so that they will be processed by webpack and gain the following benefits:
The public directory provides a workaround. When you reference it via an absolute path, pay attention to where the application will be deployed. If your application is not deployed at the root of the domain, then you need to configure the publicPath prefix for your URL:
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
data () { return { publicPath: process.env.BASE_URL } }
Then:
<img :src="`${publicPath}my-image.png`">
When to use the public folder
vue-cli3.0 has two directories for placing static resources: public and assets.
public places files that will not change (equivalent to static in vue-cli2.x)
Files in the public/ directory will not be processed by Webpack: they will be processed directly is copied to the final packaging directory (default is dist/static). These files must be referenced using absolute paths. This depends on the publicPath configuration in your vue.config.js. The default is /.
assets put files that may change
The files in the assets directory will be processed and parsed into module dependencies by webpack, and only relative path forms are supported.
To put it simply, public places other people’s js files (that is, they will not change), and assets puts the js files written by yourself (files that need to be changed)
src folder
## The assets folder: generally used to store static resources (static resources shared by multiple components), it is worth noting that it is placed in the assets file When webpack packages the static resources in the folder, webpack will treat the static resources as a module and package them into JS files. The components folder: generally places non-routing components (global components) App.vue: the only root component (summary of all components) main.js: entry file , is also the first file to be executed in the entire program .gitignore: Configuration ignored by git version control (generally not touched) babel.config.js: babel’s configuration file (equivalent to translation Official, for example, translating ES6 related grammar into ES5, which has better compatibility and is generally not touched)package.json: Application package configuration file (similar to a project ID card, recording project name, project dependencies, project running and other information)
package-lock.json: package version control file (cacheability File)
README.md: Application description file (descriptive file)
vue.config.js: Scaffolding can be customized. For how to configure it, please refer to Vue CLI
Other folders:
pages folder: stores routing related components (pages can also be replaced by views)
router folder: routing configuration file
store folder: vuex related files
mock folder: stores mock simulation data
vue-cli scaffolding environment: based on node webpackTo support us in writing vue projects
Default entry file main.js: All codes must have a direct or indirect introduction relationship with main.js
Packaging process: Execute packaging At this time, webpack will build a code map based on the introduction relationship of the entrance, translate the relevant code with a loader/plug-in, output it to a .js file, and insert it into index.html to run
① main.js → Package and run entrance
② Vue.component("component name", component object) → Register a global component for Vue
Execution sequence: first register the global component through the main.js file, and then This global component is used within the component
[Related recommendations: vuejs video tutorial, web front-end development]
The above is the detailed content of What to put in vue scaffolding public. For more information, please follow other related articles on the PHP Chinese website!