Please enable JavaScript.
Coggle requires JavaScript to display documents.
02. SINGLE-FILE COMPONENTS (A single-file component (<template>…
02. SINGLE-FILE COMPONENTS
The vue-cli-service is a development dependency that is installed to each and every vue-cli scaffolded project (as of Vue CLI 3.0). This service, built on top of webpack and webpack-dev-server, introduces the commands for us to build, lint, test, and serve our application
eslintConfig lists the details of our applications ESLint configuration. In the Vue CLI, ESLint can be configured with the eslintConfig field in package.json or a separate .eslintrc file
postcss is the configuration of the PostCSS plugin that helps parse CSS and add vendor prefixes to certain CSS rules. It does this with the help of Autoprefixer52 which is enabled by default in Vue CLI projects. Instead of specifying the PostCSS details in a postcss field, we’re able to do the same in a .postcssrc file as well
browserslist declares the browsers our application is targeting. The details in browserslist is used by both our application’s babel configuration (to determine the appropriate JavaScript transpilation) as well as autoprefixer (to determine the appropriate CSS vendor prefixes)
The built files will be auto injected comment references the fact that in the production build (i.e. the dist/ folder that’s generated from the application build script), the app configuration will auto inject the built files into the index.html file
A single-file component
<template> which contains the component’s markup in plain HTML
<script> which exports the component object constructor that consists of all the JS logic within that component
<style> which contains all the component styles
Single-file components in Vue are made possible due to build tools like Webpack. These tools work alongside the vue-loader or vueify packages respectively to compile .vue components to plain JavaScript modules that can be understood in browsers
Managing data between components
Parent-Child Components
props
Child-Parent Components
Event emitter
Sibling Components
Using a global event bus
Using a simple, shared store object (for simple state management)
Using the state management library Vuex
<script src="/dist/build.js"></script>
The filenames for single-file components should either be kebab-case (calendar-entry.vue) or PascalCase (CalendarEntry.vue)
Vue style guide suggestions It is recommended for components with no content to be self-closing (e.g. <CalendarEntry /> instead of <CalendarEntry></CalendarEntry>) when declared in single file components