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

You may also like