diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..e812394 --- /dev/null +++ b/.babelrc @@ -0,0 +1,6 @@ +{ + "presets": [ + ["env", { "modules": false }], + "stage-3" + ] +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..9d08a1a --- /dev/null +++ b/.editorconfig @@ -0,0 +1,9 @@ +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a0446a5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,12 @@ +.DS_Store +node_modules/ +dist/ +npm-debug.log +yarn-error.log + +# Editor directories and files +.idea +*.suo +*.ntvs* +*.njsproj +*.sln diff --git a/README.md b/README.md new file mode 100644 index 0000000..f527bd8 --- /dev/null +++ b/README.md @@ -0,0 +1,18 @@ +# esri-vue-cli-example + +An example of how to use [esri-loader](https://github.com/Esri/esri-loader) in an application built with [vue-cli](https://github.com/vuejs/vue-cli) + +## Build Setup + +``` bash +# install dependencies +npm install + +# serve with hot reload at localhost:8080 +npm run dev + +# build for production with minification +npm run build +``` + +For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). diff --git a/index.html b/index.html new file mode 100644 index 0000000..4f7976f --- /dev/null +++ b/index.html @@ -0,0 +1,11 @@ + + + + + esri-vue-cli-example + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..1ad1730 --- /dev/null +++ b/package.json @@ -0,0 +1,35 @@ +{ + "name": "esri-vue-cli-example", + "description": "An example of how to use esri-loader in an application built with vue-cli", + "version": "1.0.0", + "author": "Tom Wayson ", + "license": "Apache-2.0", + "private": true, + "scripts": { + "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", + "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" + }, + "dependencies": { + "esri-loader": "^1.6.2", + "vue": "^2.5.11", + "vue-router": "^3.0.1" + }, + "browserslist": [ + "> 1%", + "last 2 versions", + "not ie <= 8" + ], + "devDependencies": { + "babel-core": "^6.26.0", + "babel-loader": "^7.1.2", + "babel-preset-env": "^1.6.0", + "babel-preset-stage-3": "^6.24.1", + "cross-env": "^5.0.5", + "css-loader": "^0.28.7", + "file-loader": "^1.1.4", + "vue-loader": "^13.0.5", + "vue-template-compiler": "^2.4.4", + "webpack": "^3.6.0", + "webpack-dev-server": "^2.9.1" + } +} diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..65a023b --- /dev/null +++ b/src/App.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/src/Map.vue b/src/Map.vue new file mode 100644 index 0000000..489c0c2 --- /dev/null +++ b/src/Map.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/src/Scene.vue b/src/Scene.vue new file mode 100644 index 0000000..e13d060 --- /dev/null +++ b/src/Scene.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/src/assets/logo.png differ diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..a1edc76 --- /dev/null +++ b/src/main.js @@ -0,0 +1,31 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import App from './App.vue' +import Map from './Map.vue' +import Scene from './Scene.vue' + +Vue.use(VueRouter) + +// 2. Define some routes +// Each route should map to a component. The "component" can +// either be an actual component constructor created via +// `Vue.extend()`, or just a component options object. +// We'll talk about nested routes later. +const routes = [ + { path: '/map', component: Map }, + { path: '/scene', component: Scene } +] + +// 3. Create the router instance and pass the `routes` option +// You can pass in additional options here, but let's +// keep it simple for now. +const router = new VueRouter({ + routes // short for `routes: routes` +}) + + +new Vue({ + el: '#app', + router, + render: h => h(App) +}) diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..76a86f5 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,78 @@ +var path = require('path') +var webpack = require('webpack') + +module.exports = { + entry: './src/main.js', + output: { + path: path.resolve(__dirname, './dist'), + publicPath: '/dist/', + filename: 'build.js' + }, + module: { + rules: [ + { + test: /\.css$/, + use: [ + 'vue-style-loader', + 'css-loader' + ], + }, { + test: /\.vue$/, + loader: 'vue-loader', + options: { + loaders: { + } + // other vue-loader options go here + } + }, + { + test: /\.js$/, + loader: 'babel-loader', + exclude: /node_modules/ + }, + { + test: /\.(png|jpg|gif|svg)$/, + loader: 'file-loader', + options: { + name: '[name].[ext]?[hash]' + } + } + ] + }, + resolve: { + alias: { + 'vue$': 'vue/dist/vue.esm.js' + }, + extensions: ['*', '.js', '.vue', '.json'] + }, + devServer: { + historyApiFallback: true, + noInfo: true, + overlay: true + }, + performance: { + hints: false + }, + devtool: '#eval-source-map' +} + +if (process.env.NODE_ENV === 'production') { + module.exports.devtool = '#source-map' + // http://vue-loader.vuejs.org/en/workflow/production.html + module.exports.plugins = (module.exports.plugins || []).concat([ + new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: '"production"' + } + }), + new webpack.optimize.UglifyJsPlugin({ + sourceMap: true, + compress: { + warnings: false + } + }), + new webpack.LoaderOptionsPlugin({ + minimize: true + }) + ]) +}