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. Install Vue scaffolding

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

2. Purpose of each folder of the vue-cli scaffolding initialization project

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:

• Scripts and stylesheets will be compressed and Packed together to avoid additional network requests.
• If a file is lost, an error will be reported directly during compilation, instead of a 404 error being generated on the user side.
• The final generated file names include the content hash, so you don’t have to worry about browsers caching older versions of them.

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:

• in public/index.html or other via html-webpack- In the HTML file that plugin is used as a template, you need to set the link prefix by
  <%= BASE_URL %>:

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

• In the template, you first need to set the link prefix to your The component passes in the base URL:

data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

Then:

<img :src="`${publicPath}my-image.png`">

When to use the public folder

• You need to specify a file in the build output name.
• You have thousands of images and need to dynamically reference their paths.
• Some libraries may be incompatible with webpack. In this case, in addition to using a separate one,

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

3. Scaffolding working environment

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!