Vue Js Cli

Posted on  by admin

pwa plugin for vue-cli. The service worker added with this plugin is only enabled in the production environment (e.g.

Injected webpack-chain Rules #

only if you run npm run build or yarn build). Enabling service worker in a development mode is not a recommended practice, because it can lead to the situation when previously cached assets are used and the latest local changes are not included. Instead, in the development mode the noopServiceWorker.js is included. This service worker file is effectively a 'no-op' that will reset any previous service worker registered for the same host:port combination.

If you need to test a service worker locally, build the application and run a simple HTTP-server from your build directory. It's recommended to use a browser incognito window to avoid complications with your browser cache. Configuration is handled via the pwa property of either the vue.config.js file, or the "vue" field in package.json. This allows you to choose between the two modes supported by the underlying workbox-webpack-plugin.

'GenerateSW' (default), will lead to a new service worker file being created each time you rebuild your web app. 'InjectManifest' allows you to start with an existing service worker file, and creates a copy of that file with a "precache manifest" injected into it. The "Which Plugin to Use?" guide can help you choose between the two modes.

Configuration #

These options are passed on through to the underlying workbox-webpack-plugin.

  • For more information on what values are supported, please see the guide for GenerateSW or for InjectManifest. Default: "name" field in package.json. Used as the value for the apple-mobile-web-app-title meta tag in the generated HTML. Note you will need to edit public/manifest.json to match this.

  • Default: '#4DBA87'. Default: '#000000'. This defaults to 'no' because iOS before 11.3 does not have proper PWA support. See this article for more details. Default: 'default'.

Installing in an Already Created Project #

This option is used if you need to add a version to your icons and manifest, against browser’s cache. This will append ?v= to the URLs of the icons and manifest. Default: 'manifest.json'. The path of app’s manifest. If the path is an URL, the plugin won't generate a manifest.json in the dist directory during the build. The object will be used to generate the manifest.json. If the following attributes are not defined in the object, the options of pwa or default options will be used instead.

short_name: display: 'standalone'. theme_color: pwa.themeColor. Default: undefined. Value for crossorigin attribute in manifest link tag in the generated HTML.

You may need to set this if your PWA is behind an authenticated proxy. See cross-origin values for more details. Change these values to use different paths for your icons. As of v4.3.0, you can use null as a value and that icon will not be included. Warning regarding Previous Versions. The package name changed from vue-cli to @vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove vue-cli.

