Как вы, возможно, уже знаете, в Visual Studio 2017 v15.3 + вы можете выбирать шаблоны веб-приложений только для Angular, React и React + Redux.
Однако VueJS недоступен. Он был удален из-за ограниченного числа сопровождающих, но теперь он вернулся, по крайней мере, из командной строки.
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
Теперь, если вы перечислите их, вы увидите, что VueJS доступен.
dotnet new -l
Итак, вот оно.
Но подождите, в этом шаблоне используются старые версии .Net Core и WebPack (узловые модули), поэтому давайте обновим его.
Вот что мы сделаем в этом уроке:
- Создайте новый ASP.NET Core с проектом Vue.js, используя этот шаблон
- Перенесите его на .Net Core с 2.0 на 2.1.
- Обновите package.json, чтобы обновить WebPack 2 до 4
- Превратите его в другой шаблон, чтобы мы могли его повторно использовать
Давайте сначала создадим новый проект, используя шаблон Vue.
dotnet new vue -n vuets -o vuets
Теперь давайте откроем его в нашем любимом редакторе и изменим следующие файлы:
- vuets.csproj
- Startup.cs
- Program.cs
- package.json
Миграция будет согласно официальному руководству.
Начнем с vuets.csproj и изменим его следующим образом:
from: <TargetFramework>netcoreapp2.0</TargetFramework> to: <TargetFramework>netcoreapp2.1</TargetFramework>
Затем замените AspNetCore.All на AspNetCore.App и соответствующую версию, используйте dotnet --list-runtimes, чтобы увидеть текущую версию.
from: <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.7" /> to: <PackageReference Include="Microsoft.AspNetCore.App" Version="2.1.1" />
Имейте в виду, что атрибут Версия ограничивает использование предыдущих версий, другими словами, он означает минимально необходимую версию.
Удалите из элемента ‹DotNetCliToolRefence›: Microsoft.VisualStudio.Web.CodeGeneration.Tools и используйте вместо него глобально установленный инструментdotnet tool install -g dotnet-aspnet-codegenerator
Теперь давайте изменим файл program.cs в соответствии с рекомендациями официального руководства:
Аналогично следующим выделенным изменениям:
Для startup.cs вы можете при желании изменить его для GDPR, но это только для шаблонов .cshtml подробнее здесь, кроме того, что этот файл следует изменить следующим образом в этих разделах:
public void ConfigureServices(
...
// optional GDPR compliant temaplates
services.Configure<CookiePolicyOptions>(options =>
{
options.CheckConsentNeeded = context => true,
options.MinimumSameSitePolicy = Microsoft.AspNetCore.Http.SameSiteMode.None;
});
services.AddMvc() .SetCompatibilityVersion(Microsoft.AspNetCore.Mvc.CompatibilityVersion.Versiondotnet --list-runtimes1);
...
public void Configure(
...
else
{
app.UseExceptionHandler("/Home/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseCookiePolicy(); // optional GDPR
Это связано с кодом C #, теперь для фронтенда нам нужно также обновить наши модули узлов, особенно для использования WebPack 4 вместо более старых 2 в этом шаблоне, поскольку последняя версия работает быстрее. К счастью, осталось только обновить файл package.json и добавить еще один модуль.
После обновления версий для модулей npm в нашем файле package.json нам нужно оставить начальную загрузку, как и раньше (3.3.6), поскольку в версии 4 есть некоторые серьезные изменения, которые могут нарушить образец, но вы всегда можете обновить все файлы с помощью начальной загрузки до новой версии. , или используйте любую другую структуру CSS. Кроме того, нам также нужно добавить пакеты webpack-dev-middleware, uglifyjs-webpack-plugin и webpack-cli, а также заменить awesome-typescript-loader на ts-loader и использовать бета-версию extract-text-webpack-plugin.
Таким образом, файл package.json должен быть следующим, помните, что он основан только на текущем шаблоне VueJS, он может отличаться в более новых версиях.
{
"name": "vuets",
"private": true,
"version": "0.0.0",
"devDependencies": {
"@types/webpack-env": "^1.13.6",
"aspnet-webpack": "^3.0.0",
"bootstrap": "^3.3.6",
"css-loader": "^1.0.0",
"event-source-polyfill": "^0.0.12",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.3.1",
"style-loader": "^0.21.0",
"ts-loader": "^4.4.2",
"typescript": "^3.0.1",
"uglifyjs-webpack-plugin": "^1.2.7",
"url-loader": "^1.0.1",
"vue": "^2.5.17",
"vue-loader": "^15.2.6",
"vue-property-decorator": "^7.0.0",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.16.4",
"webpack-cli": "^3.1.0",
"webpack-hot-middleware": "^2.22.3",
"webpack-dev-middleware": "^3.1.3"
}
}
Вам может быть интересно, а где задачи npm в этом файле package.json? Хорошо, команды находятся в файле проектов vuets.csproj на случай, если вы не заметили.
При желании вы можете добавить эти задачи, это не повлияет на команду dotnet publish.
Обратите внимание, что команда dotnet run будет выполнять webpack в режиме разработки, и, если вы не видели, есть некоторые пакеты узлов, которые добавляют интеграцию HMR (горячая замена модуля).
Давайте установим пакеты узлов npm install и выполним dotnet run, но если вы войдете на свой сайт localhost, он может показать некоторые ошибки, связанные с ошибкой загрузки модуля или шаблона, это нормально, поскольку vue-loader с версии 13 и выше внесены некоторые изменения. При каждом require вызове наших компонентов нам нужно добавить .default, например, в наш boot.ts файл, маршруты должны быть изменены следующим образом:
import './css/site.css';
import 'bootstrap';
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: require('./components/home/home.vue.html').default },
{ path: '/counter', component: require('./components/counter/counter.vue.html').default },
{ path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html').default }
];
new Vue({
el: '#app-root',
router: new VueRouter({ mode: 'history', routes: routes }),
render: h => h(require('./components/app/app.vue.html').default)
})
Аналогично с другими файлами.
Также webpack.config.js и webpack.config.vendor.js тоже нуждаются в доработке.
Удалите awesome-typescript-loader и замените старый uglify на uglifyjs-webpack-plugin
Файл: webpack.config.js
...
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
const devMode = isDevBuild ? 'development':'production';
return [{
mode: devMode,
stats: { modules: false },
context: __dirname,
resolve: { extensions: [ '.js', '.ts' ] },
entry: { 'main': './ClientApp/boot.ts' },
module: {
rules: [
{ test: /\.vue\.html$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'ts-loader' } } },
{ test: /\.ts$/, include: /ClientApp/, use: [
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue\.html$/]
}
}
] },
...
plugins: [
new VueLoaderPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production')
}
}),
...
] : [
// Plugins that apply in production builds only
new UglifyJsPlugin(),
new ExtractTextPlugin('site.css')
])
}];
};
Файл webpack.config.vendor.js
...
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
const devMode = isDevBuild ? 'development':'production';
const extractCSS = new ExtractTextPlugin('vendor.css');
return [{
mode: devMode,
stats: { modules: false },
resolve: { extensions: [ '.js' ] },
entry: {
...
plugins: [
...
].concat(isDevBuild ? [] : [
new UglifyJsPlugin()
])
}];
};
Теперь снова запустите dotnet run, и, надеюсь, все будет работать нормально.
Наконец, мы превратим этот проект (на основе шаблона VueJS SPA) в другой шаблон, чтобы сэкономить время на будущих проектах VueJS.
Таким образом, для этого требуется только простой файл json внутри каталога .template.config в корневом каталоге этого проекта, поэтому создайте эту папку, а также файл template.json и отредактируйте следующим образом:
{
"$schema": "http://json.schemastore.org/template",
"author": "vhanla",
"classifications": [ "Web", "MVC", "SPA" ],
"name": "ASP.NET Core 2.1 with VueJS and TypeScript",
"identity": "vuejs.ts",
"groupIdentity": "aspnetcore-vuejs",
"shortName": "vuets",
"tags": {
"language": "C#",
"type": "project"
},
"sourceName": "vuets",
"preferedNameDirectory": "true",
"sources": {
"source": "./",
"target": "./",
"exclude": [
".template.config/**",
"node_modules/**"
]
}
}
Удалите все ненужные файлы и каталоги из этого нового каталога шаблонов, такие как node_modules, npm lock json или npm-shrinkwrap.json, а также каталоги bin и obj, а также каталоги .vscode .vs.
После того, как мы очистили наш каталог шаблонов и файлы, мы можем протестировать его, поэтому сначала мы устанавливаем его, используя следующую команду:
dotnet new --install <path to this template> он заменит существующий шаблон, поэтому он будет переустановлен, если мы внесем некоторые изменения в наш шаблон.
Чтобы удалить dotnet new -u <path, name or nuget id>
Итак, после установки этого нового шаблона просто запустите другой проект, как обычно:
dotnet new vuets -n test -o test
Это будет использовать наш новый шаблон для создания другого проекта VueJS с TypeScript ASP.NET SPA внутри каталога test.
Выполните следующие команды:
dotnet restore npm install dotnet run
Перейдите по адресу http: // localhost: 52570 и наслаждайтесь!
ЗАКЛЮЧЕНИЕ
Относительно легко создавать собственные шаблоны не только с нуля, но и повторно использовать уже созданные проекты, а также повторно использовать шаблоны, настраивать их и устанавливать как новые шаблоны.
Репозиторий шаблонов:
Вы можете ознакомиться с этим измененным шаблоном по адресу:
Https://github.com/vhanla/vuets
Источники:
