Learn-Force.com

Follow this trialhead module –

https://trailhead.salesforce.com/content/learn/projects/quick-start-lightning-web-components

2. Install CLI (Command Line Interface). Download from this link –

2. To check CLI install proper, go to VS Code terminal > write sfdx enter

You can get the output –

Usage: sfdx COMMAND [command-specific-options]
Help topics, type “sfdx help TOPIC” for more details:
sfdx force # tools for the salesforce developer
sfdx plugins # manage plugins
sfdx update # update sfdx-cli

1. In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
2. Type SFDX.
3. Select SFDX: Create Project.
4. Enter HelloWorldLightningWebComponent as the project name.
5. Press Enter.
6. Select a folder to store the project.
7. Click Create Project. You should see something like this as your base setup.

1. In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
2. Type SFDX.
3. Select SFDX: Create Lightning Web Component.
4. Press Enter to accept the default force-app/main/default/lwc.
5. Enter helloWorld for the name of the new component.
6. Press Enter.
7. View the newly created files in Visual Studio Code.
8. In the HTML file, helloWorld.html, copy and paste the following code.

<template>
<lightning-card title="HelloWorld" icon-name="custom:custom14">
<div class="slds-m-around_medium">
<p>Hello, {greeting}!</p>
<lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
</div>
</lightning-card>
</template>

9. In the JavaScript file, helloWorld.js, copy and paste the following code.

import { LightningElement, track } from 'lwc';
export default class HelloWorld extends LightningElement {
    @track greeting = 'World';
    changeHandler(event) {
        this.greeting = event.target.value;
    }
}

10. In the XML file helloWorld.js-meta.xml, copy and paste the following code.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

11. Deploy the code to your org.

12. Now the new LWC will be available in org. Edit the home page

If you are deploying will get error –