In the previous post we made a simple app. Now let’s use VUE Cli to make a more advanced app with a state store, router and testing.
Installation.
Add the Vue CLI using the following command in your terminal. You can find more details for Vue CLI installation here Vue installation details .
npm install -g @vue/cli vue --version
You can create a template app by using
vue create my-app
This will give you several options
Vue CLI v5.0.6 ? Please pick a preset: (Use arrow keys) ❯ Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select features
Choose Vue 3
Vue CLI v5.0.6 ? Please pick a preset: Default ([Vue 3] babel, eslint) ? Pick the package manager to use when installing dependencies: Use Yarn ❯ Use NPM ➜ vue-cli git:(main)
Choose NPM. Vue CLI will create the application. Then use npm run serve
to start the application.
cd my-app npm run serve
App running at: - Local: http://localhost:8080/ - Network: http://192.168.0.27:8080/ Note that the development build is not optimized. To create a production build, run npm run build.
Open the app at http://localhost:8080/
.

Manual configuration
You can also create an app with many more features by choosing the manual method. This is the app template that we will continue with in this tutorial.
vue create my-app-options
Vue CLI v5.0.6 ? Please pick a preset: Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) ❯ Manually select features
Select Manual and arrow up or down and select them by hitting the space bar. Once everything is selected hit return.
Vue CLI v5.0.6 ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ◯ CSS Pre-processors ◉ Linter / Formatter ◉ Unit Testing ❯◉ E2E Testing
Now that we have made our selections several screens will be presented to configure the rest. Choose the options that match the list below. Note: the first two are already selected in the previous steps above. The next one presented with be the Vue version.
Vue CLI v5.0.6 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex, Linter, Unit, E2E ? Choose a version of Vue.js that you want to start the project with 3.x ? Use history mode for router? (Requires proper server setup for index fallback in production) No ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Pick a unit testing solution: Jest ? Pick an E2E testing solution: Cypress ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json ? Save this as a preset for future projects? (y/N) n
After you have made all your selections Vue CLI will create all the files for the app and present you with the following.
🎉 Successfully created project my-app-options. 👉 Get started with the following commands: $ cd my-app-options $ npm run serve
To get the app running cd in the the folder just created and use npm run serve
to serve the app.
cd my-app-options npm run serve
And the following will be displayed.
App running at: - Local: http://localhost:8080/ - Network: http://192.168.0.27:8080/ Note that the development build is not optimized. To create a production build, run npm run build.
Go to http://localhost:8080/
and the following will be displayed.
cntrl ship p then type in settings.json
// Enable Emmet abbreviations in languages that are not supported by default. Add a mapping here between the language and Emmet supported language.
// For example: `{“vue-html”: “html”, “javascript”: “javascriptreact”}`
“emmet.includeLanguages”: {},