Detailed analysis of SFC and vue-loader in Vue
This article shares with you a specific analysis of SFC and vue-loader in Vue. The content is very good. Friends in need can refer to it. I hope it can help everyone.
Official website: https://vue-loader.vuejs.org/zh/
vue-loader is a webpack loader. Simply put, it converts vue files into JS modules. When the babel-loader or bubble-loader configuration is detected, ES2015 is automatically supported;
Using vue-loader, you can write a component in the form of Vue Single-File Component (SFC), that is, a single file component.
.vue Single File Component (SFC) Specification
1. Template block
At most one < template > in one SFC ;Block;
Its content will be extracted as a string and passed to vue-template-compiler, then webpack will compile it into a js rendering function and finally injected into the component exported from <script>;</p>
<h5 id="lt-script-gt-Script-block">2. <script>Script block</h5>
<p>One SFC can have at most one <script> block; <br> Its default export should be a Vue.js component options object, which can also be exported by Vue. The extension object created by extend(). <br>Thinking: data in Vue.extend() must be a function, so in the script of .vue SFC, the data in export is a function</p>
<h5 id="lt-style-gt-Style-block">3. <style>Style block</h5>
<p>A .vue file can contain multiple <style> tags; <br> Can be encapsulated using scope and module; <br> Multiple <style> tags with different encapsulation modes can be mixed in the same component; </p>
<h5 id="Custom-language-block">4. Custom language block</h5>
<p>vue-loader will use the block name to find the corresponding loader for processing. You need to configure webpack.config</p>
<h5 id="All-language-blocks-Support-src-import">5. All language blocks Support src import</h5>
<p>The import path follows the same path resolution rules as webpack module request<br>// The relative path needs to start with ../<br><template src="./template.html"> ;</template><br><style src="./style.css"></style><br><script src="./script.js"></script>
vue-loader feature overview
Supports the use of other non-default languages for each template, script, and style module of the component, such as: