3 |
4 |
5 |
6 |
7 |
35 |
36 |
47 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | 
4 |
11 |
12 |
13 |
23 |
24 |
55 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueRouter from 'vue-router'
3 | import { loadScript } from 'esri-loader'
4 | import App from './App.vue'
5 | import HomeButton from './HomeButton.vue'
6 | import LocateButton from './LocateButton.vue'
7 |
8 | Vue.use(VueRouter)
9 |
10 | // 2. Define some routes
11 | // Each route should map to a component. The "component" can
12 | // either be an actual component constructor created via
13 | // `Vue.extend()`, or just a component options object.
14 | // We'll talk about nested routes later.
15 | const routes = [
16 | { path: '/home-button', component: HomeButton },
17 | { path: '/locate-button', component: LocateButton },
18 | ]
19 |
20 | // 3. Create the router instance and pass the `routes` option
21 | // You can pass in additional options here, but let's
22 | // keep it simple for now.
23 | const router = new VueRouter({
24 | routes // short for `routes: routes`
25 | })
26 |
27 | // preload the ArcGIS API
28 | const options = {
29 | url: 'https://js.arcgis.com/3.23/',
30 | };
31 | loadScript(options)
32 |
33 | // render the app
34 | new Vue({
35 | el: '#app',
36 | router,
37 | render: h => h(App)
38 | })
39 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var webpack = require('webpack')
3 |
4 | module.exports = {
5 | entry: './src/main.js',
6 | output: {
7 | path: path.resolve(__dirname, './dist'),
8 | publicPath: '/dist/',
9 | filename: 'build.js'
10 | },
11 | module: {
12 | rules: [
13 | {
14 | test: /\.css$/,
15 | use: [
16 | 'vue-style-loader',
17 | 'css-loader'
18 | ],
19 | }, {
20 | test: /\.vue$/,
21 | loader: 'vue-loader',
22 | options: {
23 | loaders: {
24 | }
25 | // other vue-loader options go here
26 | }
27 | },
28 | {
29 | test: /\.js$/,
30 | loader: 'babel-loader',
31 | exclude: /node_modules/
32 | },
33 | {
34 | test: /\.(png|jpg|gif|svg)$/,
35 | loader: 'file-loader',
36 | options: {
37 | name: '[name].[ext]?[hash]'
38 | }
39 | }
40 | ]
41 | },
42 | resolve: {
43 | alias: {
44 | 'vue$': 'vue/dist/vue.esm.js'
45 | },
46 | extensions: ['*', '.js', '.vue', '.json']
47 | },
48 | devServer: {
49 | historyApiFallback: true,
50 | noInfo: true,
51 | overlay: true
52 | },
53 | performance: {
54 | hints: false
55 | },
56 | devtool: '#eval-source-map'
57 | }
58 |
59 | if (process.env.NODE_ENV === 'production') {
60 | module.exports.devtool = '#source-map'
61 | // http://vue-loader.vuejs.org/en/workflow/production.html
62 | module.exports.plugins = (module.exports.plugins || []).concat([
63 | new webpack.DefinePlugin({
64 | 'process.env': {
65 | NODE_ENV: '"production"'
66 | }
67 | }),
68 | new webpack.optimize.UglifyJsPlugin({
69 | sourceMap: true,
70 | compress: {
71 | warnings: false
72 | }
73 | }),
74 | new webpack.LoaderOptionsPlugin({
75 | minimize: true
76 | })
77 | ])
78 | }
79 |
--------------------------------------------------------------------------------
4 | {{ msg }}
5 |-
6 |
Home Button
7 | Locate Button
8 |