Like Angular CLI and create-react-app covered in previous chapters, Vue also brings a CLI that you can use to create and manage your project. It is called Vue CLI. While it is not yet a key ingredient to make Vue a complete platform like Angular's, it is still quite rich compared to create-react-app for example.
Next, install Vue CLI and create the Everyday Market project by following the next steps:
- Open the terminal or command prompt and install Vue CLI by executing the following code:
npm install -g @vue/cli
- Create the app project by executing the following code:
vue create everyday-market-vue
By executing the preceding command, Vue CLI creates the folder with a specified name and scaffolds the entire project using its default options, in addition to installing the required dependencies.
You can now open the folder in your editor. So, let's examine the scripts section in package.json:
- serve: Builds and hosts the app in a local dev server with hot module reload in place for development purposes
- build: Builds the app for distribution purposes
- lint: Executes the static-code analysis linter
Continue by running the project: open the terminal or command prompt and execute the following in the project folder :
npm run serve
Now the dev server is running. You can open the browser and navigate to the address written in the terminal to see the app running in the browser. It should look similar to this:
