├── .gitignore ├── ExtendApp ├── .gitignore ├── Views │ ├── _ViewImports.cshtml │ ├── Shared │ │ ├── _VueJs.cshtml │ │ └── _Layout.cshtml │ └── ModelBinding │ │ ├── Managed.cshtml │ │ ├── MvcOnly.cshtml │ │ ├── Managed.cshtml.js │ │ ├── VueOnly.cshtml │ │ └── MvcAndVue.cshtml ├── wwwroot │ └── notmanaged │ │ ├── mvc_and_vue.js │ │ └── vue_only.js ├── package.json ├── appsettings.Development.json ├── appsettings.json ├── ExtendApp.csproj ├── Models │ ├── Song.cs │ └── Album.cs ├── ExtendApp.csproj.user ├── webpack.config.js ├── Properties │ └── launchSettings.json ├── Program.cs ├── Startup.cs └── Controllers │ └── ModelBindingController.cs ├── dotnet-api ├── .gitignore ├── appsettings.json ├── appsettings.Development.json ├── ProfileLogic │ ├── Profile.cs │ └── ProfileAdmin.cs ├── dotnet-api.csproj ├── Program.cs ├── Properties │ └── launchSettings.json ├── Startup.cs └── Controllers │ └── ProfileController.cs ├── .vs ├── slnx.sqlite ├── Vue │ ├── v16 │ │ └── .suo │ ├── DesignTimeBuild │ │ └── .dtbcache.v2 │ └── config │ │ └── applicationhost.config └── VSWorkspaceState.json ├── vue-npm-tutorial ├── src │ ├── styles │ │ └── main.styl │ ├── js │ │ ├── index.js │ │ └── about.js │ ├── about.html │ ├── components │ │ └── HelloWorld.vue │ └── index.html ├── dist │ └── pages │ │ ├── about.html │ │ └── index.html ├── package.json └── webpack.config.js ├── vue-cli-tutorial └── new-app │ ├── babel.config.js │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── assets │ │ └── logo.png │ ├── pages │ │ ├── 404.vue │ │ ├── Stats.vue │ │ ├── Login.vue │ │ ├── Profile.vue │ │ └── Home.vue │ ├── components │ │ ├── generic │ │ │ ├── index.js │ │ │ ├── SelectField.vue │ │ │ ├── SubmitButton.vue │ │ │ ├── Form.vue │ │ │ ├── TextAreaField.vue │ │ │ └── TextField.vue │ │ └── PopUp.vue │ ├── main.js │ ├── stores │ │ ├── store.js │ │ └── modules │ │ │ ├── popup.js │ │ │ └── profiles.js │ ├── App.vue │ └── router.js │ ├── .gitignore │ ├── README.md │ └── package.json ├── README.md ├── Vue.sln └── vue-core-tutorial └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | **/node_modules -------------------------------------------------------------------------------- /ExtendApp/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | bin/ 3 | obj/ 4 | wwwroot/dist -------------------------------------------------------------------------------- /dotnet-api/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | bin/ 3 | obj/ 4 | wwwroot/dist -------------------------------------------------------------------------------- /ExtendApp/Views/_ViewImports.cshtml: -------------------------------------------------------------------------------- 1 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers -------------------------------------------------------------------------------- /.vs/slnx.sqlite: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T0shik/raw-coding-vue-guide/HEAD/.vs/slnx.sqlite -------------------------------------------------------------------------------- /ExtendApp/Views/Shared/_VueJs.cshtml: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vue-npm-tutorial/src/styles/main.styl: -------------------------------------------------------------------------------- 1 | primary = blue 2 | 3 | span 4 | background green -------------------------------------------------------------------------------- /.vs/Vue/v16/.suo: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T0shik/raw-coding-vue-guide/HEAD/.vs/Vue/v16/.suo -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/app"] 3 | }; 4 | -------------------------------------------------------------------------------- /.vs/Vue/DesignTimeBuild/.dtbcache.v2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T0shik/raw-coding-vue-guide/HEAD/.vs/Vue/DesignTimeBuild/.dtbcache.v2 -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T0shik/raw-coding-vue-guide/HEAD/vue-cli-tutorial/new-app/public/favicon.ico -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T0shik/raw-coding-vue-guide/HEAD/vue-cli-tutorial/new-app/src/assets/logo.png -------------------------------------------------------------------------------- /ExtendApp/wwwroot/notmanaged/mvc_and_vue.js: -------------------------------------------------------------------------------- 1 | var mvc_and_vue_app = new Vue({ 2 | el: '#app', 3 | data: { 4 | rows: __state__ 5 | } 6 | }) -------------------------------------------------------------------------------- /dotnet-api/appsettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "LogLevel": { 4 | "Default": "Warning" 5 | } 6 | }, 7 | "AllowedHosts": "*" 8 | } 9 | -------------------------------------------------------------------------------- /.vs/VSWorkspaceState.json: -------------------------------------------------------------------------------- 1 | { 2 | "ExpandedNodes": [ 3 | "" 4 | ], 5 | "SelectedNode": "\\vue-cli-tutorial", 6 | "PreviewInSolutionExplorer": false 7 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # raw-coding-vue-guide 2 | Vue 2.* guide by Raw Coding 3 | 4 | Youtube playlist: https://www.youtube.com/watch?v=l4MQHTpNqeM&list=PLOeFnOV9YBa6en9lpCqbFgrSR4fN67ka3 5 | -------------------------------------------------------------------------------- /dotnet-api/appsettings.Development.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "LogLevel": { 4 | "Default": "Debug", 5 | "System": "Information", 6 | "Microsoft": "Information" 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /ExtendApp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "build": "webpack" 4 | }, 5 | "devDependencies": { 6 | "axios": "0.19.2", 7 | "webpack": "^4.43.0", 8 | "webpack-cli": "^3.3.11" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /ExtendApp/appsettings.Development.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "LogLevel": { 4 | "Default": "Information", 5 | "Microsoft": "Warning", 6 | "Microsoft.Hosting.Lifetime": "Information" 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /ExtendApp/appsettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "LogLevel": { 4 | "Default": "Information", 5 | "Microsoft": "Warning", 6 | "Microsoft.Hosting.Lifetime": "Information" 7 | } 8 | }, 9 | "AllowedHosts": "*" 10 | } 11 | -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/src/pages/404.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/src/pages/Stats.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 18 | -------------------------------------------------------------------------------- /ExtendApp/ExtendApp.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | netcoreapp3.1 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /ExtendApp/Models/Song.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Text; 5 | using System.Threading.Tasks; 6 | 7 | namespace ExtendApp.Models 8 | { 9 | public class Song 10 | { 11 | public string Title { get; set; } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /vue-npm-tutorial/src/js/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue/dist/vue' 2 | 3 | import HelloWorld from '../components/HelloWorld.vue' 4 | 5 | var app = new Vue({ 6 | el: '#app', 7 | data: { 8 | message: "Hello Index 2131" 9 | }, 10 | components: { 11 | HelloWorld 12 | } 13 | }) -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /ExtendApp/Models/Album.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Text; 5 | using System.Threading.Tasks; 6 | 7 | namespace ExtendApp.Models 8 | { 9 | public class Album 10 | { 11 | public string Title { get; set; } 12 | public List Songs { get; set; } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /vue-npm-tutorial/src/js/about.js: -------------------------------------------------------------------------------- 1 | // import Vue from 'vue/dist/vue' 2 | 3 | // var app = new Vue({ 4 | // el: '#app', 5 | // data: { 6 | // message: "Hello About" 7 | // } 8 | // }) 9 | 10 | import Vue from "vue"; 11 | import HelloWorld from "../components/HelloWorld.vue"; 12 | 13 | 14 | new Vue({ 15 | render: h => h(HelloWorld) 16 | }).$mount('#app') -------------------------------------------------------------------------------- /dotnet-api/ProfileLogic/Profile.cs: -------------------------------------------------------------------------------- 1 | 2 | namespace dotnet_api.ProfileLogic 3 | { 4 | public class Profile 5 | { 6 | public int Id { get; set; } 7 | public string FirstName { get; set; } 8 | public string LastName { get; set; } 9 | public string Gender { get; set; } 10 | public string Bio { get; set; } 11 | public int Age { get; set; } 12 | } 13 | } -------------------------------------------------------------------------------- /vue-npm-tutorial/src/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | Index 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /ExtendApp/ExtendApp.csproj.user: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ProjectDebugger 5 | 6 | 7 | ExtendApp 8 | 9 | -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/src/components/generic/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Form from "./Form"; 3 | import TextField from "./TextField"; 4 | import SelectField from "./SelectField"; 5 | import TextAreaField from "./TextAreaField"; 6 | import SubmitButton from "./SubmitButton"; 7 | 8 | 9 | [ 10 | Form, 11 | TextField, 12 | SelectField, 13 | TextAreaField, 14 | SubmitButton 15 | ].forEach(c => { 16 | Vue.component(c.name, c); 17 | }) -------------------------------------------------------------------------------- /vue-npm-tutorial/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /ExtendApp/Views/ModelBinding/Managed.cshtml: -------------------------------------------------------------------------------- 1 | @{ 2 | Layout = "_Layout"; 3 | } 4 | 5 |
6 |

