Inside a Vue CLI project, @vue/cli-service installs a binary named vue-cli-service. You can access the binary directly as vue-cli-service in npm scripts, or as ./node_modules/.bin/vue-cli-service from the terminal. This is what you will see in the package.json of a project using the default preset:.
You can invoke these scripts using either npm or Yarn:. If you have npx available (should be bundled with an up-to-date version of npm), you can also invoke the binary directly with:.
You can run scripts with additional features using the GUI with the vue ui command. Here is the Webpack Analyzer from the GUI in action:. Copying to clipboard might not work on a few platforms. If copying was successful, (copied to clipboard) is displayed next to the local dev server URL.
|Objective:||To setup a local Vue development environment, create a starter app, and understand the basics of how it works.|
Share This Article
The vue-cli-service serve command starts a dev server (based on webpack-dev-server) that comes with Hot-Module-Replacement (HMR) working out of the box. In addition to the command line flags, you can also configure the dev server using the devServer field in vue.config.js.
[entry] in the CLI command is defined as the entry file (default: src/main.js or src/main.ts in TypeScript project), not an additional entry file. If you overwrite the entry in the CLI, then the entries from config.pages are no longer considered, which may cause an error. vue-cli-service build produces a production-ready bundle in the dist/ directory, with minification for JS/CSS/HTML and auto vendor chunk splitting for better caching. The chunk manifest is inlined into the HTML. There are a few useful flags:. --modern builds your app using Modern Mode, shipping native ES2015 code to modern browsers that support it, with auto fallback to a legacy bundle.
--target allows you to build any component(s) inside your project as a library or as web components. See Build Targets for more details. --report and --report-json will generate reports based on your build stats that can help you analyze the size of the modules included in your bundle. You can use vue-cli-service inspect to inspect the webpack config inside a Vue CLI project.
See Inspecting Webpack Config for more details. Some CLI plugins will inject additional commands to vue-cli-service. For example, @vue/cli-plugin-eslint injects the vue-cli-service lint command. You can see all injected commands by running:. You can also learn about the available options of each command with:.
3. Create A Vue 3 Project.
You can exclude specific plugins when running a command by passing the name of the plugin to the --skip-plugins option:. This option is available for everyvue-cli-service command, including custom ones added by other plugins. You can skip multiple plugins by passing their names as a comma-separated list or by repeating the argument:. Plugin names are resolved the same way they are during install, as described here.
2. Install Vue CLI
cache-loader is enabled for Vue/Babel/TypeScript compilations by default. Files are cached inside node_modules/.cache - if running into compilation issues, always try deleting the cache directory first.
- thread-loader will be enabled for Babel/TypeScript transpilation when the machine has more than 1 CPU cores. When installed, @vue/cli-service also installs yorkie, which allows you to easily specify Git hooks using the gitHooks field in your package.json:.
- yorkie is a fork of husky and is not compatible with the latter. Projects created via vue create are ready to go without the need for additional configuration.
- The plugins are designed to work with one another so in most cases, all you need to do is pick the features you want during the interactive prompts. However, we also understand that it's impossible to cater to every possible need, and the needs of a project may also change over time.
- Projects created by Vue CLI allow you to configure almost every aspect of the tooling without ever needing to eject. Check out the Config Reference for more details. Hi everyone, I’m developing my first app with Vue starting from mevn-stack-vue.js-2-example by following this tutorial.
- I can successfully build and run my app for production by running the command npm run build && node ./bin/www but I don’t understand how to run the app in development mode.
- If I run the command npm run dev that exec webpack-dev-server --inline --progress --config build/webpack.dev.conf.js the app is running correctly but the server of app.js is not running. I think I’m missing some stupid step but I can’t figure out what. In this tutorial, you’re going to learn how to get up and running with the Vue 3 project from scratch with step-by-step instructions.
- The first step is to install Node.js & NPM (Node Package Manager) to your computer. You can check to see if they’re already installed by going to the Terminal/Command prompt window in your computer and running a couple of commands.
To check the installed version of node js, . If you already have it installed, make sure it’s version 10 or above.
To check the npm, run the following command. If they’re not installed you’ll get the “command not found” message or something similar when running node and npm version check commands. In that case, you will need to install them. So, head over to the Node.js Website in your browser – you can see two versions and I would recommend using LTS which is the more stable version and it also says recommended for most users. Click the LTS button which then starts downloading the Node.js package file on the computer.
Double click the package file to install it which will bring up the installer window. You can pretty much install like you would other applications.
Git Hooks #
As you can see from the introduction tab, I’m not only installing node.js but also npm – so we do not need to install them separately.
- Hit Continue, Continue, . Then Agree and install, which will ask for the admin password. Once the password is entered, it’ll take a few seconds to complete the installation process.
- The next step is to install Vue CLI. So, What’s Vue CLI? Vue CLI is an official vue npm package that allows you to create a vue project quickly on your computer. Let’s install it globally, so that you can create a vue project anywhere on the computer.
- Open up the Terminal window and run the following command. It will take a few seconds to complete the installation process.
- If it says that you do not have permission, just run the command again by adding sudo in front of it like so, which will ask you to enter your admin password and then you will be all set. In order to create a vue 3 project, we need a vue cli version of at least 4.5 or above. If you’ve already installed vue cli, you can check the version using the following command. If you have a version lower than 4.5, you can simply upgrade it by running the command below. The next step is to create a vue 3 project. To do that, open up the terminal and go to the desktop by typing:. You will then be asked a question – which version of vue you want to use and you can pick vue 3 by moving the arrow key up and down on the keyboard and hit enter to make a selection.
- As you can see, my terminal window gives me two commands to run the project. The first command is to go into the project folder:. To run the app, run the following command. To be organized, I’m going to run the project from my Visual Studio Code editor instead of using the Terminal window. Go to the Applications folder → Visual Studio Code. Then, File → Open → Then navigate to the project folder that we created on the desktop and hit open. As you know, the Terminal window is integrated with Visual Studio, so I can simply open it by choosing the Terminal option from the menu bar at the top and then New Terminal which will open up a new window at the bottom of the editor. As you can see, the terminal is already into the project so I do not have to use the first command which is .
I’m going to show how to use ESLint and Prettier to lint and format your code and how to use Vue’s browser tools to take a peek at what’s going on under the hood in a Vue app.
When you’ve finished reading, you’ll have a working development environment set up and will be ready to start coding Vue apps like a boss. Let’s get to it! Want to learn Vue.js from the ground up? This article is an extract from our Premium library. Get an entire collection of Vue books covering fundamentals, projects, tips and tools & more with SitePoint Premium.
Join now for just $9/month. I said that I was going to be using VS Code for this tutorial, but I’m afraid I lied. I’m actually going to be using VSCodium, which is an open-source fork of VS Code without the Microsoft branding, telemetry and licensing. The project is under active development and I’d encourage you to check it out. It doesn’t matter which editor you use to follow along; both are available for Linux, Mac and Windows. You can download the latest release of VSCodium here, or download the latest release of VSCode here and install it in the correct way for your operating system.
Throughout the rest of this guide, for the sake of consistency, I’ll refer to the editor as VS Code. When you fire up the editor, you’ll notice a set of five icons in a toolbar on the left-hand side of the window. If you click the bottom of these icons (the square one), a search bar will open up that enables you to search the VS Code Marketplace.
Type “vue” into the search bar and you should see dozens of extensions listed, each claiming to do something slightly different.
vue-cli-service serve #
Depending on your use case, you might find something here to suit you. There are lots available. For example, TSLint for Vue could be handy if you’re working on a Vue project involving TypeScript. For now, I’m going to focus on one called Vetur. Type “Vetur” into the search box and select the package authored by Pine Wu.
Then hit Install. Once the extension has installed, hit Reload to activate and you’re in business. If you visit the project’s home page, you’ll see that the extension gives you a number of features:.
syntax highlighting. linting/error checking. auto completion. Let’s see some of these in action now. Note: many of these features only work when you have a project set up. This means you need to create a folder to contain your Vue files, open the folder using VS Code and access the files via VS Code’s explorer.
As your app grows, you’ll undoubtedly want to make make use of single-file components (SFCs) to organize your code. These have a .vue ending and contain a template section, a script section and a style section. Without Vetur, this is what an SFC looks like in VS Code:. However, installing Vetur will make it look like so:. As you can read on the VS Code website, snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.
Vetur makes it possible for you to use these snippets in single-file components. It also comes with some snippets of its own. For example, try typing “scaffold” (without the quotes) into an area outside a language region and it will generate all the code you need to get going with an SFC:. Emmet takes the idea of snippets to a whole new level. If you’ve never heard of this and spend any amount of time in a text editor, I’d recommend you head over to the Emmet website and spend some time acquainting yourself with it.
It has the potential to boost your productivity greatly. In a nutshell, Emmet allows you to expand various abbreviations into chunks of HTML or CSS. Vetur ships with this turned on by default. Try clicking into a region and entering the following:.
Then press Tab. It should be expanded to this:. Out of the box, Vetur offers some basic error checking. This can be handy for spotting typos in your code. In the above example, Vetur has noticed that I’ve forgotten the colon following the object property name and has consequently underlined it in red.
Opening up the error panel (click on the small cross in the bottom left-hand corner) gives you a description of the error. Vetur also uses eslint-plugin-vue to lint templates. We’ll find out more about why linting your code is a good idea in the next section, but for now, let’s just see it in action.
Caching and Parallelization #
Let’s add an items key to our data property:. Then add some code to output it in our template:. Straight away we’ll see that
The error appears to be that we’ve forgotten to declare a key. Let’s remedy that:. And the error vanishes from our editor. IntelliSense is one of my favorite features in VS Code, but it’s limited to a few formats that the editor can understand.
Installing Vetur makes IntelliSense available in your .vue file, which is mighty handy. You can try this out by clicking into the region of a Vue component and typing “v-” on any tag (minus the quotes). You should see this:. This allows you to select from any of the listed directives, and also provides you with an explanation of what each does.
Configuration without Ejecting #
That’s not all that Vetur can do, but we’ll leave the extension there and turn our attention to setting up a project with Vue’s CLI. When building a new Vue app, the best way to get up and running quickly is using Vue CLI.
This is a command-line utility that allows you to choose from a range of build tools which it will then install and configure for you. It will also scaffold out your project, providing you with a pre-configured starting point that you can build on, rather than starting everything from scratch.
Note: if the CLI is new for you, you might like to check out our tutorial “A Beginner’s Guide to Vue CLI” in this Vue series.
To get started, you’ll need to have Node installed on your system. You can do this by downloading the binaries for your system from the official website, or using a version manager. I recommend the second of the two methods. With Node installed, execute the following command:.
And create a new Vue project with the command:.
This will open a wizard which asks you to choose a preset. Choose to manually select features, then accept the defaults for everything, apart from when you’re asked to pick a linter/formatter config.
In this step, be sure to select ESLint + Prettier and Lint on save, and to place config files in package.json. If you open this newly created project and take a peek inside the package.json file, you’ll notice that the CLI has set up ESLint for you.
This is a tool that can automatically check your code for potential problems.
Installing and Setting Up Your Editor
This provides many benefits, such as:. keeping your code style consistent. spotting potential errors and bad patterns. enforcing quality when you follow a style guide.
This is the official ESLint plugin for Vue.js, which is able to detect code problems in your .vue files. Let’s put that to the test.
An Example Project with Vue CLI
- Start the Vue dev server with npm run serve and navigate to localhost:8080.
- In VS Code, open up the project you just created with the CLI (File >Open Folder), then navigate to src/components/HelloWorld.vue in the VS Code explorer.
- Let’s add a method to our Vue instance:.
- Now, if you look at the terminal window in which the dev server is running, you’ll see Vue complaining.
- This is because, under the hood, Vue CLI has configured ESLint to use the eslint:recommended ruleset.