VueJ 2 + ASP넷 MVC 5
저는 VueJs를 잘 몰라요.ASP 내에서 단일 페이지 애플리케이션을 구축해야 합니다.NET MVC5
저는 이 튜토리얼을 따르고 매우 잘 작동합니다.-> 튜토리얼
하지만 VueJS2 Routes를 테스트하기 위해 .vue 페이지를 만들 때 브라우저가 "Import"를 인식하지 못하고 Babel과 같은 트랜스필러를 사용해야 한다고 읽었습니다만, 이 문제를 해결하는 방법을 아는 사람이 있습니까?
App.VUE
<template>
<div id="app">
{{msg}}
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
App.JS
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
router,
render: h => h(App),
data: {
message: 'Hello Vue! in About Page'
}
});
_Layout.cshtml
<div class="container-fluid">
@RenderBody()
<div id="app">
{ { message } }
</div>
</div>
<script src="~/Scripts/essential/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/essential/bootstrap.min.js"></script>
<script src="~/Scripts/essential/inspinia.js"></script>
<script src="~/Scripts/essential/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js"></script>
<script src="~/Scripts/app.js"></script>
<script src="~/Scripts/plugin/metisMenu/jquery.metisMenu.js"></script>
<script src="~/Scripts/plugin/pace/pace.min.js"></script>
<script src="~/Scripts/plugin/slimscroll/jquery.slimscroll.min.js"></script>
감사합니다!!
Vue.js 개발에 오신 것을 환영합니다!네, 맞습니다. Import 스테이트먼트를 브라우저가 처리할 수 있는 JavaScript로 변환할 수 있는 것이 필요합니다.가장 인기 있는 도구는 웹 팩과 브라우저화입니다.
또한 브라우저가 .vue 파일을 픽업하기 전에 (vue-loader를 사용하여) 변환해야 하는 .vue 파일도 사용하고 있습니다.이 작업을 수행하는 방법을 설명하고 몇 가지 단계를 포함하는 웹 팩을 설정합니다.우선, 우리가 사용하고 있는 HTML은 다음과 같습니다.
<html>
<head>
</head>
<body>
<div class="container-fluid">
<div id="app">
{ { message } }
</div>
</div>
<script src="./dist.js"></script>
</body>
</html>
우리의 목표는 웹 팩을 사용하여 App.vue와 app.js를 dist.js로 번들/컴파일하는 것입니다.이를 위해 도움이 되는 webpack.config.js 파일은 다음과 같습니다.
module.exports = {
entry: './app.js',
output: {
filename: 'dist.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
}
이 구성에서는 "app.js에서 시작, 바꾸기importdist.disc 파일에 번들합니다.웹 팩에 .vue 파일이 나타나면 vue-loader 모듈을 사용하여 dist.js에 추가합니다.
이제 이를 실현하기 위한 도구/라이브러리를 설치해야 합니다.Node.js에 부속된npm을 사용하는 것을 권장합니다.npm이 설치되면 이 패키지를 넣을 수 있습니다.디렉토리내의 json 파일:
{
"name": "getting-started",
"version": "1.0.0",
"scripts": {
"build": "webpack"
},
"dependencies": {
"css-loader": "^0.28.7",
"vue": "^2.4.2",
"vue-loader": "^13.0.4",
"vue-resource": "^1.3.3",
"vue-router": "^2.7.0",
"vue-template-compiler": "^2.4.2",
"webpack": "^3.5.5"
}
}
그리고 다음 작업을 수행합니다.
- 달려.
npm install모든 패키지를 받을 수 있습니다. - 달려.
npm run-script build웹 팩을 통해 dist.filename 파일을 생성합니다.
이 질문의 예에서는 라우터가 app.js에 정의되어 있지 않지만, 다음은 수정된 파일입니다.
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
var router = new VueRouter();
new Vue({
el: '#app',
router,
render: h => h(App),
data: {
message: 'Hello Vue! in About Page'
}
});
바로 그거야!궁금한 점이 있으면 알려주세요.
언급URL : https://stackoverflow.com/questions/46040716/vuejs-2-asp-net-mvc-5
'programing' 카테고리의 다른 글
| 마주치는 C의 일반적인 정의되지 않은/지정되지 않은 동작은 무엇입니까? (0) | 2022.07.02 |
|---|---|
| 농담으로 vue 컴포넌트를 테스트하면 불합격입니다. (0) | 2022.07.02 |
| .jar 파일의 내용 표시 (0) | 2022.07.02 |
| 기본값 '/'을(를) 특정 경로 nuxt/netlify로 리디렉션합니다. (0) | 2022.07.02 |
| TDD와 Test First Development (또는 Test First Programming) 사이에 차이점이 있습니까? (0) | 2021.01.18 |