Vue init webpack не работает

Русские Блоги

Vue init Webpack проблема

vue-cli · Failed to download repo vuejs-templates/webpack: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:1080

Я столкнулся с этой проблемой сегодня, я не использовал много методов онлайн. Я до сих пор пригласил большой Бог компании, чтобы помочь решить его. Решение первого списка конфигурации NPM для просмотра файла. Соответствующий это.

Найти соответствующий файл .npmrc # https-proxy = http: //127.0.0.1: 1080 /, это утверждение, добавьте его # ! Вы можете успешно Vue init Webpack!

Интеллектуальная рекомендация

Хранимая процедура MySQL (вызов)

Хранимая процедура MySQL (вызов): Во-первых, объясните: Хранимая процедура MySQL — это новая функция, добавленная с MySQL 5.0. Преимуществами хранимых процедур являются корзина. Но главноеЭффективност.

№ 25 установить операцию

Вчера кратко представил коллекцию и некоторые ее основные методы, а также некоторые другие общие методы сбора. 1) методы addAll, containsAll и removeAll: 2) Итератор: Коллекция предоставляет метод для.

Связанный список со структурой данных — односвязный список слияния сортировка слияния

Идеи: 1. Найдите середину связанного списка и разделите его на 2 части. 2. Перейдите к шагу 1, разрежьте на 4 и 8 полосок. . . Пока в каждом связанном списке не будет только 1 элемент 3. Операция слия.

Foreach (упрощенное письмо для циркуляции)

Foreach (упрощенное письмо для циркуляции) Усовершенствованный для цикла является продвинутой для цикла после JDK1.5, который специально используется для траверсных массивов и коллекций. Его внутренни.

Источник

run ‘vue init webpack’ fail in windows10 #681

Comments

xiejiamiao commented Dec 12, 2017

node version is v8.9.1
npm version is 5.5.1
vue-cli version is 2.9.2

if i initialize a vue project like:

vue init webpack testproject

and follow the prompts to configure, then it show err:

The text was updated successfully, but these errors were encountered:

KyleLehtinenDev commented Dec 12, 2017 •

Same, failing on OSX 10.11.6.
node version is v8.9.3
npm version is 5.5.1
vue-cli version is 2.9.2

Seemed to just fail on npm install. After doing a manual npm install and checking it out things seem to be working.

xiejiamiao commented Dec 13, 2017

It work fine on OSX 10.12.6
the node version, npm version, vue-cli version all is same to you
but everything is work fine.

IcedKnight commented Dec 13, 2017

the same error, node version 7.5.0, newest vue-cli version,

litong534 commented Dec 13, 2017

you can choose ‘NO, I will handle that myself’ as a workaround

songhongjiang commented Dec 13, 2017

the same error, node version 7.9.0, newest vue-cli version

Will233 commented Dec 13, 2017

Should we run npm install for you after the project has been created? (recommended)
choose : NO, I will handle that myself

xiejiamiao commented Dec 13, 2017

on this step choose :

after the project has been created, run

as administrator to install dependencies.
after this, run

lo56ve commented Dec 14, 2017

the same error,but it can work after run npm run dev

lambdakris commented Dec 14, 2017 •

There is also an issue in the npm repo npm/npm#19374 about the same thing.

The issue is that when you provide a name to create a directory, like so

Instead of using the current directory, like so

When you then elect to have scaffolding restore your packages (whether through npm or yarn), you are not in the project directory, but above it, so the package install/restore command fails. The workaround works because it skips the package install/restore command. The fix (if you like) would be for vue-cli to change into the directory that it created (when a name is provided) before running the package install/restore command.

LinusBorg commented Dec 14, 2017 •

