Add bootstrap and sweet-modal

cristijora · cristijora · commit f8bda0bf5d93 · 2017-08-13T01:29:05.000+03:00
diff --git a/VueMVC/.babelrc b/VueMVC/.babelrc
@@ -0,0 +1 @@
+{ "presets": ["es2015"] }
diff --git a/VueMVC/Scripts/app/about/index.js b/VueMVC/Scripts/app/about/index.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+
+new Vue({
+    el: '#app',
+    data(){
+        return {
+            vueMessage: 'Message from Vue'
+        }
+    }
+})
diff --git a/VueMVC/Scripts/app/home/index.js b/VueMVC/Scripts/app/home/index.js
@@ -1,10 +1,22 @@
 import Vue from 'vue'
+import FirstComponent from './FirstComponent.vue'
+import {SweetModal, SweetModalTab} from 'sweet-modal-vue'
 
 new Vue({
     el: '#app',
+    components: {
+        FirstComponent,
+        SweetModal,
+        SweetModalTab
+    },
     data(){
         return {
             vueMessage: 'Message from Vue'
         }
+    },
+    methods: {
+        toggleModal (){
+            this.$refs.modal.open();
+        }
     }
 })
diff --git a/VueMVC/Scripts/app/layout/index.js b/VueMVC/Scripts/app/layout/index.js
@@ -0,0 +1 @@
+import 'bootstrap/dist/css/bootstrap.css'
diff --git a/VueMVC/Views/Home/Index.cshtml b/VueMVC/Views/Home/Index.cshtml
@@ -3,9 +3,14 @@
   ViewBag.Title = "Home Page";
 }
 
-<div id="app">
-  <h3>@ViewBag.Message</h3>
-  {{ vueMessage }}
+<div id="app" class="row">
+  <div class="text-center">
+    <button class="btn btn-primary" v-on:click="toggleModal">Show modal!</button>
+    
+    <sweet-modal ref="modal">
+      <h3>@ViewBag.Message</h3>
+      </sweet-modal>
+  </div>
 </div>
 
 @section scripts {
diff --git a/VueMVC/Views/Shared/_Layout.cshtml b/VueMVC/Views/Shared/_Layout.cshtml
@@ -1,14 +1,15 @@
-﻿<!DOCTYPE html>
+﻿@using System.Web.Optimization
+<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>@ViewData["Title"] - WebApplication</title>
 </head>
 <body>
- Hello!
 @RenderBody()
 
+@Scripts.Render("~/Scripts/bundle/layout.js")
 @RenderSection("scripts", required: false)
 </body>
 </html>
diff --git a/VueMVC/VueMVC.csproj b/VueMVC/VueMVC.csproj
@@ -96,6 +96,7 @@
     <Compile Include="Properties\AssemblyInfo.cs" />
   </ItemGroup>
   <ItemGroup>
+    <Content Include=".babelrc" />
     <Content Include=".gitignore" />
     <Content Include="favicon.ico" />
     <Content Include="fonts\glyphicons-halflings-regular.eot" />
@@ -106,7 +107,12 @@
     <Content Include="Global.asax" />
     <Content Include="package.json" />
     <Content Include="packages.config" />
+    <Content Include="Scripts\app\about\index.js" />
+    <Content Include="Scripts\app\home\FirstComponent.vue" />
     <Content Include="Scripts\app\home\index.js" />
+    <Content Include="Scripts\app\layout\index.js" />
+    <Content Include="Scripts\bundle\about.js" />
+    <Content Include="Scripts\bundle\home.js" />
     <Content Include="Views\Home\Index.cshtml" />
     <Content Include="Views\Shared\Error.cshtml" />
     <Content Include="Views\Shared\_Layout.cshtml" />
@@ -118,7 +124,6 @@
   <ItemGroup>
     <Folder Include="Content" />
     <Folder Include="Models" />
-    <Folder Include="Scripts\bundle" />
   </ItemGroup>
   <ItemGroup>
     <None Include="packages.config" />
diff --git a/VueMVC/package.json b/VueMVC/package.json
@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "bootstrap": "^3.3.7",
+    "sweet-modal-vue": "^1.2.0",
     "vue": "^2.1.6"
   },
   "devDependencies": {
@@ -18,6 +19,8 @@
     "css-loader": "^0.23.1",
     "file-loader": "^0.8.5",
     "fs": "^0.0.1-security",
+    "node-sass": "^4.5.3",
+    "sass-loader": "^6.0.6",
     "style-loader": "^0.13.1",
     "vue-loader": "^9.8.0",
     "webpack": "^3.5.4",
diff --git a/VueMVC/webpack.config.js b/VueMVC/webpack.config.js
@@ -31,13 +31,23 @@ module.exports = {
         loaders: [
             {
                 test: /\.vue$/,
-                loader: 'vue-loader'
+                loader: 'vue-loader',
+                options: {
+                    loaders: {
+                        scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
+                        sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
+                    }
+                }
             },
             {
                 test: /\.js$/,
                 loader: 'babel-loader',
                 exclude: /node_modules/
             },
+            {
+                test: /\.scss$/,
+                loader: 'style-loader!css-loader!sass-loader'
+            },
             {
                 test: /\.css$/,
                 loader: 'style-loader!css-loader'

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+import 'bootstrap/dist/css/bootstrap.css'`