how to create vue js project using cli-npm | updated 2021

    By: Manu
    2 years ago
    Category: VuejsViews: 25

    Hi guys, today we are going to create a brand new Vue.js Project. So for creating a Vue project you should have a local server setup already. I have XAMPP install as local server. You might have XAMPP/WAMP/DOCKER etc.

    1.Install Node Js In Your System

    So let's begin first of all we need to install "Node Js" to our system. You can download nodejs from here ( Download latest recommended Version ).

    Once you have node install you can use terminal to see if node is installed or not. In terminal just type

    node -v

    It should return the version of node installed in your computer.

    You can check our video guide, If there is any confusion.

    https://youtu.be/BhcgbIiC7Qc

    2.Install Vue CLI Package

    To install Vue CLI Package you can run below given command. Just open terminal and run below given command, It will install globally.

    npm install -g @vue/cli

    You can check if Vue CLI Package installed by running this command and can see the version installed.

    vue --version

    3.Let's Create Vue Project

    Open terminal and go to htdocs folder or the folder where your local server is setup. You can use Microsoft Visual Studio Editor for Mac/Windows/Linux It has terminal Inbuilt.

    Use these commands to navigate.

    cd .. // To go out current directory
ls    // to see list of items in current directory
cd sky  // to get into sky folder (Replace sky with folder name you 
         //want to get into)
    Check Our Video If Face Any Issue

    Once you are in the "htdocs" directory. Then you can run below given line to create project. We are creating "Project Box" so folder name given is "sky". You can give any name you want.

    vue create sky.  //It will create project in box folder

    Or if you already have project folder created. Let's say in case we have "sky" folder already created then we have to navigate through and get into sky folder and to install Vue Project files, we can run this command.

    vue create . // It will install project files in current directory

    4.Run the command

    We are using command to install files in current directory. So it is asking just type "Y". And hit Enter Key.

    Now hit Enter key on "default(babel, eslint)". So Vue can install required files.

    Package will install but it will take some time so wait.

    Once everything is done. You will be asked to run a NPM command. It will start the development server.

    Just put "http://localhost:8080/" into the address bar of your web browser. And you should see your new Vue Project Running.

    Here you can see we have our project up and running.

    https://easybay.org/2019/04/09/how-to-setup-laravel-on-macos-xampp-2019/