kenberkeley / vue-demo

Vue.js 示例项目 · 简易留言板。本项目拥有完善的文档说明与注释,让您快速上手 Vue.js 开发 SPA。Webpack / ES6 + Babel / Vue Router / (Vue Resource?) / (Vue Validator?) / (Vuex?) —— An Excellent Vue Starter with Best Practice / 最佳实践
https://kenberkeley.github.io/vue-demo/dist
Apache License 2.0
1.29k stars 410 forks source link

关于插入组件的问题 #29

Open duod4o opened 4 years ago

duod4o commented 4 years ago

你好,Ken! 很感谢您的vue-demo项目,给了我很大启发! 最近我想在此项目中,插入monaco editor组件,但是均以失败告终!好像是monaco editor对webpack的版本要求在4.5.0,请问有什么办法来解决这种问题吗?

kenberkeley commented 4 years ago

建议使用 Vue CLI

duod4o commented 4 years ago

抱歉,没理解。能否详细说明一下,我是一名vue新手。 您的意思是需要是使用vue2.0吗?这样话,需要将整个项目移植到2.0,难度有点大

duod4o commented 4 years ago

以下是我用官方提供的迁移工具的扫描结果:

c:\vue-demo-1.1.0>vue-migration-helper

1. Replace '**/*.js' with '**/:.js+'
  Line 18: build/gulpfile.js
  Reason: The syntax for route matching has changed since Vue Router now uses path-to-regexp under the hood
  More info: http://vuejs.org/guide/migration-vue-router.html#One-or-More-Named-Parameters

2. Replace '**/*.css' with '**/:.css+'
  Line 19: build/gulpfile.js
  Reason: The syntax for route matching has changed since Vue Router now uses path-to-regexp under the hood
  More info: http://vuejs.org/guide/migration-vue-router.html#One-or-More-Named-Parameters

3. Replace init with beforeCreate
  Line 224: docs/_book/gitbook/gitbook-plugin-fontsettings/fontsettings.js
  Reason: init lifecycle hook has been removed
  More info: http://vuejs.org/guide/migration.html#init

4. Replace init with beforeCreate
  Line 14: docs/_book/gitbook/gitbook-plugin-search/search-engine.js
  Reason: init lifecycle hook has been removed
  More info: http://vuejs.org/guide/migration.html#init

5. Refactor keep-alive attribute to a <keep-alive></keep-alive> wrapper component
  Line 479: docs/_book/zh-cn/development/Best-practice.html
  Reason: keep-alive is now a wrapper element, rather than an attribute
  More info: http://vuejs.org/guide/migration.html#keep-alive-Attribute

6. Rewrite your Vuex middlewares as plugins (see the link below for an example)
  Line 27: mock/routes/index.js
  Reason: Vuex middlewares have been replaced by a new plugin system
  More info: http://vuejs.org/guide/migration-vuex.html#Middlewares

7. Rewrite your Vuex middlewares as plugins (see the link below for an example)
  Line 40: mock/routes/index.js
  Reason: Vuex middlewares have been replaced by a new plugin system
  More info: http://vuejs.org/guide/migration-vuex.html#Middlewares

8. Rewrite your Vuex middlewares as plugins (see the link below for an example)
  Line 45: mock/routes/index.js
  Reason: Vuex middlewares have been replaced by a new plugin system
  More info: http://vuejs.org/guide/migration-vuex.html#Middlewares

9. Rewrite your Vuex middlewares as plugins (see the link below for an example)
  Line 54: mock/routes/index.js
  Reason: Vuex middlewares have been replaced by a new plugin system
  More info: http://vuejs.org/guide/migration-vuex.html#Middlewares

10. Rewrite your Vuex middlewares as plugins (see the link below for an example)
  Line 59: mock/routes/index.js
  Reason: Vuex middlewares have been replaced by a new plugin system
  More info: http://vuejs.org/guide/migration-vuex.html#Middlewares

11. Replace "vue": "^1.0.18" with "vue": "^2.0.0", then run: npm install
  Line 22: package.json
  Reason: If you are using pre-2.0 Vue through NPM, you have to update it in your package.json file
  More info: http://vuejs.org/guide/migration.html#

