Лучший подход при замене jQuery VueJS 2 в многостраничном существующем приложении .NET MVC

Ответ 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

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

Ответ 2

Я пытался настроить Vue с помощью ASP.NET MVC 5 (.NET 4.5, не Core!), Следуя сообщению, опубликованному выше @Bert, но я столкнулся с множеством проблем, поэтому нашел другой способ:

(ПРЕДУПРЕЖДЕНИЕ: если вы хотите использовать vue.js с собственными компонентами, вам нужно установить node.js - для npm, webpack - для сборки пакетов и vue-loader - для разбора *.vue файлов)

1. Установить node.js
2. Запустите командную строку Node.js и перейдите в папку проекта Visual Studio (где размещен файл *.csproj)
3. Тип: npm init -y и нажмите enter - он должен сгенерировать файл packages.json с зависимостями и базовыми настройками
4. Добавьте необходимые загрузчики для Vue (без них файлы *.vue не могут быть проанализированы в javascript в пакете): npm install --save-dev vue-loader vue-template-compiler

5. Добавьте webpack (глобально) и сохраните его в нашем файле package.json:

   a) npm install -g webpack

   b) npm install –-save-dev webpack

6. Наконец, добавьте Vue.js для проекта: npm install --save vue

Пока, мой package.json выглядит так:

{
  "name": "VueExample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vue-loader": "^14.2.1",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.2.0"
  },
  "dependencies": {
    "vue": "^2.5.16"
  }
}

7. Следующим шагом является настройка webpack - вернитесь к Visual Studio и добавьте в файл проекта webpack.config.js и вставьте в него следующий код:

module.exports = {
    entry: './Vue/index.js',
    output: {
        path: __dirname,
        filename: './Vue/dist/bundle.js'
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader'
            }
        ]
    }
};

Ответ 3

Я использовал много ответов, предоставленных @1_bug, чтобы настроить пакет Vue Single File Component с помощью webpack в моем проекте ASP.NET MVC 4.5.

Однако при попытке построить пакет, используя команду webpack, я получил следующую ошибку:

"vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config."

В этом я обнаружил, что последнее обновление vue-loader (v15) требует небольшого изменения файла webpack.config.js.

На веб-сайте vue-loader (https://vue-loader.vuejs.org/migrating.html) вам необходимо обратиться к плагину vue-loader в файле webpack.config.js, как показано ниже:

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}