3 |
8 |
10 |
11 |
12 |
31 |
--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nickiwen/vue-typescript/9a1d6d9a694d49c3d033e61429b8b5698e5b98f8/src/assets/logo.png
--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ message }}
4 |
5 |
6 |
7 |
16 |
17 |
18 |
34 |
--------------------------------------------------------------------------------
/src/components/Sports.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | Sports:{{ sportData }}
4 |
5 |
6 |
17 |
20 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | import router from './router'
4 | import axios from "axios"
5 | import Vueaxios from 'vue-axios'
6 | import ElementUI from 'element-ui';
7 | import store from './store/index'
8 | import 'element-ui/lib/theme-chalk/index.css';
9 | import './registerServiceWorker'
10 |
11 | // axios ts中不支持挂在到原型，可以这样来实现
12 | Vue.use(Vueaxios, axios)
13 | Vue.use(ElementUI)
14 | Vue.config.productionTip = false
15 |
16 | new Vue({
17 | router,
18 | store,
19 | render: h => h(App)
20 | }).$mount('#app')
21 |
--------------------------------------------------------------------------------
/src/registerServiceWorker.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 |
3 | import { register } from 'register-service-worker'
4 |
5 | if (process.env.NODE_ENV === 'production') {
6 | register(`${process.env.BASE_URL}service-worker.js`, {
7 | ready () {
8 | console.log(
9 | 'App is being served from cache by a service worker.\n' +
10 | 'For more details, visit https://goo.gl/AFskqB'
11 | )
12 | },
13 | registered () {
14 | console.log('Service worker has been registered.')
15 | },
16 | cached () {
17 | console.log('Content has been cached for offline use.')
18 | },
19 | updatefound () {
20 | console.log('New content is downloading.')
21 | },
22 | updated () {
23 | console.log('New content is available; please refresh.')
24 | },
25 | offline () {
26 | console.log('No internet connection found. App is running in offline mode.')
27 | },
28 | error (error) {
29 | console.error('Error during service worker registration:', error)
30 | }
31 | })
32 | }
33 |
--------------------------------------------------------------------------------
/src/router.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Router from 'vue-router'
3 | import Home from './views/Home.vue'
4 | import News from '@/views/News.vue'
5 |
6 | Vue.use(Router)
7 |
8 | export default new Router({
9 | mode: 'history',
10 | base: process.env.BASE_URL,
11 | routes: [
12 | {
13 | path: '/',
14 | name: 'home',
15 | component: Home
16 | },
17 | {
18 | path: '/about',
19 | name: 'about',
20 | // route level code-splitting
21 | // this generates a separate chunk (about.[hash].js) for this route
22 | // which is lazy-loaded when the route is visited.
23 | component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
24 | },
25 | {
26 | path:"/news",
27 | name:"news",
28 | component:News
29 | }
30 | ]
31 | })
32 |
--------------------------------------------------------------------------------
/src/shims-tsx.d.ts:
--------------------------------------------------------------------------------
1 | import Vue, { VNode } from 'vue'
2 |
3 | declare global {
4 | namespace JSX {
5 | // tslint:disable no-empty-interface
6 | interface Element extends VNode {}
7 | // tslint:disable no-empty-interface
8 | interface ElementClass extends Vue {}
9 | interface IntrinsicElements {
10 | [elem: string]: any
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 | import Vue from 'vue'
3 | export default Vue
4 | }
5 |
--------------------------------------------------------------------------------
/src/store/actions.ts:
--------------------------------------------------------------------------------
1 | import state from './state'
2 | import { RootStateTypes } from './types'
3 | import { ActionTree } from 'vuex'
4 |
5 | const actions: ActionTree
3 |
5 |
6 |
16 |
--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ msg }}
4 |
3 | 
4 |
6 |
7 |
8 |
19 |
--------------------------------------------------------------------------------
/src/views/News.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
3 | News:{{ newsData }}-{{ message }} -{{ messageComputed }}
4 |
25 |
26 |
79 |
81 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "module": "esnext",
5 | "strict": true,
6 | "jsx": "preserve",
7 | "importHelpers": true,
8 | "moduleResolution": "node",
9 | "experimentalDecorators": true,
10 | "esModuleInterop": true,
11 | "allowSyntheticDefaultImports": true,
12 | "sourceMap": true,
13 | "baseUrl": ".",
14 | "types": [
15 | "webpack-env"
16 | ],
17 | "paths": {
18 | "@/*": [
19 | "src/*"
20 | ]
21 | },
22 | "lib": [
23 | "esnext",
24 | "dom",
25 | "dom.iterable",
26 | "scripthost"
27 | ]
28 | },
29 | "include": [
30 | "src/**/*.ts",
31 | "src/**/*.tsx",
32 | "src/**/*.vue",
33 | "tests/**/*.ts",
34 | "tests/**/*.tsx"
35 | ],
36 | "exclude": [
37 | "node_modules"
38 | ]
39 | }
40 |
--------------------------------------------------------------------------------
-
7 |
-
8 |
{{ item.title }}
9 |
10 |
12 |
13 | 默认按钮
14 | 主要按钮
15 | 成功按钮
16 | 信息按钮
17 | 警告按钮
18 | 危险按钮
19 |
20 |
21 |
22 | Vuex: {{ city }}
23 |
24 |