This will come in handy when we build our project multiple times. Rimraf: Allows us, from the command line, to delete files. Then, copy this file into the dist folder. Html-webpack-plugin: Take our index.html and inject our bundled JavaScript file in the head. This will create and inject a style tag in the head of our HTML document. Vue-style-loader: Take the CSS we got from our css-loader and inject it into our HTML file. We need the next loader to actually do something with the CSS. This is another loader that by itself won’t do much. In other words, figure out where the CSS is. vue files or any CSS we might import into any of our JavaScript files and resolve the path to those files. These two “add-ons” will allow us to transform our ES6 code into ES5 code.Ĭss-loader: Takes the CSS we write in our. (It needs help from the next two and Babel by itself doesn’t do anything to your code. Webpack-dev-server: Although not needed for our small project (since we won’t be making any HTTP requests), we will still “serve” our project from a development server.īabel-loader: Transform our ES6 code into ES5. Webpack-cli: Needed to run the Webpack commands. Webpack: The tool that will allow us to pass our code through some transformations and bundle it into one file. Vue-loader and vue-template-compiler: Used to convert our Vue files into JavaScript. Here is a quick rundown of the dependencies we are using: Your project structure should look like this: The simplest Vue SFC project structure. Then, create the rest of the folders (except for node_modules ) as described above. Follow the on-screen prompts to create the project. From the command line, change to that directory and run npm init. To get started, create a folder called hello-world. Those will be created automatically when we initialize our project as an NPM project and begin installing our dependencies. Babel also needs a configuration file.įinally, since we are using NPM, we will also have a node_modules folder and a package.json file. Babel is one of those “add-on features” for Webpack. Babel allows us to write ES6 code which it then compiles into ES5. Since we will be using Webpack, we need a Webpack configuration file.Īdditionally, we will use a compiler called Babel. The source folder will help us separate the code we are writing from the code Webpack will eventually build. We will place these files in a folder called src. The most basic Vue project will include an HTML, JavaScript, and a Vue file (the file ending in. The Project: Build a Hello World Vue Application Using Single-File Components. Webpack, through the use of loaders and plugins, transforms this file into the HTML, CSS, and JS the browser can consume. The browser doesn’t know what to do with that extension. And, most code editors provide syntax highlighting and linting for these SFCs. Single-file components allow us to build an entire component (structure, style, and function) in one file. Think of loaders and plugins as add-ons for Webpack. While Webpack bundles the code itself, it transforms the code with loaders and plugins. For example, Webpack can take modern JavaScript (ECMAScript 6+) and convert it into ECMAScript 5. Although browsers are slowly supporting ES6 modules, Webpack continues to be the preferred way to build modular code.īesides being a module bundler, Webpack can also transform code. Before Webpack, the user included a script tag for each JavaScript file. It merges code from multiple files into one. We will create our own development and build process using Webpack. Instead of relying on the Vue CLI to scaffold our project and provide us with a development and build process, we will build a project from scratch. In this case, a development and build process must be used. The files need to be converted to Hyper-Text Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript (JS). But, if you use Vue single-file components (SFCs), you need to convert those files into something the browser can understand. No build or development process is necessary. Installing and running Vue.js (“Vue”) can be done with a script tag that points to the Vue content delivery network (CDN). The build process creates the final version of files to be used in production. A development process provides a way to see updates occurring as you edit your project. This scaffolding also provides a development and build process. It provides a starting point of files, folders, and configuration. An understanding of Vue’s single-file components (SFCs) and Node Package Manager (NPM) will be helpful for this article.Ī framework’s command line interface, or CLI, is the preferred method to scaffold a project.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |