Vue Run Dev

Posted on  by admin

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:.

Prerequisites:

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.

  1. 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:.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.

Conclusion

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