The composition structure of a single file component

  • Defects in traditional Vue components

    • The problem
      • Globally defined component names cannot have the same name
      • String templates lack syntax highlighting
      • CSS is not supported (CSS is not involved when HTML and JS are componentized)
      • No build step restrictions, only H5 and ES5, not Babel
    • The solution
      • Use Vue single-file components, each with a.vue suffix

  • The Vue single-file component consists of three parts

    • The template area of the template component
    • An area of business logic composed of script
    • Style area

  • Use of Vue single file components

    • </template> <script> // js code area export default{data:(){return{} // data, Methods :{} // function..... </script> <style scoped>Copy the code
      • Export default Exposes object data
      • Coped: Prevents conflicts between component styles
        • -Leonard: I’m not sure about the scope
        • Style add scoped is private style, local style

  • Configure the loader for the. Vue file

    • Configure the loader for the VUE component

      1.NPM install vue-loader vue-template-compiler-d to install vUE components2.In the webpack.config.js configuration file, add the following configuration items of vue-loaderconst VueLoaderPlugin = require("vue-loader/lib/plugin");
     module.exports = {
             // Introduce the vue loader plug-in
            plugins: [new VueLoaderPlugin()],
               
                 // Match rules for all third party file modules
                  module : {
                     rules:[
                       {  test:/\.vue$/, loader:"vue-loader"}}}]Copy the code

  • Use vUE single files in webPack projects

    • steps

      1.Run NPM install vue -s to install vUE2.In the SRC -> index.js entry file, passimport Vue from "vue"To import the Vue constructor3.Create a Vue instance object and specify the EL region to control4.Render the single-file component with the render function as follows// Import the Vue constructor
   import Vue from "vue"
  // Import a single veu file like Components/app.vue
   import APP from 'components/App.vue'
     const vm= newVue ({// Specify the page area to be controlled by the VM instance
        el:"#app".// Use the render function to render the specified component into the EL regionRender: h=>h (APP)})Copy the code

    • Render is a method, is created by a vue node is also an HTML template, and then render to the specified node

Webpack is packaged and distributed

  • configuration

    • Before launching the project, we need to package the application as a whole through Webpack. You can configure the packaging command through package.json file

    • 1.Configure the WebPack packaging configuration in package.json file// This command loads webpack in the project root directory by default. Config.js configuration file
"scripts": {// The command used for packaging
   "build":"webpack -p"
}
Run the bu run build command
Copy the code
      • -p: indicates the package parameter. Package: indicates the package
      • The build command executes webpack-p for packaging, which is packaged according to the packaging configuration in the webpack.config.js configuration file
      • Once packaged and published, the dist directory is generated with bundle.js and index.html files

Vue scaffolding with Element-UI component libraries