12. Replace "vue-router": "^0.7.11" with "vue-router": "^2.0.0", then run: npm install
  Line 23: package.json
  Reason: If you are using pre-2.0 Vue Router through NPM, you have to update it in your package.json file
  More info: http://vuejs.org/guide/migration-vue-router.html#

13. Replace "vue-loader": "^8.0.0" with "vue-loader": "^9.0.0", then run: npm install
  Line 69: package.json
  Reason: vue-loader 9.0 is the earliest supported version compatible with Vue 2.0
  More info: http://vuejs.org/guide/migration.html#

14. Replace router.start with router: router on your root Vue instance (see link below for details)
  Line 17: src/app.js
  Reason: Starting an app with routing no longer requires a special method - the router can simply be passed to the root Vue instance as option
  More info: http://vuejs.org/guide/migration-vue-router.html#router-start

15. Replace transition="fade" attribute with either a <transition name="fade"> or <transition-group name="fade"> wrapper component
  Line 12: src/components/App.vue
  Reason: The new and improved transition system requires use of new <transition> and <transition-group> components
  More info: http://vuejs.org/guide/migration.html#transition-Attribute

16. Replace .fade-transition with .fade-enter-active, .fade-leave-active
  Line 49: src/components/App.vue
  Reason: v-transition class has been replaced by the standard classes used by Angular and React CSSTransitionGroup
  More info: http://vuejs.org/guide/migration.html#transition-Attribute

