How to install and configure Vue.js?

Question

JavaScript

Hello. During the installation of Vue.js, the link to localhost does not appear in the terminal. Entered the command npm run serve. Please tell me how to fix this. I followed the instructional video exactly during installation.

$ npm run serve

> [email protected] serve
> vue-cli-service serve

INFO Starting development server...
10% building 2/5 modules 3 active ...modules\babel-loader\lib\index.js !C:\Users\Asus\Desktop\Vue\vue-project\src\main.jsError: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object .createHash (node:crypto:130:10)
at module.exports (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (C:\Users\Asus\Desktop\Vue\vue- project\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\Users\Asus\Desktop\Vue\vue-project\node_modules\webpack\lib\NormalModule.js:503:5
at C:\Users \Asus\Desktop\Vue\vue-project\node_modules\webpack\lib\NormalModule.js:358:12
at C:\Users\Asus\Desktop\Vue\vue-project\node_modules\loader-runner\lib\LoaderRunner. js:373:3
at iterateNormalLoaders (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\loader-runner\lib\LoaderRunner.js:214:10) at iterateNormalLoaders (C:\Users\Asus\Desktop\Vue\vue- project\node_modules\loader-runner\lib\LoaderRunner.js:221:10) at C:\Users\Asus\Desktop\Vue\vue-project\node_modules\loader-runner\lib\LoaderRunner.js:236:3
at runSyncOrAsync (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
at iterateNormalLoaders (C:\Users\Asus\Desktop\Vue\vue-project \node_modules\loader-runner\lib\LoaderRunner.js:232:2)
at Array. (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at C:\Users\Asus\Desktop\Vue\vue- project\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
node:internal/crypto/hash:67
this[kHandle] = new _Hash(algorithm, xofLen);
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at module.exports (C:\ Users\Asus\Desktop\Vue\vue-project\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\ webpack\lib\NormalModule.js:417:16)
at handleParseError (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\Users\Asus\Desktop\Vue\vue-project\node_modules\ webpack\lib\NormalModule.js:503:5
at C:\Users\Asus\Desktop\Vue\vue-project\node_modules\webpack\lib\NormalModule.js:358:12
at C:\Users\Asus\Desktop\ Vue\vue-project\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\loader-runner\lib\LoaderRunner.js :214:10) at Array. (C:\Users\Asus\Desktop\Vue\vue-project\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (C:\Users\Asus\Desktop\Vue\vue- project\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at C:\Users\Asus\Desktop\Vue\vue-project\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
at C:\Users\Asus\Desktop\Vue\vue-project\node_modules\graceful -fs\graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v17.3.0

package.json

{
"name": "project-vue",
"version": "0.1.0 ",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": " ^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli -plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue /compiler-sfc": "^3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

Answer 1

How to install and configure Vue.js?

Using Vite :

npm create [email protected] my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

You will get a ready, running project in a few seconds.
https://vitejs.dev/guide/#scaffolding-your-first-v...
With yarn( npm install --global yarn) instead, npmthis will be noticeably faster:

yarn create vite my-vue-app --template vue
cd my-vue-app
yarn install
yarn run dev

To make localhost:3000 open in the browser automatically, you need to add server.opento vite.config.js
For example:

import {defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vue(),
  ],
  server: {
    open: "/"
  }
});

And, as written in HelloWorld.vue, in the case of VSCode, you should install the appropriate plugin for code assistance, Vue 3 syntax highlighting.