{{test}}

7 |
8 | 9 | 10 |
11 | 12 |
13 | 14 |
15 | 16 |
-------------------------------------------------------------------------------- /vue-npm-tutorial/dist/pages/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | Index 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/README.md: -------------------------------------------------------------------------------- 1 | # new-app 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /dotnet-api/dotnet-api.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | netcoreapp2.2 5 | InProcess 6 | dotnet_api 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /vue-npm-tutorial/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | About 13 | 14 |
15 | {{message}} 16 |
17 | 18 |
19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /ExtendApp/webpack.config.js: -------------------------------------------------------------------------------- 1 | const glob = require('glob'); 2 | const path = require('path'); 3 | 4 | var jScripts = glob.sync('./Views/**/*.js'); 5 | var entry = {} 6 | 7 | jScripts.forEach(path => { 8 | var parts = path.split('/') 9 | 10 | var controllerName = parts[2]; 11 | var viewName = parts[3].replace(".cshtml", ""); 12 | 13 | entry[controllerName + "_" + viewName] = path; 14 | }) 15 | 16 | console.log(entry) 17 | 18 | module.exports = { 19 | entry, 20 | output: { 21 | filename: '[name]', 22 | path: path.resolve(__dirname, 'wwwroot/dist/js') 23 | }, 24 | } -------------------------------------------------------------------------------- /vue-npm-tutorial/dist/pages/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | About 13 | 14 |
15 | {{message}} 16 |
17 | 18 |
19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | new-app 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /ExtendApp/wwwroot/notmanaged/vue_only.js: -------------------------------------------------------------------------------- 1 | var mvc_and_vue_app = new Vue({ 2 | el: '#app', 3 | data: { 4 | model: { 5 | title: "", 6 | songs: [] 7 | } 8 | }, 9 | created() { 10 | // handle some loading display 11 | axios.get("/ModelBinding/GetVueOnlyData") 12 | .then(res => { 13 | this.model = res.data; 14 | }) 15 | }, 16 | methods: { 17 | post() { 18 | axios.post("/ModelBinding/PostVueOnlyData", this.model) 19 | .then(res => { 20 | //do something here 21 | }) 22 | } 23 | } 24 | }) -------------------------------------------------------------------------------- /ExtendApp/Views/Shared/_Layout.cshtml: -------------------------------------------------------------------------------- 1 | @{ 2 | var controllerName = ViewContext.RouteData.Values["controller"].ToString(); 3 | var actionName = ViewContext.RouteData.Values["action"].ToString(); 4 | var jsFile = string.Concat("/dist/js/", controllerName, "_", actionName, ".js"); 5 | } 6 | 7 | 8 | 9 | 10 | @ViewBag.Title 11 | 12 | 13 |
14 | @RenderBody() 15 |
16 | 17 | 18 | @{ 19 | await Html.RenderPartialAsync("_VueJs"); 20 | } 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | import router from './router' 4 | import axios from 'axios' 5 | import { store } from './stores/store' 6 | import "./components/generic/index"; 7 | 8 | Vue.config.productionTip = false; 9 | 10 | const api = axios.create({ 11 | baseURL: "http://localhost:3000/" 12 | }) 13 | 14 | const axiosPlugn = { 15 | install(Vue) { 16 | Vue.prototype.$api = api; 17 | } 18 | } 19 | 20 | Vue.prototype.$eventBus = new Vue(); 21 | 22 | Vue.use(axiosPlugn); 23 | 24 | var app = new Vue({ 25 | router, 26 | store, 27 | render: h => h(App) 28 | }); 29 | 30 | console.log(app); 31 | app.$mount("#app") -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/src/stores/store.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue" 2 | import Vuex from "vuex" 3 | 4 | import profiles from './modules/profiles' 5 | import popup from './modules/popup' 6 | 7 | Vue.use(Vuex); 8 | 9 | export const store = new Vuex.Store({ 10 | state: { 11 | appReady: false 12 | }, 13 | mutations: { 14 | READY_APP(state) { 15 | state.appReady = true; 16 | } 17 | }, 18 | actions: { 19 | INIT_APP({ commit }) { 20 | setTimeout(function () { 21 | commit("READY_APP"); 22 | }, 3000); 23 | } 24 | }, 25 | modules: { 26 | profiles, 27 | popup 28 | } 29 | }) -------------------------------------------------------------------------------- /ExtendApp/Views/ModelBinding/MvcOnly.cshtml: -------------------------------------------------------------------------------- 1 | @model ExtendApp.Models.Album 2 | 3 | @* 4 | Safe space for simple forms, complexity occurs when js/jquery need to be involved 5 | *@ 6 | 7 |

Mvc Only Example

8 | 9 |
10 | 11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 | 21 | 22 |
23 | 24 | -------------------------------------------------------------------------------- /ExtendApp/Views/ModelBinding/Managed.cshtml.js: -------------------------------------------------------------------------------- 1 | const axios = require('axios') 2 | 3 | var managed_app = new Vue({ 4 | el: '#app', 5 | data: { 6 | test: "Hello World 22", 7 | model: { 8 | title: "", 9 | songs: [] 10 | } 11 | }, 12 | created() { 13 | // handle some loading display 14 | axios.get("/ModelBinding/GetVueOnlyData") 15 | .then(res => { 16 | this.model = res.data; 17 | }) 18 | }, 19 | methods: { 20 | post() { 21 | axios.post("/ModelBinding/PostVueOnlyData", this.model) 22 | .then(res => { 23 | //do something here 24 | }) 25 | } 26 | } 27 | }) -------------------------------------------------------------------------------- /dotnet-api/Program.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.IO; 4 | using System.Linq; 5 | using System.Threading.Tasks; 6 | using Microsoft.AspNetCore; 7 | using Microsoft.AspNetCore.Hosting; 8 | using Microsoft.Extensions.Configuration; 9 | using Microsoft.Extensions.Logging; 10 | 11 | namespace dotnet_api 12 | { 13 | public class Program 14 | { 15 | public static void Main(string[] args) 16 | { 17 | CreateWebHostBuilder(args).Build().Run(); 18 | } 19 | 20 | public static IWebHostBuilder CreateWebHostBuilder(string[] args) => 21 | WebHost.CreateDefaultBuilder(args) 22 | .UseUrls("http://localhost:3000") 23 | .UseStartup(); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /dotnet-api/Properties/launchSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "iisSettings": { 3 | "windowsAuthentication": false, 4 | "anonymousAuthentication": true, 5 | "iisExpress": { 6 | "applicationUrl": "http://localhost:16173", 7 | "sslPort": 44391 8 | } 9 | }, 10 | "profiles": { 11 | "IIS Express": { 12 | "commandName": "IISExpress", 13 | "launchBrowser": true, 14 | "environmentVariables": { 15 | "ASPNETCORE_ENVIRONMENT": "Development" 16 | } 17 | }, 18 | "dotnet_api": { 19 | "commandName": "Project", 20 | "launchBrowser": true, 21 | "applicationUrl": "https://localhost:5001;http://localhost:5000", 22 | "environmentVariables": { 23 | "ASPNETCORE_ENVIRONMENT": "Development" 24 | } 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /ExtendApp/Properties/launchSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "iisSettings": { 3 | "windowsAuthentication": false, 4 | "anonymousAuthentication": true, 5 | "iisExpress": { 6 | "applicationUrl": "http://localhost:60799", 7 | "sslPort": 44323 8 | } 9 | }, 10 | "profiles": { 11 | "IIS Express": { 12 | "commandName": "IISExpress", 13 | "launchBrowser": true, 14 | "environmentVariables": { 15 | "ASPNETCORE_ENVIRONMENT": "Development" 16 | } 17 | }, 18 | "ExtendApp": { 19 | "commandName": "Project", 20 | "launchBrowser": true, 21 | "applicationUrl": "https://localhost:5001;http://localhost:5000", 22 | "environmentVariables": { 23 | "ASPNETCORE_ENVIRONMENT": "Development" 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /ExtendApp/Program.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Threading.Tasks; 5 | using Microsoft.AspNetCore.Hosting; 6 | using Microsoft.Extensions.Configuration; 7 | using Microsoft.Extensions.Hosting; 8 | using Microsoft.Extensions.Logging; 9 | 10 | namespace ExtendApp 11 | { 12 | public class Program 13 | { 14 | public static void Main(string[] args) 15 | { 16 | CreateHostBuilder(args).Build().Run(); 17 | } 18 | 19 | public static IHostBuilder CreateHostBuilder(string[] args) => 20 | Host.CreateDefaultBuilder(args) 21 | .ConfigureWebHostDefaults(webBuilder => 22 | { 23 | webBuilder.UseStartup(); 24 | }); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /vue-npm-tutorial/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-npm-tutorial", 3 | "version": "1.0.0", 4 | "description": "Vue with NPM tutorial", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Hello World\" && exit 0", 8 | "build": "webpack --mode development", 9 | "build:dev": "webpack --mode development && webpack-dev-server" 10 | }, 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "vue": "^2.6.9" 15 | }, 16 | "devDependencies": { 17 | "clean-webpack-plugin": "^2.0.1", 18 | "css-loader": "^2.1.1", 19 | "html-webpack-plugin": "^3.2.0", 20 | "stylus": "^0.54.5", 21 | "stylus-loader": "^3.0.2", 22 | "vue-loader": "^15.7.0", 23 | "vue-style-loader": "^4.1.2", 24 | "vue-template-compiler": "^2.6.9", 25 | "webpack": "^4.29.6", 26 | "webpack-cli": "^3.2.3", 27 | "webpack-dev-server": "^3.2.1" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/src/components/generic/SelectField.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 36 | 37 | 39 | -------------------------------------------------------------------------------- /ExtendApp/Views/ModelBinding/VueOnly.cshtml: -------------------------------------------------------------------------------- 1 | 2 |

Vue Only Example

3 | 4 | @* 5 | Safe space for crafting complex forms, however more manual ui handling has to be done here. 6 | *@ 7 | 8 |
9 |
10 | 11 | 12 |
13 | 14 |
15 | 16 |
17 | 18 |
19 | 20 | @{ 21 | @* if using render script section put this in there too *@ 22 | await Html.RenderPartialAsync("_VueJs"); 23 | } 24 | 25 | @* http client or use the fetch api *@ 26 | 27 | 28 | @* can use render script section here *@ 29 | -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/src/components/generic/SubmitButton.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | 20 | 46 | -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/src/pages/Login.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 39 | 40 | 42 | -------------------------------------------------------------------------------- /ExtendApp/Startup.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Threading.Tasks; 5 | using Microsoft.AspNetCore.Builder; 6 | using Microsoft.AspNetCore.Hosting; 7 | using Microsoft.AspNetCore.Http; 8 | using Microsoft.Extensions.DependencyInjection; 9 | using Microsoft.Extensions.Hosting; 10 | 11 | namespace ExtendApp 12 | { 13 | public class Startup 14 | { 15 | public void ConfigureServices(IServiceCollection services) 16 | { 17 | services.AddControllersWithViews(); 18 | } 19 | 20 | public void Configure(IApplicationBuilder app, IWebHostEnvironment env) 21 | { 22 | if (env.IsDevelopment()) 23 | { 24 | app.UseDeveloperExceptionPage(); 25 | } 26 | 27 | app.UseStaticFiles(); 28 | 29 | app.UseRouting(); 30 | 31 | app.UseEndpoints(endpoints => 32 | { 33 | endpoints.MapDefaultControllerRoute(); 34 | }); 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/src/pages/Profile.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 42 | 43 | 45 | -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/src/components/PopUp.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 28 | 29 | 55 | -------------------------------------------------------------------------------- /dotnet-api/Startup.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Threading.Tasks; 5 | using dotnet_api.ProfileLogic; 6 | using Microsoft.AspNetCore.Builder; 7 | using Microsoft.AspNetCore.Hosting; 8 | using Microsoft.AspNetCore.Http; 9 | using Microsoft.Extensions.DependencyInjection; 10 | 11 | namespace dotnet_api 12 | { 13 | public class Startup 14 | { 15 | public void ConfigureServices(IServiceCollection services) 16 | { 17 | services.AddMvc(); 18 | services.AddSingleton(); 19 | } 20 | 21 | public void Configure(IApplicationBuilder app, IHostingEnvironment env) 22 | { 23 | if (env.IsDevelopment()) 24 | { 25 | app.UseDeveloperExceptionPage(); 26 | } 27 | 28 | app.UseCors(options => 29 | { 30 | options.AllowAnyOrigin() 31 | .AllowAnyMethod() 32 | .AllowAnyHeader() 33 | .AllowCredentials(); 34 | }); 35 | 36 | app.UseMvcWithDefaultRoute(); 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /Vue.sln: -------------------------------------------------------------------------------- 1 | 2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio Version 16 4 | VisualStudioVersion = 16.0.30011.22 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ExtendApp", "ExtendApp\ExtendApp.csproj", "{9A09C7E7-EAD0-436D-84BC-630B00F8C1E7}" 7 | EndProject 8 | Global 9 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 10 | Debug|Any CPU = Debug|Any CPU 11 | Release|Any CPU = Release|Any CPU 12 | EndGlobalSection 13 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 14 | {9A09C7E7-EAD0-436D-84BC-630B00F8C1E7}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 15 | {9A09C7E7-EAD0-436D-84BC-630B00F8C1E7}.Debug|Any CPU.Build.0 = Debug|Any CPU 16 | {9A09C7E7-EAD0-436D-84BC-630B00F8C1E7}.Release|Any CPU.ActiveCfg = Release|Any CPU 17 | {9A09C7E7-EAD0-436D-84BC-630B00F8C1E7}.Release|Any CPU.Build.0 = Release|Any CPU 18 | EndGlobalSection 19 | GlobalSection(SolutionProperties) = preSolution 20 | HideSolutionNode = FALSE 21 | EndGlobalSection 22 | GlobalSection(ExtensibilityGlobals) = postSolution 23 | SolutionGuid = {12CB9E1F-B333-44D5-B976-8F8477A58F33} 24 | EndGlobalSection 25 | EndGlobal 26 | -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "new-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "axios": "^0.18.0", 11 | "core-js": "^2.6.5", 12 | "vue": "^2.6.6", 13 | "vue-router": "^3.0.6", 14 | "vuex": "^3.1.1" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-babel": "^3.5.0", 18 | "@vue/cli-plugin-eslint": "^3.5.0", 19 | "@vue/cli-service": "^3.5.0", 20 | "@vue/eslint-config-prettier": "^4.0.1", 21 | "babel-eslint": "^10.0.1", 22 | "eslint": "^5.8.0", 23 | "eslint-plugin-vue": "^5.0.0", 24 | "stylus": "^0.54.5", 25 | "stylus-loader": "^3.0.2", 26 | "vue-template-compiler": "^2.5.21" 27 | }, 28 | "eslintConfig": { 29 | "root": true, 30 | "env": { 31 | "node": true 32 | }, 33 | "extends": [ 34 | "plugin:vue/essential" 35 | ], 36 | "rules": {}, 37 | "parserOptions": { 38 | "parser": "babel-eslint" 39 | } 40 | }, 41 | "postcss": { 42 | "plugins": { 43 | "autoprefixer": {} 44 | } 45 | }, 46 | "browserslist": [ 47 | "> 1%", 48 | "last 2 versions", 49 | "not ie <= 8" 50 | ] 51 | } 52 | -------------------------------------------------------------------------------- /dotnet-api/ProfileLogic/ProfileAdmin.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.Generic; 2 | using System.Linq; 3 | 4 | namespace dotnet_api.ProfileLogic 5 | { 6 | public class ProfileAdmin 7 | { 8 | private List Profiles { get; set; } 9 | private int Id { get; set; } 10 | 11 | public ProfileAdmin() 12 | { 13 | Profiles = new List(); 14 | Id = 1; 15 | } 16 | public List GetProfiles() => 17 | Profiles; 18 | 19 | public Profile GetProfile(int id) => 20 | Profiles.FirstOrDefault(p => p.Id == id); 21 | 22 | public Profile GetProfile(string name) => 23 | Profiles.FirstOrDefault(p => p.FirstName == name); 24 | 25 | public void AddProfile(Profile profile){ 26 | profile.Id = Id++; 27 | Profiles.Add(profile); 28 | } 29 | 30 | public void UpdateProfile(Profile profile) 31 | { 32 | var currentProfile = GetProfile(profile.Id); 33 | 34 | currentProfile.FirstName = profile.FirstName; 35 | currentProfile.LastName = profile.LastName; 36 | currentProfile.Age = profile.Age; 37 | } 38 | 39 | public void DeleteProfile(int id) => 40 | Profiles.RemoveAll(p => p.Id == id); 41 | 42 | } 43 | } -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/src/stores/modules/popup.js: -------------------------------------------------------------------------------- 1 | export default { 2 | namespaced: true, 3 | state: { 4 | message: "", 5 | display: false, 6 | timeout: null 7 | }, 8 | mutations: { 9 | SET_MESSAGE(state, message) { 10 | state.message = message 11 | state.display = true; 12 | }, 13 | HIDE_MESSAGE(state) { 14 | state.display = false; 15 | }, 16 | SET_TIMEOUT(state, timeout) { 17 | state.timeout = timeout; 18 | }, 19 | CLEAR_TIMEOUT(state) { 20 | clearTimeout(state.timeout); 21 | state.timeout = null; 22 | } 23 | }, 24 | actions: { 25 | DISPLAY_POPUP({ commit, state, dispatch }, message) { 26 | if (state.timeout !== null) { 27 | commit('CLEAR_TIMEOUT') 28 | commit('HIDE_MESSAGE') 29 | setTimeout(function () { 30 | dispatch('DISPLAY_POPUP', message) 31 | }, 100); 32 | } else { 33 | commit('SET_MESSAGE', message) 34 | 35 | let timeout = setTimeout(function () { 36 | commit('HIDE_MESSAGE') 37 | }, 3000); 38 | 39 | commit('SET_TIMEOUT', timeout); 40 | } 41 | } 42 | } 43 | } -------------------------------------------------------------------------------- /ExtendApp/Views/ModelBinding/MvcAndVue.cshtml: -------------------------------------------------------------------------------- 1 | @model ExtendApp.Models.Album 2 | @* 3 | Main thing to keep in mind here: 4 | 1. The server will render the page 5 | 2. Vue will load the div#app section 6 | 3. Vue will re-render the section it has loaded 7 | 4. State can be lost where vue touches the element tree 8 | - it's safe to assume that it will be lost, so code around it 9 | *@ 10 | 11 |

Mvc And Vue Example

12 | 13 |
14 |
15 |

16 | 17 | 18 |

19 | 20 |
21 | 22 |
23 | 24 | 25 |
26 |
27 | 28 | 29 | 30 | @* How to transfer model state? *@ 31 | @{ 32 | var json_state = Model.Songs.Select((x, i) => new { index = i, title = x.Title }); 33 | } 34 | 37 | 38 | 39 | 40 | @{ 41 | @*if using render script section put this in there too*@ 42 | await Html.RenderPartialAsync("_VueJs"); 43 | } 44 | 45 | 46 | 47 | @*can use render script section here*@ 48 | -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/src/stores/modules/profiles.js: -------------------------------------------------------------------------------- 1 | //state 2 | //this is the state of the module 3 | //getters 4 | //return some particular data from the store 5 | //mutations 6 | //write data to the store or mutate state 7 | //actions 8 | //any functionality before mutating 9 | 10 | export default { 11 | namespaced: true, 12 | state: { 13 | profiles: [], 14 | creatingProfile: false 15 | }, 16 | getters: { 17 | GET_PROFILE: state => name => 18 | state.profiles.filter(profile => profile.firstName == name)[0] 19 | }, 20 | mutations: { 21 | SET_PROFILES(state, profiles) { 22 | state.profiles = profiles; 23 | }, 24 | START_CREATING_PROFILE(state) { 25 | state.creatingProfile = true; 26 | }, 27 | ADD_PROFILE(state, profile) { 28 | state.profiles.push(profile); 29 | state.creatingProfile = false; 30 | } 31 | }, 32 | actions: { 33 | LOAD_PROFILES({ commit }, api) { 34 | api.get("Profile").then(res => { 35 | commit("SET_PROFILES", res.data); 36 | }); 37 | }, 38 | CREATE_PROFILE({ commit, dispatch }, payload) { 39 | let { api, form } = payload; 40 | commit('START_CREATING_PROFILE'); 41 | 42 | api.post("Profile", form).then(res => { 43 | commit("ADD_PROFILE", res.data); 44 | dispatch("popup/DISPLAY_POPUP", "Profile Created", { root: true }) 45 | }); 46 | } 47 | } 48 | } -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/src/components/generic/Form.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 62 | 63 | 69 | -------------------------------------------------------------------------------- /dotnet-api/Controllers/ProfileController.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.Generic; 2 | using System.Threading; 3 | using dotnet_api.ProfileLogic; 4 | using Microsoft.AspNetCore.Mvc; 5 | 6 | namespace dotnet_api.Controllers 7 | { 8 | [Route("[controller]")] 9 | [ApiController] 10 | public class ProfileController : Controller 11 | { 12 | private ProfileAdmin _profileAdmin; 13 | public ProfileController(ProfileAdmin profileAdmin) 14 | { 15 | _profileAdmin = profileAdmin; 16 | } 17 | 18 | [HttpGet] 19 | public List GetProfiles() 20 | { 21 | return _profileAdmin.GetProfiles(); 22 | } 23 | 24 | [HttpGet("{name}")] 25 | public IActionResult GetProfile(string name) 26 | { 27 | var profile = _profileAdmin.GetProfile(name); 28 | if (profile == null) 29 | return NoContent(); 30 | else 31 | return Ok(profile); 32 | } 33 | 34 | [HttpPost] 35 | public Profile CreateProfile(Profile profile) 36 | { 37 | _profileAdmin.AddProfile(profile); 38 | return profile; 39 | } 40 | 41 | [HttpPut] 42 | public IActionResult UpdateProfile(Profile profile) 43 | { 44 | _profileAdmin.UpdateProfile(profile); 45 | return Ok(); 46 | } 47 | 48 | [HttpDelete("{id}")] 49 | public IActionResult DeleteProfile(int id) 50 | { 51 | _profileAdmin.DeleteProfile(id); 52 | return Ok(); 53 | } 54 | } 55 | } -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/src/App.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 57 | 58 | 78 | -------------------------------------------------------------------------------- /ExtendApp/Controllers/ModelBindingController.cs: -------------------------------------------------------------------------------- 1 | using ExtendApp.Models; 2 | using Microsoft.AspNetCore.Mvc; 3 | using System; 4 | using System.Collections.Generic; 5 | using System.Linq; 6 | using System.Reflection; 7 | using System.Text; 8 | using System.Threading.Tasks; 9 | 10 | namespace ExtendApp.Controllers 11 | { 12 | public class ModelBindingController : Controller 13 | { 14 | public Album TestAlbum => new Album 15 | { 16 | Title = "Hi", 17 | Songs = new List 18 | { 19 | new Song { Title = "Really good song" }, 20 | new Song { Title = "We got more of those" }, 21 | new Song { Title = "This one is good too" } 22 | } 23 | }; 24 | 25 | public IActionResult MvcOnly() 26 | { 27 | return View(TestAlbum); 28 | } 29 | 30 | public IActionResult MvcAndVue() 31 | { 32 | return View(TestAlbum); 33 | } 34 | 35 | [HttpPost] 36 | public IActionResult CreateAlbum(Album album) 37 | { 38 | return View(); 39 | } 40 | 41 | #region Vue Only 42 | public IActionResult VueOnly() 43 | { 44 | return View(); 45 | } 46 | 47 | public IActionResult GetVueOnlyData() 48 | { 49 | return Ok(TestAlbum); 50 | } 51 | 52 | [HttpPost] 53 | public IActionResult PostVueOnlyData([FromBody] Album album) 54 | { 55 | return View(); 56 | } 57 | #endregion 58 | 59 | public IActionResult Managed() 60 | { 61 | return View(); 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /vue-npm-tutorial/webpack.config.js: -------------------------------------------------------------------------------- 1 | const glob = require('glob') 2 | const path = require('path') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const CleanWebpackPlugin = require('clean-webpack-plugin') 5 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 6 | 7 | var htmlPages = glob.sync('./src/*.html') 8 | .map(path => { 9 | //path example './src/about.html' 10 | 11 | var chunk = path.replace('.html', '').replace('./src/', '') 12 | 13 | return new HtmlWebpackPlugin({ 14 | template: path, 15 | filename: `pages/${chunk}.html`, 16 | // chunks: [chunk, 'vendor'], 17 | chunks: [chunk], 18 | inject: true 19 | }) 20 | }) 21 | 22 | module.exports = { 23 | // watch: true, 24 | entry: { 25 | index: './src/js/index.js', 26 | about: './src/js/about.js' 27 | }, 28 | output: { 29 | filename: 'js/[name]/[name].js', 30 | chunkFilename: 'js/[name].js', 31 | path: path.resolve(__dirname, 'dist') 32 | }, 33 | devServer: { 34 | contentBase: path.resolve(__dirname, 'dist', 'pages') 35 | }, 36 | // optimization: { 37 | // splitChunks: { 38 | // chunks: 'all', 39 | // name: 'vendor' 40 | // } 41 | // }, 42 | module: { 43 | rules: [ 44 | { 45 | test: /\.vue$/, 46 | loader: 'vue-loader' 47 | }, 48 | { 49 | test: /\.styl(us)?$/, 50 | loader: [ 51 | 'vue-style-loader', 52 | 'css-loader', 53 | 'stylus-loader' 54 | ] 55 | } 56 | ], 57 | }, 58 | plugins: [ 59 | // new CleanWebpackPlugin(), 60 | new VueLoaderPlugin() 61 | ].concat(htmlPages) 62 | } -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/src/components/generic/TextAreaField.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 67 | 68 | 87 | -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import { store } from './stores/store' 4 | 5 | import Home from './pages/Home' 6 | import Login from './pages/Login' 7 | import Profile from './pages/Profile' 8 | import Stats from './pages/Stats' 9 | import Error404 from './pages/404' 10 | 11 | Vue.use(Router) 12 | 13 | const router = new Router({ 14 | mode: 'history', 15 | routes: [ 16 | { 17 | path: '/', 18 | name: 'home', 19 | component: Home 20 | }, 21 | { 22 | path: '/login', 23 | name: 'login', 24 | component: Login 25 | }, 26 | { 27 | path: '/profile/:name?', 28 | name: 'profile', 29 | component: Profile, 30 | beforeEnter(to, from, next) { 31 | console.log("fetching some data") // get the profile info 32 | console.log("updating state") // clean up some background tasks 33 | next(); 34 | }, 35 | meta: { auth: true }, 36 | children: [ 37 | { 38 | path: 'stats', 39 | component: Stats 40 | } 41 | ] 42 | }, 43 | { 44 | path: '*', 45 | name: '404', 46 | component: Error404 47 | } 48 | ] 49 | }) 50 | 51 | router.beforeEach((to, from, next) => { 52 | function proceed() { 53 | if (to.matched.some(record => record.meta.auth)) { 54 | let authenticated = true; 55 | //check if authenticated 56 | if (authenticated) { 57 | console.log("User authenticated") 58 | next(); 59 | } else { 60 | //redirect to login 61 | } 62 | } 63 | next(); 64 | } 65 | if (!store.state.appReady) { 66 | store.watch( 67 | (state) => state.appReady, 68 | (ready) => { 69 | if (ready) { 70 | proceed(); 71 | } 72 | } 73 | ) 74 | } else { 75 | proceed(); 76 | } 77 | }) 78 | 79 | export default router; -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/src/components/generic/TextField.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 70 | 71 | 101 | -------------------------------------------------------------------------------- /vue-cli-tutorial/new-app/src/pages/Home.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 98 | 99 | 101 | -------------------------------------------------------------------------------- /vue-core-tutorial/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | {{message}} 29 | 30 |
31 | 32 | 33 | 34 |
35 |

36 | {{filterList}} 37 |

38 | 39 |

40 | 41 | 42 | 43 | {{user.name}} 44 | 45 |

46 |

47 | 48 | 49 | 50 |

51 | 52 |
53 | 54 | 55 | 56 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /.vs/Vue/config/applicationhost.config: -------------------------------------------------------------------------------- 1 | 2 | 20 | 21 | 48 | 49 | 50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | 59 | 60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 | 79 |
80 |
81 | 82 |
83 |
84 |
85 |
86 |
87 |
88 | 89 |
90 |
91 |
92 |
93 |
94 | 95 |
96 |
97 |
98 | 99 |
100 |
101 | 102 |
103 |
104 | 105 |
106 |
107 |
108 | 109 | 110 |
111 |
112 |
113 |
114 |
115 |
116 | 117 |
118 |
119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | 616 | 617 | 618 | 619 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | 644 | 645 | 646 | 647 | 648 | 649 | 650 | 651 | 652 | 653 | 654 | 655 | 656 | 657 | 658 | 659 | 660 | 661 | 662 | 663 | 664 | 665 | 666 | 667 | 668 | 669 | 670 | 671 | 672 | 673 | 674 | 675 | 676 | 677 | 678 | 679 | 680 | 681 | 682 | 683 | 684 | 685 | 686 | 687 | 688 | 689 | 690 | 691 | 692 | 693 | 694 | 695 | 696 | 697 | 698 | 699 | 700 | 701 | 702 | 703 | 704 | 705 | 706 | 707 | 708 | 709 | 710 | 711 | 712 | 713 | 714 | 715 | 716 | 717 | 718 | 719 | 720 | 721 | 722 | 723 | 724 | 725 | 726 | 727 | 728 | 729 | 730 | 731 | 732 | 733 | 734 | 735 | 736 | 737 | 738 | 739 | 740 | 741 | 742 | 743 | 744 | 745 | 746 | 747 | 748 | 749 | 750 | 751 | 752 | 753 | 754 | 755 | 756 | 757 | 758 | 759 | 760 | 761 | 762 | 763 | 764 | 765 | 766 | 767 | 768 | 769 | 770 | 771 | 772 | 773 | 774 | 775 | 776 | 777 | 778 | 779 | 780 | 781 | 782 | 783 | 784 | 785 | 786 | 787 | 788 | 789 | 790 | 791 | 792 | 793 | 794 | 795 | 796 | 797 | 798 | 799 | 800 | 801 | 802 | 803 | 804 | 805 | 806 | 807 | 808 | 809 | 810 | 811 | 812 | 813 | 814 | 815 | 816 | 817 | 818 | 819 | 820 | 821 | 822 | 823 | 824 | 825 | 826 | 827 | 828 | 829 | 830 | 831 | 832 | 833 | 834 | 835 | 836 | 837 | 838 | 839 | 840 | 841 | 842 | 843 | 844 | 845 | 846 | 847 | 848 | 849 | 850 | 851 | 852 | 853 | 854 | 855 | 856 | 857 | 858 | 859 | 860 | 861 | 862 | 863 | 864 | 865 | 866 | 867 | 868 | 869 | 870 | 871 | 872 | 873 | 874 | 875 | 876 | 877 | 878 | 879 | 880 | 881 | 882 | 883 | 884 | 885 | 886 | 887 | 888 | 889 | 890 | 891 | 892 | 893 | 894 | 895 | 896 | 897 | 898 | 899 | 900 | 901 | 902 | 903 | 904 | 905 | 906 | 907 | 908 | 909 | 910 | 911 | 912 | 913 | 914 | 915 | 916 | 917 | 918 | 919 | 920 | 921 | 922 | 923 | 924 | 925 | 926 | 927 | 928 | 929 | 930 | 931 | 932 | 933 | 934 | 935 | 936 | 937 | 938 | 939 | 940 | 941 | 942 | 943 | 944 | 945 | 946 | 947 | 948 | 949 | 950 | 951 | 952 | 953 | 954 | 955 | 956 | 957 | 958 | 959 | 960 | 961 | 962 | 963 | 964 | 965 | 966 | 967 | 968 | 969 | 970 | 971 | 972 | 973 | 974 | 975 | 976 | 977 | 978 | 979 | 980 | 981 | 982 | 983 | 984 | 985 | 986 | 987 | 988 | 989 | 990 | 991 | 992 | 993 | 994 | 995 | 996 | 997 | 998 | --------------------------------------------------------------------------------