17. Replace .fade-leave with .fade-leave-active (if it's left over from Vue 1.x)
  Line 52: src/components/App.vue
  Reason: v-leave class now defines a starting state for leave transitions, rather than the ending state
  More info: http://vuejs.org/guide/migration.html#Transitions

18. Rename $index to index and explicity declare it (e.g. v-for="(item, index) in items")
  Line 5: src/components/Breadcrumb.vue
  Reason: $index has been removed to avoid implicitly defined (i.e. "magic") variables
  More info: http://vuejs.org/guide/migration.html#index-and-key

19. Rename $index to index and explicity declare it (e.g. v-for="(item, index) in items")
  Line 6: src/components/Breadcrumb.vue
  Reason: $index has been removed to avoid implicitly defined (i.e. "magic") variables
  More info: http://vuejs.org/guide/migration.html#index-and-key

20. Replace route.handler with route.meta.handler, then also update the route option to be scoped under meta
  Line 7: src/components/Breadcrumb.vue
  Reason: Arbitrary route properties must now be scoped under the new meta property, to avoid conflicts with future features
  More info: http://vuejs.org/guide/migration-vue-router.html#Arbitrary-Route-Properties

21. Replace v-link="route.handler.fullPath" with the new <router-link> component (see link below for details)
  Line 9: src/components/Breadcrumb.vue
  Reason: The v-link directive has been replaced with the new <router-link> component
  More info: http://vuejs.org/guide/migration-vue-router.html#v-link

22. Replace route.handler with route.meta.handler, then also update the route option to be scoped under meta
  Line 10: src/components/Breadcrumb.vue
  Reason: Arbitrary route properties must now be scoped under the new meta property, to avoid conflicts with future features
  More info: http://vuejs.org/guide/migration-vue-router.html#Arbitrary-Route-Properties

23. Replace router.go with router.push
  Line 35: src/components/Breadcrumb.vue
  Reason: For consistency with the HTML5 History API, router.go is now only used for back/forward navigation, while router.push is used to navigate to a specific page
  More info: http://vuejs.org/guide/migration-vue-router.html#router-go

24. Replace v-link="`/`" with the new <router-link> component (see link below for details)
  Line 4: src/components/Navbar.vue
  Reason: The v-link directive has been replaced with the new <router-link> component
  More info: http://vuejs.org/guide/migration-vue-router.html#v-link

25. Replace v-link-active with the new <router-link> component with a custom tag (see link below for details)
  Line 9: src/components/Navbar.vue
  Reason: Active route classes are now handled through the <router-link> component
  More info: http://vuejs.org/guide/migration-vue-router.html#v-link-active

26. Replace route.showInNavbar with route.meta.showInNavbar, then also update the route option to be scoped under meta
  Line 12: src/components/Navbar.vue
  Reason: Arbitrary route properties must now be scoped under the new meta property, to avoid conflicts with future features
  More info: http://vuejs.org/guide/migration-vue-router.html#Arbitrary-Route-Properties

27. Replace filtered value in :class="route.icon | defaultIcon" with a method or computed property
  Line 15: src/components/Navbar.vue
  Reason: Filters can now only be used inside text interpolations, e.g. {{ date | formatDate('YY-MM-DD') }}
  More info: http://vuejs.org/guide/migration.html#Filters-Outside-Text-Interpolations

28. Replace v-link="`/auth/logout`" with the new <router-link> component (see link below for details)
  Line 37: src/components/Navbar.vue
  Reason: The v-link directive has been replaced with the new <router-link> component
  More info: http://vuejs.org/guide/migration-vue-router.html#v-link

29. Replace v-link-active with the new <router-link> component with a custom tag (see link below for details)
  Line 43: src/components/Navbar.vue
  Reason: Active route classes are now handled through the <router-link> component
  More info: http://vuejs.org/guide/migration-vue-router.html#v-link-active

30. Replace v-link="{ path: '/auth/login', activeClass: 'active' }" with the new <router-link> component (see link below for details)
  Line 44: src/components/Navbar.vue
  Reason: The v-link directive has been replaced with the new <router-link> component
  More info: http://vuejs.org/guide/migration-vue-router.html#v-link

31. Replace route.showInNavbar with route.meta.showInNavbar, then also update the route option to be scoped under meta
  Line 58: src/components/Navbar.vue
  Reason: Arbitrary route properties must now be scoped under the new meta property, to avoid conflicts with future features
  More info: http://vuejs.org/guide/migration-vue-router.html#Arbitrary-Route-Properties

32. Replace attached with a custom in-DOM check in another hook
  Line 63: src/components/Navbar.vue
  Reason: attached lifecycle hook has been removed
  More info: http://vuejs.org/guide/migration.html#attached

33. Rename $index to index and explicity declare it (e.g. v-for="(item, index) in items")
  Line 9: src/components/Pagination.vue
  Reason: $index has been removed to avoid implicitly defined (i.e. "magic") variables
  More info: http://vuejs.org/guide/migration.html#index-and-key

34. Replace ready with mounted, then use Vue.nextTick if you need an in-document guarantee
  Line 32: src/components/Pagination.vue
  Reason: ready lifecycle hook has been removed
  More info: http://vuejs.org/guide/migration.html#ready

35. Replace ready with mounted, then use Vue.nextTick if you need an in-document guarantee
  Line 24: src/components/Select/LimitSelect.vue
  Reason: ready lifecycle hook has been removed
  More info: http://vuejs.org/guide/migration.html#ready

36. Delete twoWay: true, then $emit an event from the child component to trigger an update to the prop in the parent
  Line 14: src/components/Select/Select2.vue
  Reason: Two-way prop binding has been removed in favor of more explicit event-driven communication between parent and child
  More info: http://vuejs.org/guide/migration.html#twoWay-Prop-Option

37. Delete twoWay: true, then $emit an event from the child component to trigger an update to the prop in the parent
  Line 15: src/components/Select/Select2.vue
  Reason: Two-way prop binding has been removed in favor of more explicit event-driven communication between parent and child
  More info: http://vuejs.org/guide/migration.html#twoWay-Prop-Option

38. Replace attached with a custom in-DOM check in another hook
  Line 30: src/components/Select/Select2.vue
  Reason: attached lifecycle hook has been removed
  More info: http://vuejs.org/guide/migration.html#attached

39. Replace init with beforeCreate
  Line 46: src/components/Select/Select2.vue
  Reason: init lifecycle hook has been removed
  More info: http://vuejs.org/guide/migration.html#init

40. Replace subRoutes with children and update its routes to the new array syntax
  Line 4: src/components/Sidebar/index.vue
  Reason: subRoutes has been renamed to children for consistency within Vue and with other routing libraries
  More info: http://vuejs.org/guide/migration-vue-router.html#subRoutes

41. Rename $index to index and explicity declare it (e.g. v-for="(item, index) in items")
  Line 5: src/components/Sidebar/index.vue
  Reason: $index has been removed to avoid implicitly defined (i.e. "magic") variables
  More info: http://vuejs.org/guide/migration.html#index-and-key

42. Replace route.title with route.meta.title, then also update the route option to be scoped under meta
  Line 9: src/components/Sidebar/index.vue
  Reason: Arbitrary route properties must now be scoped under the new meta property, to avoid conflicts with future features
  More info: http://vuejs.org/guide/migration-vue-router.html#Arbitrary-Route-Properties

43. Rename $index to index and explicity declare it (e.g. v-for="(item, index) in items")
  Line 12: src/components/Sidebar/index.vue
  Reason: $index has been removed to avoid implicitly defined (i.e. "magic") variables
  More info: http://vuejs.org/guide/migration.html#index-and-key

44. Replace subRoutes with children and update its routes to the new array syntax
  Line 13: src/components/Sidebar/index.vue
  Reason: subRoutes has been renamed to children for consistency within Vue and with other routing libraries
  More info: http://vuejs.org/guide/migration-vue-router.html#subRoutes

45. Replace route.showInSidebar with route.meta.showInSidebar, then also update the route option to be scoped under meta  Line 37: src/components/Sidebar/index.vue
  Reason: Arbitrary route properties must now be scoped under the new meta property, to avoid conflicts with future features
  More info: http://vuejs.org/guide/migration-vue-router.html#Arbitrary-Route-Properties

46. Replace attached with a custom in-DOM check in another hook
  Line 44: src/components/Sidebar/index.vue
  Reason: attached lifecycle hook has been removed
  More info: http://vuejs.org/guide/migration.html#attached

47. Replace v-link="vlinkContent" with the new <router-link> component (see link below for details)
  Line 4: src/components/Sidebar/Link.vue
  Reason: The v-link directive has been replaced with the new <router-link> component
  More info: http://vuejs.org/guide/migration-vue-router.html#v-link

48. Replace attached with a custom in-DOM check in another hook
  Line 33: src/components/Sidebar/Link.vue
  Reason: attached lifecycle hook has been removed
  More info: http://vuejs.org/guide/migration.html#attached

49. Remove the hashbang option
  Line 10: src/routes/index.js
  Reason: Hashbangs are no longer required for Google to crawl a URL, so they are no longer the default (or even an option) for the hash strategy
  More info: http://vuejs.org/guide/migration-vue-router.html#hashbang-false

50. Replace history: true with mode: 'history'
  Line 11: src/routes/index.js
  Reason: All router modes (e.g. history, hash, abstract) are now set through the new mode option
  More info: http://vuejs.org/guide/migration-vue-router.html#history-true

51. Replace saveScrollPosition with the new scrollBehavior option, which takes a function (see the link below for examples)
  Line 12: src/routes/index.js
  Reason: The binary nature of saveScrollPosition wasn't sufficient for many use cases, but the new scrollBehavior option allows scroll behavior to be fully customized
  More info: http://vuejs.org/guide/migration-vue-router.html#saveScrollPosition

52. Remove the transitionOnLoad option
  Line 13: src/routes/index.js
  Reason: This option is no longer necessary now that Vue's transition system has explicit appear transition control
  More info: http://vuejs.org/guide/migration-vue-router.html#transitionOnLoad

53. Remove the suppressTransitionError option
  Line 15: src/routes/index.js
  Reason: Removed due to hooks simplification - if you really must suppress transition errors, you can use JavaScript's try-catch instead
  More info: http://vuejs.org/guide/migration-vue-router.html#suppressTransitionError

54. Replace router.map with an array on the new routes option (see link below for details)
  Line 18: src/routes/index.js
  Reason: Routes are now defined as an array on a routes option at router instantiation
  More info: http://vuejs.org/guide/migration-vue-router.html#router-map

55. Replace router.alias with an alias option in a route definition (see link below for details)
  Line 19: src/routes/index.js
  Reason: Aliases have been moved to an option on route definitions to improve config organization
  More info: http://vuejs.org/guide/migration-vue-router.html#router-alias

56. Replace router.start with router: router on your root Vue instance (see link below for details)
  Line 24: src/routes/index.js
  Reason: Starting an app with routing no longer requires a special method - the router can simply be passed to the root Vue instance as option
  More info: http://vuejs.org/guide/migration-vue-router.html#router-start

57. Replace init with beforeCreate
  Line 8: src/routes/map/index.js
  Reason: init lifecycle hook has been removed
  More info: http://vuejs.org/guide/migration.html#init

58. Replace v-link="{ path: '/redirect', query: { dest: '/xxx' } }" with the new <router-link> component (see link below for details)
  Line 22: src/routes/map/index.js
  Reason: The v-link directive has been replaced with the new <router-link> component
  More info: http://vuejs.org/guide/migration-vue-router.html#v-link

59. Replace v-link="`/redirect?dest=/xxx`" with the new <router-link> component (see link below for details)
  Line 23: src/routes/map/index.js
  Reason: The v-link directive has been replaced with the new <router-link> component
  More info: http://vuejs.org/guide/migration-vue-router.html#v-link

60. Replace router.go with router.push
  Line 24: src/routes/map/index.js
  Reason: For consistency with the HTML5 History API, router.go is now only used for back/forward navigation, while router.push is used to navigate to a specific page
  More info: http://vuejs.org/guide/migration-vue-router.html#router-go

61. Replace init with beforeCreate
  Line 27: src/routes/map/index.js
  Reason: init lifecycle hook has been removed
  More info: http://vuejs.org/guide/migration.html#init

62. Replace subRoutes with children and update its routes to the new array syntax
  Line 14: src/routes/map/msg.js
  Reason: subRoutes has been renamed to children for consistency within Vue and with other routing libraries
  More info: http://vuejs.org/guide/migration-vue-router.html#subRoutes

63. Replace init with beforeCreate
  Line 8: src/views/auth/logout.vue
  Reason: init lifecycle hook has been removed
  More info: http://vuejs.org/guide/migration.html#init

64. Update v-el:addon to ref="addon"
  Line 3: src/views/msg/_components/AuthorSelect.vue
  Reason: v-el and v-ref merged into ref attribute
  More info: http://vuejs.org/guide/migration.html#v-el-and-v-ref

65. Replace :models.sync="authors$" with :models="authors$", then $emit an event from the child component to trigger an update to authors$ in the parent
  Line 10: src/views/msg/_components/AuthorSelect.vue
  Reason: v-bind.sync and v-bind.once have removed to enforce one-way down props, leaving side effects to more explicit component events
  More info: http://vuejs.org/guide/migration.html#v-bind-with-once-and-sync-Modifiers

66. Replace attached with a custom in-DOM check in another hook
  Line 32: src/views/msg/_components/AuthorSelect.vue
  Reason: attached lifecycle hook has been removed
  More info: http://vuejs.org/guide/migration.html#attached

67. Update this.$els.addon to this.$refs.addon
  Line 33: src/views/msg/_components/AuthorSelect.vue
  Reason: v-el and v-ref merged into ref attribute
  More info: http://vuejs.org/guide/migration.html#v-el-and-v-ref

68. Replace ready with mounted, then use Vue.nextTick if you need an in-document guarantee
  Line 35: src/views/msg/_components/AuthorSelect.vue
  Reason: ready lifecycle hook has been removed
  More info: http://vuejs.org/guide/migration.html#ready

69. Delete twoWay: true, then $emit an event from the child component to trigger an update to the prop in the parent
  Line 32: src/views/msg/_components/MsgForm.vue
  Reason: Two-way prop binding has been removed in favor of more explicit event-driven communication between parent and child
  More info: http://vuejs.org/guide/migration.html#twoWay-Prop-Option

70. Replace v-link="`/msg/update/${msg.id}`" with the new <router-link> component (see link below for details)
  Line 5: src/views/msg/_components/OptBtnGroup.vue
  Reason: The v-link directive has been replaced with the new <router-link> component
  More info: http://vuejs.org/guide/migration-vue-router.html#v-link

71. Replace this.$dispatch('REFETCH_LIST') to use a global event bus or vuex (see link below for implementation details)  Line 52: src/views/msg/_components/OptBtnGroup.vue
  Reason: $dispatch and $broadcast have been removed because the pattern doesn't scale well
  More info: http://vuejs.org/guide/migration.html#dispatch-and-broadcast

72. Replace activate with beforeRouteEnter in the component
  Line 5: src/views/msg/_mixins/autoLoadByParams.js
  Reason: The activate router lifecycle hook has been removed
  More info: http://vuejs.org/guide/migration-vue-router.html#activate

73. Replace :msg.sync="msg" with :msg="msg", then $emit an event from the child component to trigger an update to msg in the parent
  Line 3: src/views/msg/add.vue
  Reason: v-bind.sync and v-bind.once have removed to enforce one-way down props, leaving side effects to more explicit component events
  More info: http://vuejs.org/guide/migration.html#v-bind-with-once-and-sync-Modifiers

74. Replace v-link="`/msg?authors=${msg.author}`" with the new <router-link> component (see link below for details)
  Line 10: src/views/msg/detail.vue
  Reason: The v-link directive has been replaced with the new <router-link> component
  More info: http://vuejs.org/guide/migration-vue-router.html#v-link

75. Replace transition="fade" attribute with either a <transition name="fade"> or <transition-group name="fade"> wrapper component
  Line 5: src/views/msg/index.vue
  Reason: The new and improved transition system requires use of new <transition> and <transition-group> components
  More info: http://vuejs.org/guide/migration.html#transition-Attribute

76. Replace v-link="`/msg/add`" with the new <router-link> component (see link below for details)
  Line 8: src/views/msg/list.vue
  Reason: The v-link directive has been replaced with the new <router-link> component
  More info: http://vuejs.org/guide/migration-vue-router.html#v-link

77. Update track-by="id" to v-bind:key="msg.id"
  Line 21: src/views/msg/list.vue
  Reason: track-by has been replaced by the key attribute, which conforms with language used by other libraries and behaves the same as other attributes
  More info: http://vuejs.org/guide/migration.html#track-by

78. Replace v-link="`/msg/detail/${msg.id}`" with the new <router-link> component (see link below for details)
  Line 23: src/views/msg/list.vue
  Reason: The v-link directive has been replaced with the new <router-link> component
  More info: http://vuejs.org/guide/migration-vue-router.html#v-link

79. Replace v-link="{ path: '/msg', query: { authors: msg.author } }" with the new <router-link> component (see link below for details)
  Line 27: src/views/msg/list.vue
  Reason: The v-link directive has been replaced with the new <router-link> component
  More info: http://vuejs.org/guide/migration-vue-router.html#v-link

80. Replace cutLongText 20 with cutLongText(20)
  Line 36: src/views/msg/list.vue
  Reason: Filters with arguments must now use the same syntax as JavaScript functions
  More info: http://vuejs.org/guide/migration.html#Filter-Argument-Syntax

81. Replace v-link="`/msg/detail/${msg.id}`" with the new <router-link> component (see link below for details)
  Line 39: src/views/msg/list.vue
  Reason: The v-link directive has been replaced with the new <router-link> component
  More info: http://vuejs.org/guide/migration-vue-router.html#v-link

82. Replace :msg.sync="msg" with :msg="msg", then $emit an event from the child component to trigger an update to msg in the parent
  Line 3: src/views/msg/update.vue
  Reason: v-bind.sync and v-bind.once have removed to enforce one-way down props, leaving side effects to more explicit component events
  More info: http://vuejs.org/guide/migration.html#v-bind-with-once-and-sync-Modifiers

83. Replace init with beforeCreate
  Line 17: static/plugins/jquery.ajax.loading.js
  Reason: init lifecycle hook has been removed
  More info: http://vuejs.org/guide/migration.html#init

84. Replace route.queri with route.meta.queri, then also update the route option to be scoped under meta
  Line 1: docs/_book/search_index.json
  Reason: Arbitrary route properties must now be scoped under the new meta property, to avoid conflicts with future features
  More info: http://vuejs.org/guide/migration-vue-router.html#Arbitrary-Route-Properties

85. Replace route.queri with route.meta.queri, then also update the route option to be scoped under meta
  Line 1: docs/_book/zh-cn/search_index.json
  Reason: Arbitrary route properties must now be scoped under the new meta property, to avoid conflicts with future features
  More info: http://vuejs.org/guide/migration-vue-router.html#Arbitrary-Route-Properties
kenberkeley commented 4 years ago

https://cli.vuejs.org/zh/guide/installation.html

duod4o commented 4 years ago

https://cli.vuejs.org/zh/guide/installation.html

经测试,并没有什么用,主要是因为monaco editor依赖的webpack版本比较高,而本项目使用的是远古时代的wp版本,导致二者无法调和

kenberkeley commented 4 years ago

我的意思是,请使用 Vue CLI 新建一个项目,不要使用本古老项目。。。