aspdotnet vuejs
v3.0.0
Dotnet Core 3.0 + VueJsОсновная идея этого проекта — предоставить простой способ начать новый проект с использованием .Net Core WebAPI на стороне сервера и VueJs на стороне клиента. Для этой цели мы настраиваем основную конфигурацию, чтобы включить эту интеграцию, используя некоторые утилиты, такие как горячая перезагрузка, и некоторые внешние библиотеки, такие как Element-UI и FontAwesome.
Наша цель — предоставить простой SPA с минимальными зависимостями и проблемами производительности. VueJs настроен с использованием Vuex и Vue Router, но его можно удалить, если вы считаете, что он не соответствует вашим требованиям. То же самое касается библиотеки компонентов. В этом шаблоне мы также приводим примеры с основным функционалом.
Этот шаблон вдохновлен и адаптирован на основе проектов Марка Пьешака и проекта Нордеса.
* Работа в процессе. Доступно в будущих выпусках.
Чтобы скачать и установить шаблон, просто введите:
> dotnet new -i aspdotnet-vuejsСписок установленных шаблонов можно просмотреть с помощью команды
dotnet new -l.
Затем, чтобы создать свой проект, вы просто используете команду ниже в каталоге:
> dotnet new vue Это автоматически запустит dotnet restore . Но это можно изменить в настройках шаблона. Перед использованием предыдущей команды ознакомьтесь dotnet new vue -h .
Имя решения и проекта будет именем каталога.
Чтобы обновить установку, вам просто нужно будет повторить процесс установки. Пока номера версий не равны, у вас не будет какого-либо неожиданного поведения.
Введите следующую команду из оболочки:
> dotnet new -u aspdotnet-vuejsЧтобы начать разработку приложения, просто используйте команду .Net CLI:
> dotnet run YourAplication.csprojВы можете просто ввести
dotnet runв каталоге проекта или настроить IDE для запуска. В этом последнем случае просто не забудьте передать переменную средыASPNETCORE_ENVIRONMENT=Development.
Это также запустит все зависимости узла, такие как npm i .
Приложение будет запущено в режиме разработки с включенной горячей перезагрузкой по адресу
https://localhost:5001иhttp://localhost:5000.
Перед запуском процесса вам необходимо убедиться, что ваш wwwroot пуст .
Просто используйте обычный способ публикации с помощью .Net Core CLI.
> dotnet publish YourProject.csproj -c release -o ./publish/Вы также можете добавить все остальные параметры из командной строки dotnet. Пожалуйста, посетите сайт MSDN, чтобы узнать больше об этом.
Это приведет к перестройке вашего проекта, а затем будет использовать специальную цель для перестройки вашего клиента (vuejs) в производственном режиме.
Если вы публикуете за сервером NginX, вам может потребоваться дополнительная настройка.
Допустим, у вас есть базовый сайт http://www.example.com и в вашей конфигурации NginX вы хотите, чтобы ваше приложение dotnet размещалось в http://www.example.com/myApp . В таком случае вам понадобится установить базовый URI для index.html. Вместо того, чтобы делать это вручную между разработкой и производством, у вас есть файл ./build/base.prod.config.js , который содержит возможное переопределение.
Просто установите переопределение следующим образом:
module . exports = {
baseUriPath : '/myApp/'
}Когда вы опубликуете в следующий раз, путь будет учтен и автоматически будет установлен базовый путь URI.
В проект уже добавлен докер-контейнер, доступный через Docker Hub. Если хотите, можете вытащить изображение. Это сделает образец доступным локально. В изображении используется версия Alpine, поэтому он занимает небольшой объем.
Поскольку контейнеры в Docker довольно популярны, в корневую папку шаблона также включен файл Dockerfile . Не забудьте .dockerignore , где некоторые файлы игнорируются, чтобы избежать копирования нежелательных файлов перед публикацией.
Убедитесь, что у вас установлен Docker.
Код имеет встроенное сжатие Gzip для HTTP. Этот код полезно использовать, особенно если вы используете Kestrel. В противном случае, если вы используете IIS, удалите этот конкретный код, найденный в Startup.cs . Обычно IIS предлагает собственный более производительный модуль сжатия.
Существует некоторая автоматизация Components , доступных в ./ClientApp/comComponents/**/* . Все файлы, начинающиеся с ключевого слова base будут объявлены как глобальные, а имя компонента, который будет использоваться где угодно, будет определено в змеином регистре без ключевого слова base .
Пример: baseHelloWorld будет зарегистрирован как hello-world , и вы сможете использовать его в своем шаблоне Vue.
< template >
< div >
< hello-world /> works!
</ div >
</ template >В проекте есть реальный пример компонента карточки для каждой страницы. Имя компонента —
baseCard.vue.
CSS не генерируется, пока вы находитесь в режиме разработки. Они будут созданы только тогда, когда вы будете использовать команду dotnet publish или, в качестве альтернативы, вы также можете пойти и ввести npm run build -- --prod , который запустит производственную сборку с минимизацией и извлечением файлов.
Важно: в настоящее время веб-пакет очищает всю папку wwwroot в проекте .Net. Итак, если у вас есть статические файлы, переместите их в папку ./ClientApp/static/ .
Чтобы ускорить разработку, мы предоставляем установку библиотеки компонентов Element-UI. Документацию этой библиотеки можно найти на его сайте.
Его можно удалить обычным способом в
main.jsесли он вам не нужен.
