├── .babelrc ├── .eslintrc ├── .gitignore ├── .vscode ├── launch.json └── settings.json ├── README.md ├── build ├── build-dev.js ├── build.js ├── check-versions.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js ├── webpack.prod.conf.js └── webpack.test.conf.js ├── capture.PNG ├── config ├── dev.env.js ├── index.js ├── prod.env.js └── test.env.js ├── fuse.js ├── index.html ├── package.json ├── src ├── System │ ├── localstorage.ts │ ├── router.ts │ ├── store.ts │ └── vue-shim.d.ts ├── Views │ ├── about.vue │ ├── home.vue │ ├── master.vue │ ├── separatets.ts │ └── separatets.vue ├── app.ts ├── app.vue ├── components │ ├── _empty.vue │ ├── common │ │ └── calendar.vue │ └── navbar.vue └── ext1.ts ├── static └── skins │ ├── AT │ ├── img │ │ └── logo1.png │ └── style.css │ ├── DE │ └── style.css │ └── NL │ └── style.css └── tsconfig.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": 3 | ["es2015","latest"], 4 | //["latest", { "es2015": { "modules": false } }], 5 | // ["es2015","stage-2"], //"stage-2", 6 | //"compact": true, 7 | //"plugins": ["syntax-flow","transform-flow-strip-types","transform-runtime","transform-vue-jsx","transform-es2015-modules-commonjs","transform-decorators-legacy"],//"transform-es2015-modules-commonjs" 8 | //"plugins": ["syntax-flow","transform-flow-strip-types","transform-vue-jsx", "transform-decorators-legacy","transform-class-properties","transform-es2015-modules-commonjs"], 9 | "plugins": ["transform-es2015-modules-commonjs","syntax-flow","transform-flow-strip-types", 10 | "transform-decorators-legacy", 11 | "transform-class-properties" 12 | ], 13 | "comments": false 14 | } 15 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jacknq/vue-ts-ex/4a3887b4e1e9d67ecf70f565e96fad917d3d7398/.eslintrc -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | /node_modules/ 3 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | 5 | { 6 | "name": "Launch Chrome against localhost, with sourcemaps", 7 | "type": "chrome", 8 | "request": "launch", 9 | "url": "http://localhost:8080", 10 | "port": 9222, 11 | "sourceMaps": true, 12 | "webRoot": "${workspaceRoot}", 13 | "diagnosticLogging": true, 14 | "sourceMapPathOverrides": { 15 | "webpack:///./*": "${webRoot}/*" 16 | } 17 | }, 18 | { 19 | "name": ".NET Core Launch (web)", 20 | "type": "coreclr", 21 | "request": "launch", 22 | "preLaunchTask": "build", 23 | "program": "${workspaceRoot}/bVue/bin/Debug/netcoreapp1.1/bVue.dll", 24 | "args": [], 25 | "cwd": "${workspaceRoot}", 26 | "stopAtEntry": false, 27 | "internalConsoleOptions": "openOnSessionStart", 28 | "launchBrowser": { 29 | "enabled": true, 30 | "args": "${auto-detect-url}", 31 | "windows": { 32 | "command": "cmd.exe", 33 | "args": "/C start ${auto-detect-url}" 34 | }, 35 | "osx": { 36 | "command": "open" 37 | }, 38 | "linux": { 39 | "command": "xdg-open" 40 | } 41 | }, 42 | "env": { 43 | "ASPNETCORE_ENVIRONMENT": "Development" 44 | }, 45 | "sourceFileMap": { 46 | "/Views": "${workspaceRoot}/Views" 47 | } 48 | }, 49 | { 50 | "name": ".NET Core Attach", 51 | "type": "coreclr", 52 | "request": "attach", 53 | "processId": "${command.pickProcess}" 54 | }, 55 | { 56 | "name": "Attach to Chrome, with sourcemaps", 57 | "type": "chrome", 58 | "request": "attach", 59 | "url": "http://localhost:8080", 60 | "port": 8080, 61 | "sourceMaps": true, 62 | "webRoot": "${workspaceRoot}" 63 | } 64 | ] 65 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "./node_modules/typescript/lib", 3 | "typescript.referencesCodeLens.enabled": true, 4 | "git.enabled": false, 5 | "debug.allowBreakpointsEverywhere": true, 6 | "files.exclude": { 7 | "**/.git": true, 8 | "**/.svn": true, 9 | "**/.hg": true, 10 | "**/.DS_Store": true //, "**/dist**":true 11 | }, 12 | "typescript.implementationsCodeLens.enabled": true, 13 | "typescript.tsserver.log": "off" 14 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-ts-ex 2 | 3 | # Vue2+ + TypeScript2+ example 4 | All-in vue typescript example with single file component, hot reload, bootstrap 4, webpack , express server, 5 | bootstrap, multiselect with search, 6 | local storage, router, pre-compiled templates all out of the box! Lets Rock! 7 | 8 | Based on official templates in js ported to ts: 9 | https://github.com/vuejs-templates/webpack 10 | 11 | Using official typescript component 12 | `vue-class-component` 13 | 14 | ### Visual Studio integration 15 | ##### VS Code - vetur plugin for vue files, optionaly C# extension 16 | ##### VS2017 - node js window present but better with NPM task runner extension 17 | ##### VS2015 - It is highly recommended that the following extensions are installed 18 | - [NPM Task Runner](https://visualstudiogallery.msdn.microsoft.com/8f2f2cbc-4da5-43ba-9de2-c9d08ade4941) (VS2017 compatible) 19 | - [Vue.js Pack](https://visualstudiogallery.msdn.microsoft.com/30fd019a-7b90-4f75-bb54-b8f49f18fbe1) 20 | 21 | ### Starting a new project? Great! Start with : 22 | **http://cli.vuejs.org/** 23 | try **Vue UI** with **typescript** option. 24 | 25 | ![screenshoot](capture.PNG) 26 | 27 | ## Build Setup 28 | 29 | install node js 30 | https://nodejs.org/en/ 31 | ``` cmd 32 | # install dependencies 33 | npm install 34 | 35 | # serve with hot reload at localhost:8080 36 | npm run dev 37 | 38 | # build for production with minification 39 | npm run build 40 | 41 | 42 | 43 | ``` 44 | 45 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 46 | -------------------------------------------------------------------------------- /build/build-dev.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var express = require('express') 3 | var webpack = require('webpack') 4 | var config = require('../config') 5 | var opn = require('opn') 6 | var proxyMiddleware = require('http-proxy-middleware') 7 | var webpackConfig = process.env.NODE_ENV === 'testing' 8 | ? require('./webpack.prod.conf') 9 | : require('./webpack.dev.conf') 10 | 11 | // default port where dev server listens for incoming traffic 12 | var port = process.env.PORT || config.dev.port 13 | // Define HTTP proxies to your custom API backend 14 | // https://github.com/chimurai/http-proxy-middleware 15 | var proxyTable = config.dev.proxyTable 16 | 17 | var app = express() 18 | var compiler = webpack(webpackConfig) 19 | 20 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 21 | publicPath: webpackConfig.output.publicPath, 22 | stats: { 23 | colors: true, 24 | chunks: false 25 | } 26 | }) 27 | 28 | var hotMiddleware = require('webpack-hot-middleware')(compiler) 29 | // force page reload when html-webpack-plugin template changes 30 | compiler.plugin('compilation', function (compilation) { 31 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 32 | hotMiddleware.publish({ action: 'reload' }) 33 | cb() 34 | }) 35 | }) 36 | 37 | // proxy api requests 38 | Object.keys(proxyTable).forEach(function (context) { 39 | var options = proxyTable[context] 40 | if (typeof options === 'string') { 41 | options = { target: options } 42 | } 43 | app.use(proxyMiddleware(context, options)) 44 | }) 45 | 46 | // handle fallback for HTML5 history API 47 | app.use(require('connect-history-api-fallback')()) 48 | 49 | // serve webpack bundle output 50 | app.use(devMiddleware) 51 | 52 | // enable hot-reload and state-preserving 53 | // compilation error display 54 | app.use(hotMiddleware) 55 | 56 | // serve pure static assets 57 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 58 | app.use(staticPath, express.static('./static')) 59 | 60 | module.exports = app.listen(port, function (err) { 61 | if (err) { 62 | console.log(err) 63 | return 64 | } 65 | var uri = 'http://localhost:' + port 66 | console.log('Listening at ' + uri + '\n') 67 | opn(uri) 68 | }) 69 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | //'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, function (err, stats) { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | //'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | function exec (cmd) { 7 | return require('child_process').execSync(cmd).toString().trim() 8 | } 9 | 10 | const versionRequirements = [ 11 | { 12 | name: 'node', 13 | currentVersion: semver.clean(process.version), 14 | versionRequirement: packageConfig.engines.node 15 | } 16 | ] 17 | 18 | if (shell.which('npm')) { 19 | versionRequirements.push({ 20 | name: 'npm', 21 | currentVersion: exec('npm --version'), 22 | versionRequirement: packageConfig.engines.npm 23 | }) 24 | } 25 | 26 | module.exports = function () { 27 | const warnings = [] 28 | for (let i = 0; i < versionRequirements.length; i++) { 29 | const mod = versionRequirements[i] 30 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 31 | warnings.push(mod.name + ': ' + 32 | chalk.red(mod.currentVersion) + ' should be ' + 33 | chalk.green(mod.versionRequirement) 34 | ) 35 | } 36 | } 37 | 38 | if (warnings.length) { 39 | console.log('') 40 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 41 | console.log() 42 | for (let i = 0; i < warnings.length; i++) { 43 | const warning = warnings[i] 44 | console.log(' ' + warning) 45 | } 46 | console.log() 47 | process.exit(1) 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 'use strict' 3 | require('eventsource-polyfill') 4 | const hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 5 | 6 | hotClient.subscribe(function (event) { 7 | if (event.action === 'reload') { 8 | window.location.reload() 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /build/dev-server.js: -------------------------------------------------------------------------------- 1 | //'use strict' 2 | require('./check-versions')() 3 | 4 | const config = require('../config') 5 | if (!process.env.NODE_ENV) { 6 | process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 7 | } 8 | 9 | const opn = require('opn') 10 | const path = require('path') 11 | const express = require('express') 12 | const webpack = require('webpack') 13 | const proxyMiddleware = require('http-proxy-middleware') 14 | const webpackConfig = (process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'production') 15 | ? require('./webpack.prod.conf') 16 | : require('./webpack.dev.conf') 17 | 18 | // default port where dev server listens for incoming traffic 19 | const port = process.env.PORT || config.dev.port 20 | // automatically open browser, if not set will be false 21 | const autoOpenBrowser = !!config.dev.autoOpenBrowser 22 | // Define HTTP proxies to your custom API backend 23 | // https://github.com/chimurai/http-proxy-middleware 24 | const proxyTable = config.dev.proxyTable 25 | 26 | const app = express() 27 | const compiler = webpack(webpackConfig) 28 | 29 | const devMiddleware = require('webpack-dev-middleware')(compiler, { 30 | publicPath: webpackConfig.output.publicPath, 31 | quiet: true 32 | }) 33 | 34 | const hotMiddleware = require('webpack-hot-middleware')(compiler, { 35 | log: false, 36 | heartbeat: 2000 37 | }) 38 | // force page reload when html-webpack-plugin template changes 39 | // currently disabled until this is resolved: 40 | // https://github.com/jantimon/html-webpack-plugin/issues/680 41 | // compiler.plugin('compilation', function (compilation) { 42 | // compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 43 | // hotMiddleware.publish({ action: 'reload' }) 44 | // cb() 45 | // }) 46 | // }) 47 | 48 | // enable hot-reload and state-preserving 49 | // compilation error display 50 | app.use(hotMiddleware) 51 | 52 | // proxy api requests 53 | Object.keys(proxyTable).forEach(function (context) { 54 | const options = proxyTable[context] 55 | if (typeof options === 'string') { 56 | options = { target: options } 57 | } 58 | app.use(proxyMiddleware(options.filter || context, options)) 59 | }) 60 | 61 | // handle fallback for HTML5 history API 62 | app.use(require('connect-history-api-fallback')()) 63 | 64 | // serve webpack bundle output 65 | app.use(devMiddleware) 66 | 67 | // serve pure static assets 68 | const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 69 | app.use(staticPath, express.static('./static')) 70 | 71 | const uri = 'http://localhost:' + port 72 | 73 | var _resolve 74 | var _reject 75 | var readyPromise = new Promise((resolve, reject) => { 76 | _resolve = resolve 77 | _reject = reject 78 | }) 79 | 80 | var server 81 | var portfinder = require('portfinder') 82 | portfinder.basePort = port 83 | 84 | console.log('> Starting dev server...') 85 | devMiddleware.waitUntilValid(() => { 86 | portfinder.getPort((err, port) => { 87 | if (err) { 88 | _reject(err) 89 | } 90 | process.env.PORT = port 91 | var uri = 'http://localhost:' + port 92 | console.log('> Listening at ' + uri + '\n') 93 | // when env is testing, don't need open it 94 | if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { 95 | opn(uri) 96 | } 97 | server = app.listen(port) 98 | _resolve() 99 | }) 100 | }) 101 | 102 | module.exports = { 103 | ready: readyPromise, 104 | close: () => { 105 | server.close() 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | //'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | 6 | exports.assetsPath = function (_path) { 7 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 8 | ? config.build.assetsSubDirectory 9 | : config.dev.assetsSubDirectory 10 | return path.posix.join(assetsSubDirectory, _path) 11 | } 12 | 13 | exports.cssLoaders = function (options) { 14 | options = options || {} 15 | 16 | const cssLoader = { 17 | loader: 'css-loader', 18 | options: { 19 | minimize: process.env.NODE_ENV === 'production', 20 | sourceMap: options.sourceMap 21 | } 22 | } 23 | 24 | // generate loader string to be used with extract text plugin 25 | function generateLoaders (loader, loaderOptions) { 26 | const loaders = [cssLoader] 27 | if (loader) { 28 | loaders.push({ 29 | loader: loader + '-loader', 30 | options: Object.assign({}, loaderOptions, { 31 | sourceMap: options.sourceMap 32 | }) 33 | }) 34 | } 35 | 36 | // Extract CSS when that option is specified 37 | // (which is the case during production build) 38 | if (options.extract) { 39 | return ExtractTextPlugin.extract({ 40 | use: loaders, 41 | fallback: 'vue-style-loader' 42 | }) 43 | } else { 44 | return ['vue-style-loader'].concat(loaders) 45 | } 46 | } 47 | 48 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 49 | return { 50 | css: generateLoaders(), 51 | postcss: generateLoaders(), 52 | less: generateLoaders('less'), 53 | sass: generateLoaders('sass', { indentedSyntax: true }), 54 | scss: generateLoaders('sass'), 55 | stylus: generateLoaders('stylus'), 56 | styl: generateLoaders('stylus') 57 | } 58 | } 59 | 60 | // Generate loaders for standalone style files (outside of .vue) 61 | exports.styleLoaders = function (options) { 62 | const output = [] 63 | const loaders = exports.cssLoaders(options) 64 | for (const extension in loaders) { 65 | const loader = loaders[extension] 66 | output.push({ 67 | test: new RegExp('\\.' + extension + '$'), 68 | use: loader 69 | }) 70 | } 71 | return output 72 | } 73 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | //'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | 6 | module.exports = { 7 | loaders: utils.cssLoaders({ 8 | sourceMap: isProduction 9 | ? config.build.productionSourceMap 10 | : config.dev.cssSourceMap, 11 | extract: isProduction 12 | }), 13 | transformToRequire: { 14 | video: 'src', 15 | source: 'src', 16 | img: 'src', 17 | image: 'xlink:href' 18 | }, 19 | esModule: true 20 | } 21 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | var webpack = require('webpack') 7 | var vueloader = require('vue-loader') 8 | 9 | function resolve (dir) { 10 | return path.join(__dirname, '..', dir) 11 | } 12 | 13 | module.exports = { 14 | // context: resolve( 'src'), 15 | entry: { app: resolve('./src/app.ts') 16 | //,'tether': 'tether' 17 | }, 18 | output: { 19 | path: config.build.assetsRoot, 20 | filename: '[name].js', 21 | publicPath: process.env.NODE_ENV === 'production' 22 | ? config.build.assetsPublicPath 23 | : config.dev.assetsPublicPath 24 | }, 25 | resolve: { 26 | extensions: ['.js','.ts','.vue','.json'], 27 | alias: { 28 | 'src': path.resolve(__dirname, '../src'), 29 | 'assets': path.resolve(__dirname, '../src/assets'), 30 | 'components': path.resolve(__dirname, '../src/components'), 31 | 'vue$': 'vue/dist/vue.esm.js', 32 | '@': resolve('src'), 33 | 'System': path.resolve(__dirname, '../src/System'), 34 | 'Views': path.resolve(__dirname, '../src/Views'), 35 | 'ext1': path.resolve(__dirname, '../src/ext1') 36 | } 37 | }, 38 | module: { 39 | rules: [ 40 | { 41 | test: /\.vue$/, 42 | loader: 'vue-loader', 43 | options: { 44 | esModule: true 45 | } 46 | 47 | }, 48 | 49 | { 50 | test: /\.ts(x?)$/, 51 | loader: 'ts-loader', 52 | 53 | // include: [resolve('src')], 54 | options: { 55 | appendTsSuffixTo: [/\.vue$/] 56 | } 57 | 58 | }, 59 | { 60 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 61 | loader: 'url-loader', 62 | options: { 63 | limit: 10000, 64 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 65 | } 66 | }, 67 | { 68 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 69 | loader: 'url-loader', 70 | options: { 71 | limit: 10000, 72 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 73 | } 74 | }, 75 | { 76 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 77 | loader: 'url-loader', 78 | options: { 79 | limit: 10000, 80 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 81 | } 82 | } 83 | 84 | ] 85 | }, 86 | plugins: [ 87 | new vueloader.VueLoaderPlugin(), 88 | new webpack.ProvidePlugin({ 89 | $: "jquery", 90 | jQuery: "jquery", 91 | 'window.Jquery': "jquery", 92 | 'window.Tether': "tether", 93 | "Tether": "tether" 94 | // "window.Sortable": 'sortablejs' 95 | }) 96 | 97 | ] 98 | 99 | } 100 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | //'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const baseWebpackConfig = require('./webpack.base.conf') 7 | const HtmlWebpackPlugin = require('html-webpack-plugin') 8 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 9 | 10 | // add hot-reload related code to entry chunks 11 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 12 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 13 | }) 14 | 15 | module.exports = merge(baseWebpackConfig, { 16 | module: { 17 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 18 | }, 19 | // cheap-module-eval-source-map is faster for development 20 | devtool: '#cheap-module-eval-source-map', 21 | plugins: [ 22 | new webpack.DefinePlugin({ 23 | 'process.env': config.dev.env 24 | }), 25 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 26 | new webpack.HotModuleReplacementPlugin(), 27 | new webpack.NoEmitOnErrorsPlugin(), 28 | // https://github.com/ampedandwired/html-webpack-plugin 29 | new HtmlWebpackPlugin({ 30 | filename: 'index.html', 31 | template: 'index.html', 32 | inject: true 33 | }), 34 | new FriendlyErrorsPlugin() 35 | ] 36 | }) 37 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | //'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const webpack = require('webpack') 5 | const config = require('../config') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 12 | 13 | const env = process.env.NODE_ENV === 'testing' 14 | ? require('../config/test.env') 15 | : config.build.env 16 | 17 | const webpackConfig = merge(baseWebpackConfig, { 18 | module: { 19 | rules: utils.styleLoaders({ 20 | sourceMap: config.build.productionSourceMap, 21 | extract: true 22 | }) 23 | }, 24 | devtool: config.build.productionSourceMap ? '#source-map' : false, 25 | output: { 26 | path: config.build.assetsRoot, 27 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 28 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 29 | }, 30 | plugins: [ 31 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 32 | new webpack.DefinePlugin({ 33 | 'process.env': env 34 | }), 35 | // UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify 36 | new webpack.optimize.UglifyJsPlugin({ 37 | compress: { 38 | warnings: false 39 | }, 40 | sourceMap: true 41 | }), 42 | // extract css into its own file 43 | new ExtractTextPlugin({ 44 | filename: utils.assetsPath('css/[name].[contenthash].css') 45 | }), 46 | // Compress extracted CSS. We are using this plugin so that possible 47 | // duplicated CSS from different components can be deduped. 48 | new OptimizeCSSPlugin({ 49 | cssProcessorOptions: { 50 | safe: true 51 | } 52 | }), 53 | // generate dist index.html with correct asset hash for caching. 54 | // you can customize output by editing /index.html 55 | // see https://github.com/ampedandwired/html-webpack-plugin 56 | new HtmlWebpackPlugin({ 57 | filename: process.env.NODE_ENV === 'testing' 58 | ? 'index.html' 59 | : config.build.index, 60 | template: 'index.html', 61 | inject: true, 62 | minify: { 63 | removeComments: true, 64 | collapseWhitespace: true, 65 | removeAttributeQuotes: true 66 | // more options: 67 | // https://github.com/kangax/html-minifier#options-quick-reference 68 | }, 69 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 70 | chunksSortMode: 'dependency' 71 | }), 72 | // keep module.id stable when vender modules does not change 73 | new webpack.HashedModuleIdsPlugin(), 74 | // split vendor js into its own file 75 | new webpack.optimize.CommonsChunkPlugin({ 76 | name: 'vendor', 77 | minChunks: function (module) { 78 | // any required modules inside node_modules are extracted to vendor 79 | return ( 80 | module.resource && 81 | /\.js$/.test(module.resource) && 82 | module.resource.indexOf( 83 | path.join(__dirname, '../node_modules') 84 | ) === 0 85 | ) 86 | } 87 | }), 88 | // extract webpack runtime and module manifest to its own file in order to 89 | // prevent vendor hash from being updated whenever app bundle is updated 90 | new webpack.optimize.CommonsChunkPlugin({ 91 | name: 'manifest', 92 | chunks: ['vendor'] 93 | }), 94 | // copy custom static assets 95 | new CopyWebpackPlugin([ 96 | { 97 | from: path.resolve(__dirname, '../static'), 98 | to: config.build.assetsSubDirectory, 99 | ignore: ['.*'] 100 | } 101 | ]) 102 | ] 103 | }) 104 | 105 | if (config.build.productionGzip) { 106 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 107 | 108 | webpackConfig.plugins.push( 109 | new CompressionWebpackPlugin({ 110 | asset: '[path].gz[query]', 111 | algorithm: 'gzip', 112 | test: new RegExp( 113 | '\\.(' + 114 | config.build.productionGzipExtensions.join('|') + 115 | ')$' 116 | ), 117 | threshold: 10240, 118 | minRatio: 0.8 119 | }) 120 | ) 121 | } 122 | 123 | if (config.build.bundleAnalyzerReport) { 124 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 125 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 126 | } 127 | 128 | module.exports = webpackConfig 129 | -------------------------------------------------------------------------------- /build/webpack.test.conf.js: -------------------------------------------------------------------------------- 1 | //'use strict' 2 | // This is the webpack config used for unit tests. 3 | 4 | const utils = require('./utils') 5 | const webpack = require('webpack') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | 9 | const webpackConfig = merge(baseWebpackConfig, { 10 | // use inline sourcemap for karma-sourcemap-loader 11 | module: { 12 | rules: utils.styleLoaders() 13 | }, 14 | devtool: '#inline-source-map', 15 | resolveLoader: { 16 | alias: { 17 | // necessary to to make lang="scss" work in test when using vue-loader's ?inject option 18 | // see discussion at https://github.com/vuejs/vue-loader/issues/724 19 | 'scss-loader': 'sass-loader' 20 | } 21 | }, 22 | plugins: [ 23 | new webpack.DefinePlugin({ 24 | 'process.env': require('../config/test.env') 25 | }) 26 | ] 27 | }) 28 | 29 | // no need for app entry during tests 30 | delete webpackConfig.entry 31 | 32 | module.exports = webpackConfig 33 | -------------------------------------------------------------------------------- /capture.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jacknq/vue-ts-ex/4a3887b4e1e9d67ecf70f565e96fad917d3d7398/capture.PNG -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: false, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | cssSourceMap: false 19 | }, 20 | dev: { 21 | env: require('./dev.env'), 22 | index: path.resolve(__dirname, '../distdev/index.html'), 23 | assetsRoot: path.resolve(__dirname, '../distdev'), 24 | port: 8080, 25 | assetsSubDirectory: 'static', 26 | assetsPublicPath: '/', 27 | productionSourceMap: true, 28 | proxyTable: {}, 29 | // CSS Sourcemaps off by default because relative paths are "buggy" 30 | // with this option, according to the CSS-Loader README 31 | // (https://github.com/webpack/css-loader#sourcemaps) 32 | // In our experience, they generally work as expected, 33 | // just be aware of this issue when enabling this option. 34 | cssSourceMap: false 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /fuse.js: -------------------------------------------------------------------------------- 1 | const { 2 | FuseBox, 3 | VueComponentPlugin, 4 | QuantumPlugin, 5 | HTMLPlugin, 6 | LESSPlugin, 7 | SassPlugin, 8 | CSSPlugin, 9 | CSSResourcePlugin, 10 | WebIndexPlugin, 11 | Sparky, 12 | BabelPlugin, 13 | TypeScriptHelpers, 14 | JSONPlugin 15 | 16 | } = require("fuse-box"); 17 | 18 | let fuse; 19 | let isProduction = false; 20 | 21 | Sparky.task("set-prod", () => { 22 | isProduction = true; 23 | }); 24 | Sparky.task("clean", () => Sparky.src("./dist").clean("dist/")); 25 | Sparky.task("watch-assets", () => Sparky.watch("./assets", { base: "./src" }).dest("./dist")); 26 | Sparky.task("copy-assets", () => Sparky.src("./assets", { base: "./src" }).dest("./dist")); 27 | 28 | Sparky.task("config", () => { 29 | fuse = FuseBox.init({ 30 | homeDir: "./src", //Statement "components/admin/editpost.js" has failed to resolve in module "default" 31 | output: "dist/$name.js", 32 | //hash: isProduction, 33 | sourceMaps: !isProduction, 34 | useTypescriptCompiler: true, 35 | polyfillNonStandardDefaultUsage: true, 36 | target: "browser", 37 | plugins: [ 38 | VueComponentPlugin({ 39 | style: [ 40 | LESSPlugin({ 41 | 42 | // paths: [path.resolve(__dirname, 'node_modules')] 43 | }), 44 | // TypeScriptHelpers(), 45 | CSSResourcePlugin(), 46 | CSSPlugin({ 47 | group: 'components.css', 48 | inject: 'components.css' 49 | }) 50 | ] 51 | }), 52 | TypeScriptHelpers(), 53 | CSSPlugin(), 54 | WebIndexPlugin({ 55 | template: "./index.html" 56 | }), 57 | isProduction && QuantumPlugin({ 58 | bakeApiIntoBundle: "vendor", 59 | uglify: true, 60 | treeshake: true 61 | }), 62 | ], 63 | shim: { 64 | jquery: { 65 | source: "node_modules/jquery/dist/jquery.min.js", 66 | exports: "$" 67 | } 68 | ,tether: { 69 | source: 'node_modules/tether/dist/js/tether.js', 70 | exports: 'Tether' 71 | } 72 | } 73 | }); 74 | 75 | if(!isProduction){ 76 | fuse.dev({ 77 | open: true, 78 | port: 8080 79 | }); 80 | } 81 | 82 | const vendor = fuse.bundle("vendor") 83 | .instructions("~ app.ts"); 84 | 85 | const app = fuse.bundle("app") 86 | .instructions("> [app.ts]"); 87 | 88 | if(!isProduction){ 89 | app.watch().hmr(); 90 | } 91 | }) 92 | 93 | Sparky.task("default", ["clean", "watch-assets", "config"], () => { 94 | return fuse.run(); 95 | }); 96 | 97 | Sparky.task("dist", [ "clean", "copy-assets", "set-prod", "config"], () => { 98 | return fuse.run(); 99 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | be vue 9 | 10 | 11 |
12 | $bundles 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xbvue", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.ts", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "node build/dev-server.js", 9 | "build": "node build/build.js", 10 | "serve-dev": "node build/serve-dev.js", 11 | "devv": "webpack-dev-server --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/", 12 | "start": "webpack-dev-server", 13 | "pub": "dotnet publish -c release -r centos.7-x64", 14 | "deploy": "npm run build && npm run pub && npm run depp", 15 | "sdeploy": "npm run build && npm run pub && npm run sdep", 16 | "fuse": "node ./fuse.js" 17 | }, 18 | "author": "", 19 | "license": "ISC", 20 | "dependencies": { 21 | "@types/bootstrap-datepicker": "0.0.6", 22 | "typings-global": "^1.0.14" 23 | }, 24 | "devDependencies": { 25 | "@types/jquery": "2.0.39", 26 | "@types/node": "^8.0.34", 27 | "autoprefixer": "^6.5.3", 28 | "av-ts": "^0.6.3", 29 | "axios": "^0.15.3", 30 | "babel-core": "^6.22.1", 31 | "babel-eslint": "^7.0.0", 32 | "babel-loader": "^7.1.2", 33 | "babel-plugin-lodash": "^3.2.9", 34 | "babel-plugin-syntax-flow": "^6.8.0", 35 | "babel-plugin-transform-class-properties": "^6.8.0", 36 | "babel-plugin-transform-decorators-legacy": "^1.3.4", 37 | "babel-plugin-transform-flow-strip-types": "^6.14.0", 38 | "babel-plugin-transform-runtime": "^6.0.0", 39 | "babel-preset-env": "^1.6.0", 40 | "babel-preset-es2015": "^6.18.0", 41 | "babel-preset-latest": "^6.22.11", 42 | "babel-preset-stage-2": "^6.11.0", 43 | "babel-register": "^6.0.0", 44 | "babel-runtime": "6.22.0", 45 | "body-parser": "^1.17.1", 46 | "bootstrap": "4.0.0-alpha.6", 47 | "bootstrap-datepicker": "^1.6.4", 48 | "bootstrap-vue": "^0.11.0", 49 | "bootstrap-without-jquery": "^1.0.4", 50 | "browserslist": "^1.5.2", 51 | "chromedriver": "^2.21.2", 52 | "connect-history-api-fallback": "^1.1.0", 53 | "copy-webpack-plugin": "^4.0.1", 54 | "core-js": "^2.4.1", 55 | "cors": "^2.8.1", 56 | "cross-spawn": "^5.0.1", 57 | "css-loader": "^0.26.1", 58 | "css-raw-loader": "^0.1.1", 59 | "es6-promise": "^4.2.4", 60 | "eslint": "^3.7.1", 61 | "eslint-config-defaults": "^9.0.0", 62 | "eslint-config-standard": "^6.1.0", 63 | "eslint-friendly-formatter": "^2.0.5", 64 | "eslint-loader": "^1.5.0", 65 | "eslint-plugin-flowtype": "^2.28.2", 66 | "eslint-plugin-html": "^2.0.0", 67 | "eslint-plugin-promise": "^3.0.4", 68 | "eslint-plugin-react": "^6.7.1", 69 | "eslint-plugin-standard": "^2.0.1", 70 | "eventsource-polyfill": "^0.9.6", 71 | "express": "^4.13.3", 72 | "extract-text-webpack-plugin": "^3.0.0", 73 | "file-loader": "^1.1.4", 74 | "flow-bin": "^0.38.0", 75 | "flow-typed": "^2.0.0", 76 | "font-awesome": "^4.7.0", 77 | "friendly-errors-webpack-plugin": "^1.6.1", 78 | "function-bind": "^1.0.2", 79 | "fuse-box": "^2.3.4-beta.11", 80 | "highlightjs": "^9.10.0", 81 | "html-webpack-plugin": "^2.30.1", 82 | "http-proxy-middleware": "^0.17.3", 83 | "isobject": "^3.0.0", 84 | "jquery": "^3.1.1", 85 | "json-loader": "^0.5.4", 86 | "kilimanjaro": "^0.6.0", 87 | "less": "^2.7.2", 88 | "less-loader": "^2.2.3", 89 | "lodash": "^4.16.6", 90 | "lodash-webpack-plugin": "^0.11.0", 91 | "markdown-it-editor": "^1.1.4", 92 | "moment": "^2.17.0", 93 | "ms-signalr-client": "^2.2.5", 94 | "nightwatch": "^0.9.8", 95 | "node-sass": "4.5.3", 96 | "npm-check-updates": "^2.8.9", 97 | "oauth": "^0.9.15", 98 | "oauth-signature": "^1.3.1", 99 | "opn": "^5.1.0", 100 | "optimize-css-assets-webpack-plugin": "^3.2.0", 101 | "ora": "^1.1.0", 102 | "portfinder": "^1.0.13", 103 | "postcss-selector-parser": "2.2.3", 104 | "prismjs": "1.8.1", 105 | "request": "^2.83.0", 106 | "selenium-server": "3.0.1", 107 | "semver": "^5.3.0", 108 | "shelljs": "^0.7.8", 109 | "style-loader": "^0.13.1", 110 | "stylus": "^0.54.5", 111 | "stylus-loader": "^3.0.1", 112 | "tether": "^1.3.8", 113 | "ts-loader": "^2.3.7", 114 | "ts-node": "^3.3.0", 115 | "typescript": "3.0.1", 116 | "typescript-dotnet-commonjs": "^4.8.0", 117 | "uglify-js": "^3.1.3", 118 | "unix-timestamp": "^0.2.0", 119 | "url-loader": "^0.5.7", 120 | "vee-validate": "2.0.0-beta.20", 121 | "vue": "2.5.17", 122 | "vue-authenticate": "^1.3.1", 123 | "vue-class-component": "^6.0.0", 124 | "vue-class-decorators": "^1.0.13", 125 | "vue-hot-reload-api": "2.1.0", 126 | "vue-loader": "^15.3.0", 127 | "vue-multiselect": "^2.0.3", 128 | "vue-property-decorator": "^7.0.0", 129 | "vue-resource": "^1.3.4", 130 | "vue-router": "3.0.1", 131 | "vue-simplemde": "^0.4.4", 132 | "vue-style-loader": "^4.1.1", 133 | "vue-template-compiler": "2.5.17", 134 | "vue-ts-loader": "0.0.3", 135 | "vuelidate": "^0.5.0", 136 | "vuetify": "0.16.6", 137 | "vuex": "^3.0.1", 138 | "webpack": "^3.6.0", 139 | "webpack-bundle-analyzer": "^2.9.0", 140 | "webpack-dev-middleware": "^1.12.0", 141 | "webpack-hot-middleware": "^2.18.2", 142 | "webpack-merge": "^4.1.0" 143 | }, 144 | "engines": { 145 | "node": ">= 4.0.0", 146 | "npm": ">= 3.0.0" 147 | }, 148 | "browserslist": [ 149 | "> 1%", 150 | "last 2 versions", 151 | "not ie <= 8" 152 | ], 153 | "-vs-binding": { 154 | "BeforeBuild": [ 155 | "build" 156 | ] 157 | } 158 | } 159 | -------------------------------------------------------------------------------- /src/System/localstorage.ts: -------------------------------------------------------------------------------- 1 | import * as moment from 'moment' 2 | 3 | export class StorageService { 4 | constructor() { 5 | //throw new Error("Cannot new this class"); 6 | } 7 | public C_ENV_KEY = 'ENV_KEY' 8 | private C_time = 'setuptime' 9 | public validHours: number = 12; // Reset when storage is more than Xhours 10 | //now = //no new date, got problems 11 | //setupTime = localStorage.getItem(C_time);//cannot dateparse here diferent browsers problem 12 | private setupTime(): string { 13 | var r = localStorage.getItem(this.C_time); 14 | if (r === null || typeof r === "undefined" || r === "undefined") { 15 | return null; 16 | } 17 | return r; 18 | } 19 | 20 | private now(): string { 21 | return moment.utc().format(); 22 | } 23 | 24 | private checkStoreValid(): void { 25 | var setup: string = this.setupTime(); 26 | if (setup == undefined || setup == null) { 27 | console.log('setting now ' + this.now()) 28 | localStorage.setItem(this.C_time, this.now()) 29 | } 30 | else { 31 | // console.log('got locstorage with setupTime' + Date.parse(setup) ); 32 | // console.log(Date.parse(this.now()) - Date.parse(setup)) 33 | if (Date.parse(this.now()) - Date.parse(setup) > this.validHours * 60 * 60 * 1000) {//hours*60*60*1000 //2min 2*60*1000 34 | localStorage.clear(); 35 | localStorage.setItem(this.C_time, this.now()); 36 | } 37 | } 38 | } 39 | // initialiye value in storage, will not override existing value 40 | public setItemInit(key: string, data: string | any): void { 41 | this.checkStoreValid(); 42 | var text: string; 43 | if (data && typeof data === "string") 44 | { text = data; } 45 | else { 46 | text = JSON.stringify(data); 47 | } 48 | // var text: string = JSON.stringify(jsonData); 49 | if (localStorage.getItem(key) == undefined) {//dont overide value 50 | { //console.log('initdata>>'+ data); 51 | localStorage.setItem(key, text); 52 | } 53 | } 54 | } 55 | 56 | public setItem(key: string, data: string | any): void { 57 | var text: string; 58 | if (data && typeof data === "string") 59 | { text = data; } 60 | else { 61 | text = JSON.stringify(data); 62 | } 63 | // else { 64 | // text = JSON.stringify(data); 65 | // } 66 | localStorage.setItem(key, text); 67 | } 68 | 69 | public getItem(key: string): string { 70 | var r = localStorage.getItem(key); 71 | if (r === null || typeof r === "undefined" || r === "undefined") { 72 | return null; 73 | } 74 | // if(val) 75 | return r; 76 | // return null; 77 | } 78 | 79 | } 80 | 81 | module ft { 82 | "use strict"; 83 | 84 | export class LocalStorageService { 85 | // TODO: Need to handle QUOTA_EXCEEDED_ERR 86 | read(path: string): any { 87 | // if not in local storage, the string "undefined" is returned (why???) 88 | var text: string = localStorage.getItem(path); 89 | if (text === null || typeof text === "undefined" || text === "undefined") { 90 | //this.$log.debug("LocalStorageService::read(" + path + ") - path not found, returned null"); 91 | return null; 92 | } 93 | else { 94 | // this.$log.debug("LocalStorageService::read(" + path + ")"); 95 | return text; 96 | } 97 | } 98 | 99 | readObject(path): T { 100 | var text: any = this.read(path); 101 | var data: T|null; 102 | try { 103 | data = JSON.parse(text); 104 | } catch (error) { 105 | // this.$log.error("LocalStorageService::readObject: can't convert string from local storage to object using JSON.parse(). Error: " + error); 106 | data = null; 107 | } 108 | 109 | return data; 110 | } 111 | 112 | write(path: string, text: string): void { 113 | // this.$log.debug("LocalStorageService::write(" + path + ")"); 114 | localStorage.setItem(path, text); 115 | } 116 | 117 | writeObject(path: string, data: any): void { 118 | var text: string = JSON.stringify(data); 119 | this.write(path, text); 120 | } 121 | 122 | remove(path: string): void { 123 | // this.$log.debug("LocalStorageService::remove(" + path + ")"); 124 | localStorage.removeItem(path); 125 | } 126 | 127 | clear(): void { 128 | // this.$log.debug("LocalStorageService::clear - all items removed from local storage"); 129 | localStorage.clear(); 130 | } 131 | } 132 | } -------------------------------------------------------------------------------- /src/System/router.ts: -------------------------------------------------------------------------------- 1 | import { Component, Vue } from "vue-property-decorator" 2 | import { RouterOptions, Location, RouteConfig, Route } from 'vue-router' 3 | import VueRouter from 'vue-router' 4 | //import './vendor' //bootstrap 5 | //require('./main.scss'); //global css 6 | 7 | /* 8 | For components that will be used in html (such as navbar), 9 | all you need to do is import the file somewhere in your code, 10 | they are automatically registered when the file is loaded. 11 | However, if you import the class (ex: import { Navbar } from './navbar'), 12 | you will have to call new Navbar() somewhere as well. You would want 13 | to do that if you are defining a components{} object in the @Component 14 | options parameter. 15 | */ 16 | declare var require: any 17 | //var separatets = require( '../Views/separatets.vue').default 18 | import separatets from '../Views/separatets.vue' 19 | import about from '../Views/about.vue' 20 | import home from '../Views/home.vue' 21 | var test = home 22 | 23 | 24 | const router = new VueRouter({ 25 | mode: 'history', base:'', //subdomain 26 | routes: [ 27 | 28 | { path: '/',component: home }, 29 | //test guys 30 | { path: '/ts', component: separatets }, 31 | { path: '/about', component: about }, 32 | { path: '/test/:tstparam', component: test }, 33 | { path: '/test', component: test }, 34 | 35 | //test guys 36 | 37 | { 38 | path: '/auth/callback', 39 | component: { 40 | template: '
' 41 | } 42 | }, 43 | 44 | // { path: '/module/:compname' }, 45 | { path: '*', redirect: '/' }, 46 | 47 | ] 48 | }); 49 | export default router 50 | -------------------------------------------------------------------------------- /src/System/store.ts: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import { StorageService } from "./localstorage"; 3 | import Vuex from "vuex"; 4 | import { MutationTree, ActionTree, GetterTree } from "vuex"; 5 | Vue.use(Vuex); 6 | 7 | interface Oauth { 8 | data: object; 9 | provider: string; 10 | } 11 | export interface storeData { 12 | count: number; 13 | isAuth: boolean; 14 | lang: string; 15 | mandantid: number; 16 | location: string; 17 | token: string; //your domain security token 18 | servurl: string; //backend url.. 19 | dateformat: string; 20 | oauth: Oauth; //extern authenticated result which you want to store 21 | } 22 | //you may need to store backend url somewhere 23 | var host = 24 | window.document.location.port == "8080" 25 | ? "http://localhost:5000" 26 | : window.location.origin; 27 | //will be in local storage 28 | const varsval: storeData = { 29 | count: 0, 30 | isAuth: false, 31 | token: "", 32 | lang: "de", 33 | mandantid: 0, 34 | location: "AT", 35 | servurl: host, 36 | dateformat: "DD.MM.YYYY", 37 | oauth: null 38 | }; 39 | const storage = new StorageService(); 40 | //save store in localstorage initialy if doesnt exist yet 41 | storage.setItemInit(storage.C_ENV_KEY, varsval); 42 | const storeData: storeData = JSON.parse(storage.getItem(storage.C_ENV_KEY)); 43 | 44 | //interface for more variables in state 45 | export interface State { 46 | vars: storeData; 47 | } 48 | 49 | // you can have multiple slots in state, some types you have outside existing store 50 | const state: State = { 51 | vars: storeData //this variable is picked up from localstorage, you may not want every variable there 52 | }; 53 | 54 | const mutations: MutationTree = { 55 | setvars: (state, s: storeData) => (state.vars = s), 56 | increment: state => state.vars.count++, 57 | decrement: state => { 58 | state.vars.count--; //in case of longer method 59 | } 60 | }; 61 | //put actions here when needed 62 | const actions: ActionTree = {}; 63 | //if your store gets big ofcourse you can separate it into several files - modules 64 | const store = new Vuex.Store({ 65 | state, 66 | mutations, 67 | actions 68 | }); 69 | 70 | store.subscribe((mutate, state) => { 71 | storage.setItem(storage.C_ENV_KEY, state.vars);//save changes to local storage 72 | if (mutate.type == "setvars") { 73 | console.log("subscribed muttate"); 74 | } 75 | }); 76 | 77 | //END COMpound store 78 | export default store; 79 | -------------------------------------------------------------------------------- /src/System/vue-shim.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import Vue from "vue"; 3 | export default Vue; 4 | } -------------------------------------------------------------------------------- /src/Views/about.vue: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /src/Views/home.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | -------------------------------------------------------------------------------- /src/Views/master.vue: -------------------------------------------------------------------------------- 1 | 54 | 76 | -------------------------------------------------------------------------------- /src/Views/separatets.ts: -------------------------------------------------------------------------------- 1 | import { Component, Inject, Model, Prop, Vue,Watch } from 'vue-property-decorator' 2 | //let BootstrapVue = require('bootstrap-vue'); 3 | import multiselect from 'vue-multiselect'; 4 | //var multiselect = require('vue-multiselect').default; 5 | // name:string = 'separatets' 6 | // name:'test' 7 | @Component({ components: { multiselect }, name:'ts' }) 8 | export default class extends Vue { // separatets extends Vue 9 | someabout = 'aboutTS' 10 | name = 'tscomponent' 11 | selected = []; 12 | somemethod(): number { 13 | 14 | return 1; 15 | } 16 | 17 | } -------------------------------------------------------------------------------- /src/Views/separatets.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | -------------------------------------------------------------------------------- /src/app.ts: -------------------------------------------------------------------------------- 1 | declare var require: any; 2 | //require('es6-promise').polyfill(); 3 | import 'es6-promise/auto'; 4 | import { Component, Vue } from "./ext1"; 5 | import { RouterOptions, Location, RouteConfig, Route } from "vue-router"; 6 | import VueRouter from "vue-router"; 7 | declare var require: any; 8 | import router from "./System/router"; 9 | import store, {State,storeData} from "./System/store"; 10 | import App from "./app.vue"; 11 | import Vuex, { Store } from "vuex"; 12 | //Vue.use(Vuex); 13 | 14 | Vue.use(VueRouter); 15 | Vue.config.devtools = true; //enable debug for build 16 | 17 | let appl = new Vue({ 18 | el: "#app", 19 | router: router, 20 | store: store , 21 | components: { App: App }, 22 | render: h => h("App"), 23 | //validations:{}, 24 | methods: { 25 | // validations(){} 26 | } 27 | }); 28 | 29 | //rt.push('/about');//will navigate to specific route 30 | export default { appl, router }; //app 31 | -------------------------------------------------------------------------------- /src/app.vue: -------------------------------------------------------------------------------- 1 | 11 | 35 | -------------------------------------------------------------------------------- /src/components/_empty.vue: -------------------------------------------------------------------------------- 1 | 6 | 21 | -------------------------------------------------------------------------------- /src/components/common/calendar.vue: -------------------------------------------------------------------------------- 1 | 14 | 88 | -------------------------------------------------------------------------------- /src/components/navbar.vue: -------------------------------------------------------------------------------- 1 | 27 | 67 | -------------------------------------------------------------------------------- /src/ext1.ts: -------------------------------------------------------------------------------- 1 | import { Component, Inject, Model, Prop, Watch } from "vue-property-decorator"; 2 | export { Component, Inject, Model, Prop, Watch } from "vue-property-decorator"; 3 | //import Vue from 'vue' 4 | import store, { storeData, State } from "./System/store"; 5 | declare var require: any; 6 | import VueRouter from "vue-router"; 7 | import {Store} from "vuex"; 8 | //import axio, { AxiosRequestConfig, AxiosPromise } from "axios"; 9 | //import moment from moment 10 | 11 | import * as b from "vue-property-decorator"; 12 | b.Vue.use(VueRouter); 13 | 14 | //extending default vue instance with some more stuff 15 | export class Vue extends b.Vue { 16 | $v: any; 17 | //you either do this, ts will know what type of store there is, or you make extra computed property 18 | // $store = store; 19 | get vars(): storeData { 20 | return this.$storets.state.vars; 21 | } 22 | //creating extra property with typed store 23 | get $storets() 24 | { 25 | return this.$store as Store; 26 | } 27 | 28 | public log(val: String) { 29 | console.log(val); 30 | } 31 | public logErr(val: String) { 32 | console.log(val); 33 | } 34 | } 35 | //} 36 | //extending vue instance with interface 37 | // declare module 'vue/types/vue' { 38 | // // 3. Declare augmentation for Vue 39 | // interface Vue { 40 | // $prope: string 41 | // } 42 | // } 43 | //var v = new Vue(); 44 | //EXAMPLE OF DATETIME formatting - FILTER 45 | // b.Vue.filter('dtformat', function (val) { 46 | 47 | // if(val!=null && val!='') 48 | // return moment(val).format(v.vars.dateformat); 49 | // return ''; 50 | // }) 51 | 52 | // declare module "vue/types/options" { 53 | // interface ComponentOptions { 54 | // validations?: {}; //; validations () {}; 55 | // } 56 | // } 57 | -------------------------------------------------------------------------------- /static/skins/AT/img/logo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jacknq/vue-ts-ex/4a3887b4e1e9d67ecf70f565e96fad917d3d7398/static/skins/AT/img/logo1.png -------------------------------------------------------------------------------- /static/skins/AT/style.css: -------------------------------------------------------------------------------- 1 | H3 2 | { 3 | color:blue; 4 | } 5 | div.logo:before { 6 | 7 | content: ""; 8 | background-image:url("/static/skins/at/img/logo1.png"); 9 | background-size: 100% 100%; 10 | display: inline-block; 11 | /*size of your image*/ 12 | height: 40px; 13 | width:40px; 14 | /*if you want to change the position you can use margins or:*/ 15 | position:relative; 16 | /* top:5px;*/ 17 | 18 | } 19 | -------------------------------------------------------------------------------- /static/skins/DE/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jacknq/vue-ts-ex/4a3887b4e1e9d67ecf70f565e96fad917d3d7398/static/skins/DE/style.css -------------------------------------------------------------------------------- /static/skins/NL/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jacknq/vue-ts-ex/4a3887b4e1e9d67ecf70f565e96fad917d3d7398/static/skins/NL/style.css -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "es2015", 5 | "lib": [ 6 | "dom","es2015", 7 | "es5","es6", "esnext", 8 | "es2015.promise", "es2015.iterable","dom.iterable" 9 | ], 10 | "allowSyntheticDefaultImports": true, "moduleResolution": "node", 11 | "sourceMap": true, "experimentalDecorators": true 12 | , "noImplicitAny": false, 13 | "strict": false, 14 | "suppressImplicitAnyIndexErrors": true, 15 | "removeComments": true, 16 | "baseUrl": "src", // This must be specified if "paths" is. 17 | "paths": { 18 | 19 | "@/*": [ 20 | "src/*" 21 | ], 22 | 23 | "ext1": [ 24 | "ext1" 25 | ], 26 | } 27 | }, 28 | "exclude": [ 29 | "./node_modules" 30 | ], 31 | "compileOnSave": false 32 | } --------------------------------------------------------------------------------