Ответ 1
Исключительно Основные
Самый простой способ начать работу. Я знаю, что с Vue в ASP.NET нужно просто включить Vue script в ваш проект. Вы можете использовать пакет vue.js Nuget, который добавит скрипты Vue в ваш каталог Scripts и просто включит либо версию разработки, либо мини-версию в вашем представлении MVC.
<script src="~/Scripts/vue.min.js"></script>
Затем в вашем представлении cshtml просто добавьте блок script.
<script>
new Vue({
el: "#app",
data: {
message: "Hello from Vue"
}
})
</script>
где #app относится к элементу вашего представления. Если вы хотите использовать компонент, просто добавьте его в блок script.
<script>
Vue.component("child", {
template:"<h1>I'm a child component!</h1>"
})
new Vue({
el: "#app",
data: {
message: "Hello from Vue"
}
})
</script>
и измените свой шаблон Vue.
<div id="app">
{{message}}
<child></child>
</div>
Если вы обнаружите, что строите много компонентов (что, скорее всего, будет), извлеките их в файл vue.components.js или что-то подобное, определите все ваши компоненты там и включите их в свои представления в дополнение к vue script.
Использование компонентов одиночного файла
Чтобы использовать отдельные компоненты файла, вам необходимо интегрировать процесс сборки node.js для отдельных файловых компонентов в процесс сборки ASP.NET MVC.
Установите node.js. После установки node.js установите webpack глобально.
npm install webpack -g
Добавьте package.json в свой проект. Вот что я использую.
{
"version": "1.0.0",
"name": "vue-example",
"private": true,
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-env": "^1.1.8",
"css-loader": "^0.26.1",
"style-loader": "^0.13.1",
"vue-loader": "^11.1.0",
"vue-template-compiler": "^2.1.10",
"webpack": "^2.2.0"
},
"dependencies": {
"vue": "^2.2.1"
}
}
Обычно я создаю папку в своем проекте для хранения сценариев Vue и файлов .vue, называемых Vue. Добавьте файл, который будет служить точкой входа для процесса сборки Vue. Мы можем назвать этот index.js(или все, что вы хотите).
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
Создать App.vue.
<template>
<div id="app">
{{msg}}
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
Добавьте в проект проект webpack.config.js. Вот что я использую.
module.exports = {
entry: "./Vue/index.js",
output: {
path: __dirname,
filename: "./Vue/bundle.js",
},
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue-loader' },
],
}
}
Этот config указывает index.js в качестве точки входа для webpack, чтобы выяснить, что включить в файл bundle.js, который будет скомпилирован и помещен в папку Vue.
Чтобы скомпилировать файл bundle.js всякий раз, когда проект строится, я изменяю файл проекта, чтобы включить следующее.
<Target Name="RunWebpack">
<Exec Command="npm install" />
<Exec Command="webpack" />
</Target>
<Target Name="BeforeBuild" DependsOnTargets="RunWebpack"></Target>
Это установит необходимые пакеты npm, а затем запустит webpack для сборки bundle.js. Это необходимо, если вы строите проект на сервере сборки.
Теперь вам просто нужно включить файл bundle.js в представление, на котором есть элемент с #app. Вам не нужно включать vue.js или vue.min.js. Это будет в комплекте.
Компилировать отдельные компоненты одного файла
Мы обнаружили, что были моменты, когда мы хотели использовать один компонент файла, но не хотели связывать его в один script. Для этого вам в основном нужно только изменить webpack.config.js.
const fs = require("fs");
const path = require("path");
// build an object that looks like
// {
// "filename": "./filename.vue"
// }
// to list the entry points for webpack to compile.
function buildEntry() {
const reducer = (entry, file) => { entry[file.split(".").shift()] = `./Vue/${file}`; return entry; };
return fs.readdirSync(path.join(__dirname, "Vue"))
.filter(file => file.endsWith(".vue"))
.reduce(reducer, {});
}
module.exports = {
entry: buildEntry(),
output: {
path: path.join(__dirname, "Vue"),
filename: "[name].js",
library: "[name]"
},
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue-loader' },
],
}
}
В этой конфигурации webpack будет создан файл script для каждого отдельного компонента файла. Затем вы можете просто включить этот script на странице, где вы используете технику "Исключительно базовый" выше, и использовать компонент в Vue, либо обнажая его глобально, либо как часть Vue. Например, если у меня есть Modal.vue, я бы включил Modal.js в представление ASP.NET MVC, а затем выставил его в Vue по
Vue.component("Modal", Modal);
или
new Vue({
...
components:{
"Modal": Modal
}
})
Webpack очень настраивается, поэтому вы можете использовать другой подход и создать единый пакет для каждой страницы.
Наконец, вы можете открыть командную строку во время разработки и запускать
webpack --watch
в вашем проекте, и ваши пакеты или отдельные компоненты будут созданы каждый раз, когда вы их сохраните.