I’m the one responsible for that new feature of the template (see: vuejs-templates/webpack#1133). I tested in throughly on OS X, and @sudo-suhas did on windows.

However, since we can’t test all version combinations of OS’s and node/npm, errors can happen, so sorry about that and thanks for your patience.

Immediate solutions/workarounds.

One thing we can immediately improve is the error handling. This error is not «fatal» — all people have to do is run npm install themselves. So I will add a nice error message explaining that to users.

so what’s the Problem, really?

As to the original source of the problem, I’m a bit dumbfounded for the moment.

When you then elect to have scaffolding restore your packages (whether through npm or yarn), you are not in the project directory, but above it, so the package install/restore command fails

That would be weird — being in the wrong directory should lead to an error on OSX as well, but doesn’t (for me).

I also think I set the cwd for the npm call to the right directory here:

Continuing in the right repository

Since this issue is caused by code in the webpack template, not the CLI, have opened an issue there (see: vuejs-templates/webpack#1168) — further discussion should be taking pace there as well.

Therefore I will lock this issue, but keep it open for others with the same problem until it’s fixed. It will be closed when the problem is solved in the template repo.

There is also an issue in the npm repo npm/npm#19374 about the same thing.

The problem we are seeing here is very likely our fault, not npm’s. That ticket should be closed.

Источник

# Работа с Webpack

# Простая конфигурация

Самый простой способ изменять конфигурацию webpack — использовать объект в опции configureWebpack в файле vue.config.js :

Объект будет объединён в итоговую конфигурацию webpack с помощью webpack-merge

Некоторые параметры webpack устанавливаются на основе значений из vue.config.js и не должны изменяться напрямую. Например, вместо изменения output.path нужно использовать опцию outputDir в vue.config.js ; а вместо output.publicPath нужно использовать опцию publicPath в vue.config.js . Это связано с тем, что значения из vue.config.js используются в нескольких местах внутри конфигурации и необходимо гарантировать что всё вместе будет работать правильно.

Если необходимо условное поведение, в зависимости от окружения, или вы хотите напрямую изменять конфигурацию — используйте функцию (будет лениво выполняться после установки переменных окружения). Она получает итоговую конфигурацию в качестве аргумента. Внутри функции можно напрямую изменить конфигурацию, ИЛИ вернуть объект для объединения:

# Chaining (Продвинутый вариант)

Внутренняя конфигурация webpack поддерживается с использованием webpack-chain

. Библиотека предоставляет абстракцию над обычной конфигурацией webpack, добавляет возможность задавать именованные правила для загрузчиков и плагинов, а затем выбирать эти правила по имени и изменять их параметры.

Это позволяет осуществлять более тонкий контроль над встроенной конфигурацией. Ниже вы увидите примеры изменений, выполненных с помощью опции chainWebpack в vue.config.js .

Команда vue inspect пригодится, когда вы будете пробовать добраться до определённого загрузчика в цепочке.

# Изменение настроек загрузчика

Для загрузчиков связанных с CSS, рекомендуется использовать css.loaderOptions вместо изменения напрямую через chaining. Это связано с тем, что для каждого типа CSS-файлов существуют несколько правил, а css.loaderOptions гарантирует, что вы сможете повлиять на все эти правила в одном месте.

# Добавление нового загрузчика

# Замена загрузчиков для правила

Если вы хотите заменить существующий базовый загрузчик

, например воспользоваться vue-svg-loader для вставки SVG-файлов инлайн вместо загрузки обычными файлами:

# Изменение настроек плагина

Вам потребуется ознакомиться с API webpack-chain

чтобы понять как использовать всю мощь этой опции, но она даст вам более выразительный и безопасный способ изменения конфигурации webpack в отличие от изменения значений напрямую.

Например, предположим, необходимо изменить местоположение index.html по умолчанию с /Users/test/proj/public/index.html на /Users/test/proj/app/templates/index.html . По ссылке html-webpack-plugin

перечислен список параметров, которые можем передавать. Чтобы изменить шаблон, передадим новый путь к шаблону следующей конфигурацией:

Вы можете убедиться, что изменение произошло, изучив конфигурацию webpack с помощью команды vue inspect , о которой мы поговорим дальше.

# Просмотр конфигурации Webpack проекта

Поскольку @vue/cli-service абстрагируется от конфигурации webpack, может быть сложнее понять, что включено в конфигурацию, особенно когда вносите изменения самостоятельно.

vue-cli-service предоставляет команду inspect для проверки итоговой конфигурации webpack. Глобальный бинарник vue также предоставляет команду inspect , которая просто проксируется в vue-cli-service inspect вашего проекта.

Команда выведет в stdout итоговую конфигурацию webpack, которая будет также снабжена подсказками, как обращаться к правилам и плагинам через chaining.

Вы можете перенаправить вывод в файл для более удобного изучения:

По умолчанию команда inspect показывает конфигурацию для разработки. Для отображения конфигурации для production необходимо запустить:

Обратите внимание, что вывод не является файлом рабочей конфигурации webpack, это только сериализованный формат предназначенный для проверки.

Вы также можете указать подмножество конфигурации для проверки, указав путь:

Или указать именованное правило или плагин:

Наконец, вы можете вывести все именованные правила и плагины:

# Использование файла итоговой конфигурации

Некоторым инструментам может потребоваться файл итоговой конфигурации webpack, например для IDE или утилит командной строки, которым необходимо указывать путь до конфигурации webpack. В таком случае вы можете использовать следующий путь:

Этот файл динамически разрешается и экспортирует ту же конфигурацию webpack, которая используется в командах vue-cli-service , в том числе из плагинов и даже ваших пользовательских конфигураций.

Источник

vue init webpack error · [README.md] Missing helper: «if_or» #627

Comments

memoryleakyu commented Nov 1, 2017

vue init webpack my-project

? Project name ***
? Project description ***
? Author ***
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
vue-cli · [README.md] Missing helper: «if_or»

I tried several times and the error seems to be randomly reported. like this
vue-cli · [package.json] Missing helper: «if_or»

my node version is 8.5.0

a lot appreciate if you could solve this problem

The text was updated successfully, but these errors were encountered:

posva commented Nov 1, 2017

Could you give more information about your OS? I’m unable to reproduce it on OS X

memoryleakyu commented Nov 2, 2017

Sorry I forgot to mention it. I’m using it on windows 10 . I also tired it with node v8.9.0. It reported the same error vue-cli · [package.json] Missing helper: «if_or» .
I have used vue-cli 2.8.2 before successfully with the same computer and os. Dont know what happened when I updated the vue-cli to 2.9.1

cocoastorm commented Nov 3, 2017

Hey, are you using yarn or npm?
I encountered a similar issue but it was complaining about Missing helper: «if_eq» .

HaitianLiu commented Nov 7, 2017

I got the exactly same error on my OS X.

memoryleakyu commented Nov 7, 2017

my problem was solved. try not to name the project.
just use vue init webpack then everything goes well. don’t know what’s the trick behind it

LinusBorg commented Nov 14, 2017

OPs problem was solved, reproductions where not provided, issue has been inactive for 7 days.

adrienthiery commented Dec 5, 2017 •

Got that error today on MacOSX 10.12.6.

Installing vue-cli with yarn globally threw that error.

Uninstalling it and reinstalling it with npm i -g vue-cli solved the problem.

Hopefully it helps.

drazisil commented Jan 11, 2018

@adrienthiery Do you have any idea why that is? Seems like a strange edge case.

That said, I’m at a loss as to why npm install works and yarn doesn’t.

Drudwyn commented Jan 17, 2018

Reproduced this bug, on Windows 10, installing using npm.

\.vue-templates\webpack ? Generate project in current directory? Yes ? name js ? author Me vue-cli · [.babelrc] Missing helper: «if_or» «>

Had to git clone the webpack repo down, and move the vue-templates down to the .vue-templates/webpack/template dir:

Источник

Веб-приложение на Node и Vue, часть 2: компоненты, формы, маршруты

Перед вами — вторая часть серии материалов, которая посвящена созданию веб-приложения Budget Manager с использованием Node.js, Vue.js и MongoDB. В первой части мы занимались сервером, а именно — подготовили основные методы RESTful API и наладили JWT-аутентификацию. Сегодня приступим к работе над клиентской частью приложения, создадим каркас фронтенда, средства для регистрации в системе и входа в неё, поговорим о маршрутах и об их защите.

Установка Vue.js и использование vue-cli

Установить Vue.js довольно просто. Мы планируем использовать vue-cli с шаблоном webpack . Обратившись к руководству по Vue, можно выяснить, что для установки vue-cli и подготовки рабочей среды используются такие команды:

Продолжим работу над проектом, создав папку application в его корневой директории. Этот шаг можно и пропустить, создав папку в процессе работы с vue-cli . Если вы решите не создавать папку, тогда вам нужно дать проекту имя, выполнив команду такого вида:

Вот как выглядит проект после создания папки application :

Теперь перейдём в только что созданную папку с помощью интерпретатора командной строки, и, если vue-cli ещё не установлен, выполним следующую команду:

Эта команда позволяет установить vue-cli глобально, поэтому неважно, в какой именно папке мы будем находиться, выполнив её.

Теперь вызовем следующую команду:

Обратите внимание на то, что тут не указано имя проекта, так как подразумевается, что команда выполняется в папке application , уже созданной для размещения в ней приложения.

После выполнения вышеприведённой команды и загрузки шаблона вам будет задан ряд вопросов:

Если хотите, на данном этапе может поменять название проекта, описание, сведения об авторе. Для того, чтобы не отклоняться от этого материала, оставьте всё остальное таким, как показано на рисунке.

Далее, всё ещё оставаясь в папке application , устанавливаем зависимости и запускаем проект.

Теперь можно полюбоваться на стандартную страницу Vue.

Очистка приложения Vue

Уберём из приложения некоторые ненужные нам стандартные элементы. Для этого надо перейти в папку application/src/assets и удалить logo.png , так как этим файлом мы пользоваться не будем. Далее, откроем файл корневого компонента App.vue из папки application/src и приведём его к виду, представленному следующим фрагментом кода:

Теперь надо очистить маршруты. Для этого откроем файл index.js в папке router и приведём его к такому виду:

Обратите внимание на то, что существует множество способов структурирования маршрутов, но, для того, чтобы не усложнять проект, мы просто импортируем компоненты и зададим маршруты в этом файле.

Теперь, на последнем этапе очистки стандартного приложения, удалим файл HelloWorld.vue из папки components .

Установка зависимостей

Прежде чем заняться разработкой фронтенда приложения, нужно установить ещё несколько зависимостей. Перед выполнением следующей команды проверьте, находитесь ли вы в папке application :

Теперь установим зависимости разработки:

Мы будем использовать axios для обработки HTTP-запросов. В vuetify нас интересуют визуальные компоненты и возможность пользоваться компоновкой элементов на основе сетки. Библиотеку vue-cookie будем применять для работы с куки-файлами. Пакеты sass-loader и node-sass позволят нам пользоваться SCSS.

Начало работы над фронтендом приложения

Теперь, когда все подготовительные мероприятия завершены, займёмся разработкой. Перейдём к папке components и создадим в ней папку pages , в которой создадим папку Authentication . В этой папке надо создать файл Authentication.vue , представляющий компонент, которым будем пользоваться для аутентификации. Вот что должно в итоге получиться:

В файле Authentication.vue разместим следующий код:

Расширением этого компонента займёмся позже, а пока перейдём в папку router и поработаем с маршрутами.

Для начала импортируем компонент Authentication и настроим маршрут для его использования:

После этого, если перейти по адресу http://localhost:8080/#/login, можно увидеть пустую страницу с надписью «Auth!». Это говорит о том, что маршрут аутентификации работает.
Теперь откроем файл main.js из папки src и импортируем vuetify и vue-cookie :

Перейдём к компоненту App.vue из папки src и займёмся стилями. Сначала нужно подготовить тег style . Разместим его сразу после закрытия тега script :

Теперь переходим в папку src/assets и создаём в ней файл styles.scss и папку partials . В этой папке создадим два частичных шаблона, представленных файлами _variables.scss и _animations.scss . В результате должна получиться такая структура:

В файле _variables.scss зададим такие параметры:

В файл _animations.css добавим описания анимаций bounceIn и slideInFromLeft :

Импортируем частичные шаблоны в styles.scss :

Теперь, в папке assets , создадим папку images . Сюда можно поместить любое изображение, которое будет использоваться в качестве фона. Здесь, в репозитории, можно найти изображение, которое применяется в этом материале.

Настроим внешний вид приложения, приведя к следующему виду блок стилизации в файле App.vue :

Тут мы импортируем ранее подготовленные стили scss и задаём использование фиксированного фонового изображения для приложения. Мы стремимся к тому, чтобы на любом устройстве экран приложения выглядел примерно одинаково.

В псевдоэлементе body :after мы задаём параметр background-color , записывая в него значение переменной $background-tint . Это позволит применить к фоновому изображению пурпурный цветной фильтр. Вот как выглядят разные варианты фонового изображения.

Обратите внимание на то, что всё, что касается стилизации и работы с фоном, на функционал приложения не влияет, поэтому вы вполне можете пропустить эти шаги или украсить приложение так, как вам захочется.

Масштабирование области просмотра и загрузка иконок

Благодаря этому шагу мы обеспечим правильное отображение приложения на мобильных устройствах. Кроме того, на данном этапе работы мы загрузим иконки в стиле Material Design. Для того, чтобы всё это сделать, перейдём к файлу index.html , который расположен в папке application и добавим следующее в тег head :

Разработка компонента Authentication

Теперь, когда мы немного украсили приложение, избавившись, по крайней мере, от скучных белых страниц, продолжим работу над компонентом Authentication . Создадим в папке Authentication файл index.js .

Импортируем в него то, что нам понадобится и объявим константу, в которую запишем путь к API:

Теперь создадим объект Authentication , который будет содержать нужные нам методы:

Мы начинаем работу над этим компонентом, объявляя объект с именем user , который хранит сведения о том, аутентифицирован ли пользователь.

Теперь напишем методы:

В первом методе используются три аргумента:

• context : это — компонент Vue.
• credentials : тут будут имя пользователя ( username ) и пароль ( password ).
• redirect : здесь будет путь, по которому мы собираемся перенаправить пользователя.

Axios используется здесь для выполнения POST-запроса к API с передачей аргумента credentials . Затем мы деструктурируем ответ, data , так как нас здесь интересует лишь значение token , сохраняем это значение в куки-файле и задаём срок жизни этих данных, равный одному дню. Также мы устанавливаем в true переменную validLogin и значение authenticated объекта user , и, наконец, перенаправляем пользователя по пути из аргумента redirect .

В противном случае мы устанавливаем поле snackbar объекта context в true и записываем в message сообщение об ошибке.

Второй метод очень похож на первый, его мы используем для создания новой учётной записи. Разница между ним и первым методом заключается в конечной точке, с которой мы работаем.
Третий метод используется для проверки того, аутентифицирован пользователь или нет.
Последний метод позволяет возвратить заголовок Authorization .

Теперь продолжим работу над компонентом, открыв файл Authentication.vue . Тут мы будем пользоваться средствами Vuetify:

Здесь имеется элемент div с классом l-auth-container , который выполняет роль контейнера. Следом идёт ещё один div с классом l-auth , который содержит структуру элементов для организации формы ввода, в частности, это элемент v-form , привязанный к данным переменной validLogin .

Внутри него находится пара подписанных полей ввода v-text-field , которые привязаны к данным из credentials (мы займёмся этими данными ниже). Поля снабжены иконками, взятыми из https://material.io/icons/, с ними также связаны правила по проверке ввода (и там и там — одни и те же правила, не будем усложнять проект), кроме того, оба эти поля являются обязательными.

Второе поле ввода предназначено для пароля, оно снабжено иконкой, которая указывает на то, может ли пользователь видеть вводимый пароль. У этой иконки есть коллбэк, являющийся стрелочной функцией, который позволяет переключать значение переменной loginPasswordVisible с true на false и наоборот. Если эта переменная установлена в true , то параметр type поля ввода устанавливается в text , иначе это password .

И, наконец, тут присутствуют описания кнопок, которые мы используем для создания новой учётной записи или для отправки формы с целью входа в систему.

Следующий фрагмент кода описывает структуру формы регистрации в системе, которая видна лишь в том случае, если переменная signUpVisible установлена в true . Устройство этой формы похоже на устройство формы входа в систему, тут изменены лишь несколько строк. В частности, здесь используется переменная signUpPasswordVisible вместо loginPasswordVisible и другой метод обработки щелчка по кнопке.

Далее, тут имеется панель v-snackbar , которая, в ходе аутентификации, используется для вывода сообщений.

Теперь, в том же файле Authentication.vue , опишем скрипт компонента:

Тут всё начинается с импорта файла index.js из папки Authentication , так как нам нужен метод authenticate , определённый внутри этого файла.

Взглянем теперь на переменные, хранящие данные компонента:

• snackbar : используется для панели сообщений.
• validLogin : используется для проверки формы входа в систему.
• validSignUp : используется для проверки формы регистрации.
• signUpVisible : используется для вывода формы регистрации (при установке в true ).
• loginPasswordVisible : указывает на то, может ли пользователь видеть пароль, вводимый в форме входа в систему.
• signUpPasswordVisible : указывает на то, можно ли видеть пароль, вводимый в форме регистрации.
• rules : правила проверки данных, введённых в поля форм.
• credentials : объект, привязанный к полям ввода формы входа в систему, используемый для аутентификации пользователя.
• newUser : объект, привязанный к полям ввода формы регистрации в системе.
• message : используется для вывода сообщений в ходе аутентификации.

В этом компоненте есть пара методов. В методе submitAuthentication осуществляется вызов метода authenticate из файла Authentication , с передачей контекста, учётных данных и пути для перенаправления. Метод submitSignUp используется для вызова метода signup .

И, наконец, вот код стилизации компонента, который надо разместить в том же файле Authentication.vue (тут вы можете дать волю фантазии и сделать всё таким, как вам хочется):

Вот как выглядят компоненты для входа в систему и регистрации нового пользователя.

Разработка компонента Home

Перейдём в папку pages и создадим файл компонента Home.vue :

На данный момент в шаблоне этого компонента, код которого представлен ниже, будут лишь несколько текстовых сообщений:

Этот компонент является основой для домашней страницы, которой мы займёмся в следующей части этой серии. А пока выполним GET-запрос к API для получения всех зарегистрированных пользователей, используя отладочный метод API и передавая токен в заголовке запроса. Вот как это будет выглядеть:

Защита системы навигации

Откроем файл index.js из папки router . Вот к какому виду его нужно привести:

Рассмотрим этот код.

В этой строке мы импортируем файл Authentication , называя его Auth , так как компонент Authentication также был импортирован.

Тут мы даём имя объекту Router для того, чтобы позже создать защиту системы навигации. Также мы добавляем путь к компоненту Home . В параметре meta.requiredAuth будет записано true . Это означает, что если к этому компоненту попытается получить доступ неаутентифицированный пользователь, он будет перенаправлен на страницу входа в систему.

Здесь мы защищаем систему навигации. А именно, регистрируем глобальный сторожевой хук, пользуясь которым перед переходом по каждому маршруту проверяем, установлен ли его параметр meta.requiredAuth в true . Если это так, мы проверяем объект пользователя из Authentication . Если пользователь не аутентифицирован, мы перенаправляем его на страницу входа в систему.

Этой командой экспортируем маршрутизатор.

Теперь откройте файл main.js в папке application . Тут мы собираемся импортировать файл Authentication и вызвать метод checkAuthentication :

Без этого, если пользователь перезагрузит страницу или закроет её, а потом снова откроет, он будет перенаправлен на страницу входа в систему.

Источник