Coding

THE VUE CLI AND .VUE FILES | VueJS | Learning the Basics

  • 00:00:01 hi welcome to another video great to
  • 00:00:03 have you here now if you followed along
  • 00:00:05 the other videos on my channel or maybe
  • 00:00:07 also watch some other tutorials you
  • 00:00:09 probably always saw some setup like this
  • 00:00:12 one here not sure if it was in jsfiddle
  • 00:00:14 but you certainly saw the setup where
  • 00:00:17 you simply dropped in a script import to
  • 00:00:19 control over a part of your Dom with TL
  • 00:00:22 property and output some data there
  • 00:00:24 there's nothing wrong with that setup
  • 00:00:26 that's a fine way of using future as it
  • 00:00:29 might be the best way if you are simply
  • 00:00:31 controlling tiny parts of your dawn but
  • 00:00:34 if you're building bigger or even
  • 00:00:37 medium-sized applications that might not
  • 00:00:39 be your preferred way because it also
  • 00:00:41 doesn't integrate very well into your
  • 00:00:43 maybe existing workflow if you're
  • 00:00:45 already building and bundling sales code
  • 00:00:47 well you're not really doing the same
  • 00:00:49 for your view chess code and you might
  • 00:00:51 also want to split your view chess code
  • 00:00:53 up over multiple files and so on
  • 00:00:55 therefore in this video I'll show you
  • 00:00:57 how to easily get started with a nice
  • 00:01:00 setup for a bigger or medium-sized view
  • 00:01:03 KS application using webpack as a build
  • 00:01:06 tool and as you will see it's only a
  • 00:01:09 couple of steps and you're ready to go
  • 00:01:11 so let's jump in in order to get a nice
  • 00:01:15 pre-configured workflow which you can of
  • 00:01:17 course find you in to your needs I'm
  • 00:01:20 going to use the view CLI here now
  • 00:01:22 already googled for it view CLI and then
  • 00:01:25 here we get two interesting links the
  • 00:01:27 first two search results that should be
  • 00:01:29 let's open the first one
  • 00:01:31 the github page of the view CLI there
  • 00:01:34 you can learn more about it you can read
  • 00:01:37 what it really does but I'm of course
  • 00:01:39 also telling you the view Scylla is a
  • 00:01:41 nice little tool which makes scaffolding
  • 00:01:43 out pre-configured view projects very
  • 00:01:46 simple now with project I mean a basic
  • 00:01:49 folder structure and the basic workflow
  • 00:01:52 set up using webpack giving you some
  • 00:01:54 commands you can run to bundle your code
  • 00:01:57 to build it to split it up over multiple
  • 00:01:59 files to have a tender running on a
  • 00:02:01 development server in the end all with
  • 00:02:04 one command and the second command which
  • 00:02:06 allows you to build your files for
  • 00:02:07 production that's awesome of course you
  • 00:02:10 could set up such a workflow on your own
  • 00:02:12 but you can
  • 00:02:14 also finds you an existing one whatever
  • 00:02:15 you prefer I'm going to use the CLI to
  • 00:02:18 quickly get started now we also learn
  • 00:02:21 how to install the CLI on this page so
  • 00:02:23 why don't you follow these steps here to
  • 00:02:25 install the CLI we're going to use NPM
  • 00:02:28 so you need to have node node J s
  • 00:02:30 installed on your computer you can find
  • 00:02:33 it a node J s org and it's just a
  • 00:02:36 server-side language JavaScript on the
  • 00:02:39 server to be precise we're not needing
  • 00:02:42 it because we're going to write node.js
  • 00:02:44 code but it has a package manager which
  • 00:02:47 ships with no HS which is the de facto
  • 00:02:49 standard for managing your JavaScript
  • 00:02:52 packages also for front-end development
  • 00:02:54 which we're doing here so therefore
  • 00:02:56 install now HS and you should have the
  • 00:02:59 NPM command available thereafter and
  • 00:03:01 with that we can stall a global package
  • 00:03:03 on our machine we do this by adding – G
  • 00:03:06 now on Mac and Linux you're going to
  • 00:03:08 have to add a sudo in front of it to get
  • 00:03:10 you right
  • 00:03:11 well rights to install something
  • 00:03:13 globally and then the name of the
  • 00:03:15 package is view CLI now here I need to
  • 00:03:18 enter my password you might not be
  • 00:03:19 prompted to do so and then it should
  • 00:03:22 install the view CLI package globally on
  • 00:03:24 your machine which means thereafter you
  • 00:03:26 will have it available from the command
  • 00:03:28 line by typing a simple command in any
  • 00:03:31 place on your machine I will see you
  • 00:03:33 once this is finished so the
  • 00:03:34 installation of TCL I just finished
  • 00:03:36 without an error here and with that
  • 00:03:38 installed we already can start using it
  • 00:03:41 now how do we use it
  • 00:03:42 let's go back to the Google search we
  • 00:03:45 also have a second finding here now that
  • 00:03:49 is a template we can use with to view
  • 00:03:51 CLI the web pack template a full list of
  • 00:03:54 all the available templates can be found
  • 00:03:55 on the view seal I get a page if you
  • 00:03:57 scroll down a bit here now templates are
  • 00:04:00 really chest
  • 00:04:01 well the templates for the project
  • 00:04:03 system you want to use you could use a
  • 00:04:05 web pack template or a simplified one
  • 00:04:07 without unit tests and so on you can
  • 00:04:09 also choose browserify if you wanted or
  • 00:04:11 a simple template which basically is the
  • 00:04:14 same approach we used in chase fill any
  • 00:04:16 other videos but now in your local
  • 00:04:18 environment in your browser well there
  • 00:04:21 are all the templates you can choose I'm
  • 00:04:23 going to use the WebEx simple one for
  • 00:04:25 there
  • 00:04:26 video here because well it's a quick and
  • 00:04:28 easy web peg template to get started
  • 00:04:30 with in order to use it we have to go
  • 00:04:33 back to the command line and in the
  • 00:04:35 command line you have to go into a
  • 00:04:36 folder where you want to create your new
  • 00:04:38 project folder and there you can then
  • 00:04:39 simply type view since we install the
  • 00:04:41 view CLI in it then the name of the
  • 00:04:44 template you want to use webpack simple
  • 00:04:46 in my case here and then the name of the
  • 00:04:48 folder you want to create I'm going to
  • 00:04:50 you name it view web pack but of course
  • 00:04:53 you may choose any name you like hit
  • 00:04:55 enter and this will install this or
  • 00:04:57 setup this template this project here
  • 00:05:00 you can enter project name if you just
  • 00:05:01 hit enter it will pick the default
  • 00:05:02 between the parentheses same for the
  • 00:05:05 description for the offer and you're
  • 00:05:07 done and with that you got it installed
  • 00:05:10 and here you see the next steps we
  • 00:05:13 should see the into the newly created
  • 00:05:15 folder here you webpack thereafter we
  • 00:05:19 have to run npm install because this
  • 00:05:21 template doesn't install the
  • 00:05:23 dependencies or this command has
  • 00:05:25 installed the dependencies our project
  • 00:05:27 need because of course we do have a more
  • 00:05:29 complex workflow here with a couple of
  • 00:05:31 dependencies a couple of third-party
  • 00:05:33 packages we use and we need to install
  • 00:05:35 those packages with npm install now this
  • 00:05:38 will take a couple of seconds because it
  • 00:05:39 installs WebP x various loaders – well
  • 00:05:43 work with web pack and so on as a side
  • 00:05:46 note if web pack is totally new to you
  • 00:05:48 definitely check out some dedicated
  • 00:05:50 tutorials i'm not going to explain web
  • 00:05:52 pack in this video i'm just explaining
  • 00:05:54 how to use this eli to quickly get
  • 00:05:56 started with such a workflow now after
  • 00:05:59 all these dependencies have been
  • 00:06:02 installed we can let run the last
  • 00:06:04 command if you remember it it was npm
  • 00:06:06 run dev and this will start the
  • 00:06:08 development workflow that means it will
  • 00:06:11 bundle our project and it will start up
  • 00:06:14 a development server so a little server
  • 00:06:15 which Lunz runs on our machine driven by
  • 00:06:18 nodejs another reason why we needed to
  • 00:06:20 install it which will host our
  • 00:06:22 application so that we can see it
  • 00:06:23 running on our machine without deploying
  • 00:06:26 it to an actual server let's have a look
  • 00:06:28 at it we see it here in the browser it
  • 00:06:31 should have opened a tab automatically
  • 00:06:33 otherwise see that localhost 8080 and
  • 00:06:36 this is the basic application this
  • 00:06:38 template
  • 00:06:39 with this is how we can install such a
  • 00:06:43 template with this CLI but now let's
  • 00:06:45 also have a look what got installed in
  • 00:06:48 the first place which folders and files
  • 00:06:50 were created for us I'm in webstorm D
  • 00:06:54 IDE I'm using for development and of
  • 00:06:57 course you could use an a variety or
  • 00:06:59 editor like atom sublime which will
  • 00:07:01 studio goat they should all work fine
  • 00:07:03 and here we see the falls and father's
  • 00:07:05 the view CLI created for us when we
  • 00:07:08 choose that web pack simple template we
  • 00:07:11 get two node modules folder holding all
  • 00:07:13 our dependencies like web pack itself
  • 00:07:16 and a couple of other dependencies we
  • 00:07:18 need for that workflow UJS of course is
  • 00:07:20 all included there and we can see a full
  • 00:07:22 list of TD dependencies installed here
  • 00:07:24 in the package chat Jason as you can see
  • 00:07:26 there is only one run time dependency
  • 00:07:28 view and a couple of development only
  • 00:07:31 dependencies which are needed for that
  • 00:07:32 workflow so that's one thing but besides
  • 00:07:36 that we also get this source folder and
  • 00:07:39 that source folder is important because
  • 00:07:40 here we're going to develop our
  • 00:07:42 application and now here we already see
  • 00:07:44 something very strange this dot view
  • 00:07:47 file here now what is that until now if
  • 00:07:50 you watch maverick videos we only worked
  • 00:07:52 with jsfiddle where we had one single
  • 00:07:54 file where the script was in so we would
  • 00:07:56 have expected a dot JS file here or
  • 00:07:58 simply an HTML file well we do have an
  • 00:08:01 HTML file here index.html desert zip
  • 00:08:04 file which will actually get served and
  • 00:08:06 it's pretty empty but it does have two
  • 00:08:08 interesting things it doesn't a div with
  • 00:08:11 the ID app well we know this from the
  • 00:08:13 chase fill examples and it imports a
  • 00:08:16 script so it looks like we're importing
  • 00:08:18 some script which will then again take
  • 00:08:20 over this ID or this app Dave here and
  • 00:08:24 that doesn't it the case the quest will
  • 00:08:26 just is well where does this boat touch
  • 00:08:28 a script come from this is the bundle
  • 00:08:31 created by web pack and it bundles all
  • 00:08:33 our scripts in the source folder it
  • 00:08:35 starts with the main dot JS file this is
  • 00:08:38 just how it's set up you can check this
  • 00:08:39 new epic config file here you see the
  • 00:08:41 entry point again not going to go
  • 00:08:43 through this file in detail but you just
  • 00:08:45 see where it starts which loaders it
  • 00:08:47 applies to transform these files and
  • 00:08:48 what it outputs
  • 00:08:50 DeBolt that chairs file which we import
  • 00:08:51 in the index.html file
  • 00:08:53 so if we have a look at the main dot JS
  • 00:08:55 file we see it's relatively simple we do
  • 00:08:59 create a view instance there we take
  • 00:09:01 over the element here with the app
  • 00:09:04 selector but then we do something
  • 00:09:06 strange we call this render that method
  • 00:09:10 here now what's the render method doing
  • 00:09:12 the render method is a built-in method
  • 00:09:15 of you instance nose which basically
  • 00:09:17 means replace the part you're selecting
  • 00:09:20 the Dom here with some other code now
  • 00:09:23 the default behavior of UJS is to select
  • 00:09:26 a certain part in the Dom like we did it
  • 00:09:29 in the averages with chase fill with GL
  • 00:09:31 property here so gear step of the app ID
  • 00:09:35 for example and then take this Dom as a
  • 00:09:37 template where we could use string
  • 00:09:39 interpolation and so on but as you can
  • 00:09:42 clearly see this div here is pretty
  • 00:09:44 empty there's nothing in between we're
  • 00:09:46 not having a paragraph where we output a
  • 00:09:48 title or something like this so we're
  • 00:09:50 clearly not following the approach we
  • 00:09:52 solve thus far so what are we doing here
  • 00:09:56 instead what we're still selecting this
  • 00:09:58 part but the render method now overrides
  • 00:10:00 it it tells view jeaious don't use the
  • 00:10:03 Dom as your template instead just use it
  • 00:10:05 as a hook and now override it with some
  • 00:10:07 other template some other HTML code you
  • 00:10:10 could say now the render function simply
  • 00:10:13 takes an input here which is provided by
  • 00:10:15 view chess which is a function which
  • 00:10:17 gets executed in the end but the
  • 00:10:19 interesting thing here is not how this
  • 00:10:20 function works that's a relatively
  • 00:10:21 complicated one the interesting thing is
  • 00:10:24 what we pass as an argument to this
  • 00:10:26 callback function this H function here
  • 00:10:28 and that's app which we're importing
  • 00:10:30 from the app dot view file now let's
  • 00:10:33 open that file and Wow that certainly
  • 00:10:35 looks strange here we got a template at
  • 00:10:38 the top then we get a script tag and
  • 00:10:40 then we get some Styles dot view files
  • 00:10:43 are special files in view chests which
  • 00:10:45 allow us to store all our template our
  • 00:10:48 script and our styles in one file we can
  • 00:10:52 therefore split our view KS app into
  • 00:10:55 logical pieces components you'll learn
  • 00:10:58 about this in one of my earlier videos
  • 00:11:00 and each component could live in a view
  • 00:11:03 chase file in it excuse me that dot view
  • 00:11:05 file and each component of
  • 00:11:07 has at least a template so something we
  • 00:11:09 render some HTML code we store that
  • 00:11:11 between template tags and you always
  • 00:11:13 need these template tags and then we
  • 00:11:17 have maybe a script we don't need it
  • 00:11:19 necessarily but if we want to have some
  • 00:11:21 logic we probably do need and probably
  • 00:11:24 also optionally we do have some styles
  • 00:11:27 we apply to this application that's
  • 00:11:29 important these Styles by standard are
  • 00:11:31 applied to the whole application they
  • 00:11:33 are not scoped to disavow file that we
  • 00:11:36 could force this by adding scoped here
  • 00:11:39 as an attribute to style just to say
  • 00:11:41 this right away with that you're telling
  • 00:11:43 you chest please only apply these styles
  • 00:11:45 to this file to this template up here if
  • 00:11:48 you don't have scoped here they will be
  • 00:11:51 applied to your whole application so but
  • 00:11:54 back to this template here we do have
  • 00:11:56 some HTML code and here one important
  • 00:11:58 restriction is that inside of this
  • 00:12:00 template we must have only one root
  • 00:12:03 element so this div in this case here
  • 00:12:06 it's not allowed to let's say I have
  • 00:12:08 another div next to it this will throw
  • 00:12:10 an error because you must only have one
  • 00:12:12 root element a lot of talking about
  • 00:12:15 these view files but what does it do
  • 00:12:18 here in the end well web pack has a
  • 00:12:21 special package the view loader which
  • 00:12:23 knows how to handle dot view files what
  • 00:12:25 the view loader will do is it will take
  • 00:12:28 this file transform our template to HTML
  • 00:12:30 code kind of you can of course represent
  • 00:12:32 HTML elements with JavaScript code it
  • 00:12:35 transforms it to JavaScript code I
  • 00:12:37 wanted to say right so to JavaScript
  • 00:12:40 code it will also pack in our script
  • 00:12:43 part here it will add our styles to the
  • 00:12:46 top of our index.html file in the Hat
  • 00:12:49 section and therefore it allows us since
  • 00:12:52 we only have JavaScript here all this is
  • 00:12:55 transformed to JavaScript to bundle this
  • 00:12:58 Q R and pet to pass this JavaScript code
  • 00:13:01 to the render function which needs
  • 00:13:02 JavaScript code which it renders in the
  • 00:13:04 Dom in the end which it executes in the
  • 00:13:06 end it does all there for us therefore
  • 00:13:10 one single bundle gets created but it
  • 00:13:12 gives us the nice possibility of
  • 00:13:14 splitting up our code into multiple
  • 00:13:16 files of using this dot view fault
  • 00:13:19 concept to have a
  • 00:13:20 clear separation of the different
  • 00:13:22 components in our application now here
  • 00:13:25 we're not really using a component this
  • 00:13:27 is kind of our root component if you
  • 00:13:29 want to think of it
  • 00:13:30 we're just taking this EPP you faulty
  • 00:13:33 template in the stripped of it and we're
  • 00:13:35 rendering this and replacing our
  • 00:13:37 selected part in the Dom here with the
  • 00:13:39 app selector but in the next video you
  • 00:13:43 will see how we can use dot view files
  • 00:13:45 to actually create model components and
  • 00:13:48 work with them I hope this video was
  • 00:13:50 helpful for learning about the view CLI
  • 00:13:53 how to quickly get started with a better
  • 00:13:56 workflow with a local project using
  • 00:13:59 webpack and to at least dive into the
  • 00:14:02 basics of these strange dot view files
  • 00:14:04 which make life really easier in the end
  • 00:14:06 would be great to see in the other
  • 00:14:08 videos bye