![]() Vue.js is an approachable, versatile, performant, and progressive framework to build user interfaces with. You should see a page like this:įor now it’s enough about how to get started, let’s deep dive into Vue’s building blocks. To run the app, simply open the type npm run serve. I will not go any further than this at this point, but you get the idea. Hello world component is another single file component which has one props passed on to it which gets displayed in the template. If you have a look at the script tag in the App.vue file, you’ll it’s just defining a component which contains another component, HelloWorld referenced from another file. In a way it’s similar to what you’ll have with Shadow DOM. You can even scope the style to the component to prevent any unwanted styling clash with other components. Single File Component is a file which contains everything a Vue component needs, HTML, CSS and JavaScript. You don’t need to pay attention to all those files, suffice to know that index.html contains the div for Vue to handle, src/main.ts is where Vue is instantiated, and src/App.vue is a single file components (I will explain this later) which contains our default components. When the creation of the new application is finished, you will end up with a folder structure like this: Since the point of this intro is on Vue itself, I won’t delve into details of CLI, please visit their official website for more info on how to use CLI. You can choose default which is based on Babel and ESList, or go custom in which case you have more freedom to choose from, like TypeScript, CSS pre-processor, etc. When you run the command, you will be prompted to choose a preset. Open the terminal in your VS Code, navigate to a folder of your choice and run this command: Now not all the applications are as simple as our hello world, so we need to get to know the Vue CLI which helps up build a complete application from scratch. See the Pen vue-hello-world by Yaser Adel on CodePen. You can see this example live in this CodePen □□: Notice we didn’t use to access the variable, that’s because Vue will automatically make every property of data accessible like a high level variable. So you should see a page with Hello World! when you open this file in a browser. Vue will replace this variable in the template for us. Last we specify a data object with a hello property. Vue will have control over this element and its children. Then we in the second script tag, we create a new instance of Vue and tell it to use a DOM element with id of #my-vue-app. ![]() Then we import the script from UNPKG which is a CDN (content delivery network) on top of npm. This means that the value gets replaced by Vue. The first thing you see is a paragraph which has a template reference to a variable called hello, like Angular. Now let’s break this down and see what’s happening. And believe it or not, that’s all you need to have your first Vue app up and running. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |