Skip to content

Commit d99b3f4

Browse files
committed
refactoring main component to vue file
1 parent f6c4cbc commit d99b3f4

File tree

5 files changed

+67
-49
lines changed

5 files changed

+67
-49
lines changed

client_source/apollo.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Vue from 'vue';
2+
import { ApolloClient } from 'apollo-client';
3+
import { HttpLink } from 'apollo-link-http';
4+
import { InMemoryCache } from 'apollo-cache-inmemory';
5+
import VueApollo from 'vue-apollo';
6+
7+
Vue.use(VueApollo);
8+
9+
const httpLink = new HttpLink({
10+
uri: '/graphql',
11+
});
12+
13+
const apolloClient = new ApolloClient({
14+
link: httpLink,
15+
cache: new InMemoryCache(),
16+
connectToDevTools: process.env.NODE_ENV !== 'production',
17+
});
18+
19+
const apolloProvider = new VueApollo({
20+
defaultClient: apolloClient,
21+
});
22+
23+
export default apolloProvider;

client_source/components/App.vue

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<div>
3+
Name: <input v-model="name" type="text">
4+
<h1>Hello Component</h1>
5+
<hello-component :name="name" :initialEnthusiasm="5" />
6+
<h1>Element UI</h1>
7+
<el-button type="primary" @click="visible = true">Button</el-button>
8+
<el-dialog :visible.sync="visible" title="Hello world">
9+
<p>Try Element</p>
10+
</el-dialog>
11+
</div>
12+
</template>
13+
14+
<script lang="ts">
15+
import Vue from 'vue';
16+
import HelloComponent from './Hello.vue';
17+
import { Button, Dialog } from 'element-ui';
18+
19+
export default Vue.extend({
20+
name: 'app',
21+
data() {
22+
return { name: 'World', visible: false };
23+
},
24+
components: {
25+
HelloComponent,
26+
elButton: Button,
27+
elDialog: Dialog,
28+
}
29+
});
30+
</script>
31+
32+
<style lang="scss">
33+
/* 改变主题色变量 */
34+
$--color-primary: #41b882;
35+
36+
/* 改变 icon 字体路径变量,必需 */
37+
$--font-path: '~element-ui/lib/theme-chalk/fonts';
38+
39+
@import "~element-ui/packages/theme-chalk/src/index";
40+
</style>

client_source/index.scss

Lines changed: 0 additions & 7 deletions
This file was deleted.

client_source/index.ts

Lines changed: 3 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,10 @@
1-
import './index.scss';
2-
31
import Vue from 'vue';
4-
import HelloComponent from './components/Hello.vue';
5-
import { Button, Dialog } from 'element-ui';
6-
import { ApolloClient } from 'apollo-client';
7-
import { HttpLink } from 'apollo-link-http';
8-
import { InMemoryCache } from 'apollo-cache-inmemory';
9-
import VueApollo from 'vue-apollo';
10-
11-
const httpLink = new HttpLink({
12-
uri: '/graphql',
13-
});
14-
15-
const apolloClient = new ApolloClient({
16-
link: httpLink,
17-
cache: new InMemoryCache(),
18-
connectToDevTools: process.env.NODE_ENV !== 'production',
19-
});
20-
21-
const apolloProvider = new VueApollo({
22-
defaultClient: apolloClient,
23-
});
24-
25-
Vue.use(VueApollo);
2+
import apolloProvider from './apollo';
3+
import App from './components/App.vue';
264

275
let app = new Vue({
286
el: '#app',
29-
template: `
30-
<div>
31-
Name: <input v-model="name" type="text">
32-
<h1>Hello Component</h1>
33-
<hello-component :name="name" :initialEnthusiasm="5" />
34-
<h1>Element UI</h1>
35-
<el-button type="primary" @click="visible = true">Button</el-button>
36-
<el-dialog :visible.sync="visible" title="Hello world">
37-
<p>Try Element</p>
38-
</el-dialog>
39-
</div>
40-
`,
41-
data: { name: 'World', visible: false },
427
provide: apolloProvider.provide(),
43-
components: {
44-
HelloComponent,
45-
elButton: Button,
46-
elDialog: Dialog,
47-
}
8+
render: createElement => createElement(App),
489
});
4910
export default app;

webpack.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ module.exports = {
9393
}),
9494
],
9595
resolve: {
96+
extensions: ['.ts', '.js', '.json'],
9697
modules: [
9798
'node_modules',
9899
'node_modules/vue-style-loader/lib',

0 commit comments

Comments
 (0)