Как установить и настроить Vue.js?

Question

[Alex931]

Здравствуйте. Во время установки Vue.js в терминале не появляется ссылка на localhost. Ввел команду npm run serve. Подскажите, пожалуйста, как это исправить. Во время установки точно следовал обучающему видео.

$ npm run serve

> vue-project@0.1.0 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"
]
}

Comments

[Антон Шаманов]

package.json добавь к вопросу

[Alex931]

Антон Шаманов, добавил

[Антон Шаманов]

Alex931, на будущее оборачивай код в <code>...</code>

[GrayHorse]

Может все-таки использовать Vite?

Ввел:

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

Получил готовый, запущенный проект за пару секунд.

https://vitejs.dev/guide/#scaffolding-your-first-v...

[GrayHorse]

Касательно ошибки

error:0308010C:digital envelope routines::unsupported

Это из-за Node.js 17, а именно из-за нового OpenSSL 3.

https://stackoverflow.com/questions/69692842/error...

Answer 1

[GrayHorse]

Как установить и настроить Vue.js?

С использованием Vite:

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

Получишь готовый, запущенный проект за несколько секунд.

https://vitejs.dev/guide/#scaffolding-your-first-v...

С yarn (npm install --global yarn) вместо npm это будет заметно быстрее:

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

Чтобы localhost:3000 открывался в браузере автоматически, нужно добавить server.open в vite.config.js

Например:

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

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

И, как написано в HelloWorld.vue, в случае VSCode следует установить соответствующий плагин для код ассистанса, подсветки синтаксиса Vue 3.

Comments

[Alex931]

Все сделал, получилось вот так:

Asus@LAPTOP-TGVPUQLS MINGW64 ~/Desktop/Vue

$ npm create vite@latest

Need to install the following packages:
create-vite@latest
Ok to proceed? (y) y
√ Project name: ... vite-project
√ Select a framework: » vue
√ Select a variant: » vue

Scaffolding project in C:\Users\Asus\Desktop\Vue\vite-project...

Done. Now run:

cd vite-project
npm install
npm run dev

Asus@LAPTOP-TGVPUQLS MINGW64 ~/Desktop/Vue
$ cd my-project
bash: cd: my-project: No such file or directory

Asus@LAPTOP-TGVPUQLS MINGW64 ~/Desktop/Vue

$ npm install

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\Asus\Desktop\Vue/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\Asus\Desktop\Vue\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Asus\AppData\Local\npm-cache\_logs\2022-02-16T11_09_48_043Z-debug-0.log

Asus@LAPTOP-TGVPUQLS MINGW64 ~/Desktop/Vue

$ npm run dev

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\Asus\Desktop\Vue/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\Asus\Desktop\Vue\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Asus\AppData\Local\npm-cache\_logs\2022-02-16T11_10_03_816Z-debug-0.log

[GrayHorse]

Я обновил пост несколько минут назад.

[GrayHorse]

Там была команда
cd my-project
а надо было
cd my-vue-app.

[Alex931]

GrayHorse, понял. Все получилось, появился localhost. Вы очень помогли.