Get an explanation of the configuration and conventions of the webpack-simple app template.
- [Instructor] In this video,…we'll spend some time exploring the skeleton application…that was created for us by VCLI,…and also how Webpack will manage the various modules…that represent our view components.…The page that we're looking at here in the browser…can be found inside that single file components directory.…It's the index.html file.…One thing you might notice here…is that the single file bundle that it refers to…is at dist/build.js,…which doesn't actually exist in…the single file components directory that was created.…
However, the Webpack dev server…will respond to requests for this file…by serving the bundle that contains the core view script,…Webpack dev server code, and the code for our components.…You can see that there's quite a lot going on in this file,…and it's very different than the one…that we'd be using in production.…For example, if I right click the project directory…and choose open terminal here, or alt+L,…then I could execute npm run build instead of dev,…and then we'll be able to see the actual file,…
In this course, Michael Sullivan introduces the Vue framework, explains which problems it aims to solve, and shows how to add Vue to a new or existing webpage. Michael examines a Vue instance and its lifecycle, and shows simple and advanced data binding techniques along with how to manage CSS related attributes dynamically and handle user input and events. After he covers the key concepts and basic conventions of Vue, Michael dives into its component system, which can help you create modular, reusable code, and shows how to use the vue-router plugin to set up a single-page application with client-side routing.
- Creating a Vue app
- Applying control logic
- Binding to the style attribute and class attribute
- Reviewing the features of a Vue instance
- Registering and using Vue components
- Installing vue-cli and webpack
- Understanding the Vue app skeleton