Node Version Requirement. Vue CLI 4.x requires Node.js version 8.9 or above (v10+ recommended). You can manage multiple versions of Node on the same machine with n, nvm or nvm-windows. To install the new package, use one of the following commands. You need administrator privileges to execute these unless npm was installed on your system through a Node.js version manager (e.g.

After installation, you will have access to the vue binary in your command line.

You can verify that it is properly installed by simply running vue, which should present you with a help message listing all available commands. You can check you have the right version with this command:.

To upgrade the global Vue CLI package, you need to run:. Upgrade commands shown above apply to the global Vue CLI installation.

To upgrade one or more @vue/cli related packages (including packages starting with @vue/cli-plugin- or vue-cli-plugin-) inside your project, run vue upgrade inside the project directory:.

Upgrading #

As you develop Vue.js applications, you may find that manually configuring a project is not the most productive use of your time, since configuring a new Vue.js project from scratch can take hours. This is the true power of Vue CLI: It provides you with a pre-generated template that is based on your specifications. Because of this, it’s already configured so you can start developing your website or application right away. Vue CLI 3 will ask you a few questions via a command line prompt about your project, download the required files, and pre-configure it for you so you are ready to work as soon as it’s done.

To generate a single-page application, navigate to the directory you’d like your Vue project in, then run the following:

The highlighted section of the command is the name of the root directory of the project. This will be the name of the folder that contains all of your Vue.js project files. This can be whatever you’d like, but in the case of this tutorial, you will use vue-starter-project.

Once you type out that command, continue by pressing Enter. You will then receive the following prompt:

If you do not want to configure your project and opt for the defaults, you can do so with either Vue 2 or Vue 3. For the purpose of this tutorial though, it’s recommended to manually select your features. By selecting specific features, you will see how each option you selected was installed by the CLI.

Select Manually select features with ENTER. Immediately you’ll receive a number of different options, including: Choose Vue version, TypeScript, Router, and Vuex. Notice that some of these items are already selected (the bubble is filled in). You may select as many or as few as you’d like. However, for this tutorial, select the following by pressing on the entry:

Once you have your options selected, press the ENTER key. The CLI will ask you further questions regarding each of the features you selected for your project, in order. The first question will ask which version of Vue you’d like to use: 2.x or 3.x. You’ll use Vue 3 for this tutorial, but you may want to use Vue 2 if you want greater support from the Vue Community:

The next question is regarding TypeScript integration. If you are not familiar with TypeScript, that’s alright. This option was intentionally selected to illustrate how Vue CLI 3 downloads what you defined as required for unique project. This tutorial will not use the class-style syntax, but will use Babel alongside TypeScript.

When encountering the following, enter N:

In the following prompt, enter Y:

Next, Vue CLI will ask about history mode. History mode will make each route its own URL. This means you will not have the /#/ (hash) in your application’s URL. If you do use history mode, you will need a Node server to run your project. This is not a problem, because Vue CLI 3 provides you with a Node server.

Type Y to answer yes to history mode:

The next question is regarding CSS pre-processors such as Sass or LESS. A CSS pre-processor is CSS with added features like nesting and variables. The browser cannot read this, so when the project is built, Node will compile all of your SCSS or LESS code to traditional CSS. Since you are using Node to build your project, it’s recommended to select Sass/SCSS (with node-sass) as your pre-processor. Later on, you’ll add lang attributes in your .vue components to enable SCSS on a per component basis:

After that, you will receive some questions regarding the linter style. A linter is a program that evaluates your code as you develop your application. This linter can enforce a number of syntactical rules during development. In addition to this, your integrated development environment (IDE) can read this configuration file and format your code on save. This will keep your code consistent no matter who works on your project and what operating system or IDE a developer is using.

For this tutorial, choose ESLint + Standard config:

This selects a set of rules for ESLint to enforce. These configurations include options like the use of trailing commas, semi-colons at the end of a line, or using const over var in JavaScript.

The next option is selecting when you want ESLint to format your code. This can be either on save or when you commit your code to a service like GitHub, GitLab, or BitBucket. It’s recommended to select Lint on save so you can review any changes before committing to version control:

Once you select your lint features, Vue CLI will ask you about how you want to store these configurations, whether in dedicated files or in the package.json. It’s considered standard practive to store configurations in their own files for a few reasons. One, configurations are easier to share between projects this way, and two, you’ll be keeping your package.json as legible as possible by only defining the important information about your app:

Once you are done, the CLI tool will ask if you want to save this selection as a preset for future projects. This is useful if you are generating projects for your employer and you want everything to stay consistent.

Go ahead and save this configuraion as a preset; Vue CLI will ask you to rename it. Name it DigitalOcean Vue Tutorial Series:

Now you can use these exact same settings for a future project.

At this point, you will have something along the lines of this in your terminal summarizing all of your options:

Press ENTER, and Vue CLI will start creating your app.

When completed, cd (change directory) in your project name (vue-starter-project):

Next, start the application with npm run serve. This will run your project at a port on your localhost, usually :8080. If it’s a different port, the CLI will tell you:

You do not need to download dependencies, as the CLI already did that for you. To view your generated project, open your browser of choice and visit localhost:8080 in the URL bar. You will find a welcome screen with the Vue logo and the technologies you’ve selected in the previous steps.

You can leave this server running throughout this tutorial to monitor your changes.

In this section, you selected a number of options specific to the project you are creating. Vue CLI downloaded all of the code needed and pre-configured it for you. You can now start working in the generated code base, including creating your own single-file .vue components.

Example Configuration #

Now that you have a single-page application running on a Node server, make some changes to this by creating a standard header and footer. These AppHeader.vue and AppFooter.vue components will be imported in such a way that they’ll be present on each route.

In a new terminal window, navigate into the root of your vue-starter-project folder and list out the files with the following command:

You will receive the following output:

You can also view the contents of your project by opening your project in your editor of choice, such as Visual Studio Code. In either case, you will have access to a number of different files and directories. These config files in the root directory have been created because of the selections made during the intial generation of this project. The option In dedicated config files told Vue CLI to create config.js files for each service you are using, such as Babel, TypeScript, and ESLint. In addition to these files, there are a number of directories. This tutorial will go over these as you get to them.

First, create a .vue file in the components directory and name it AppHeader.vue. You can do this right-clicking in the components directory and creating a new file in IDEs like VS Code. If you prefer terminal commands, you can do this in your computer’s terminal with the bash command touch:

In this step, you are creating a single-file component that will contain all of the HTML, JavaScript, and SCSS that this chunk of code needs. Every .vue component contains three basic concerns or sections: