在使用Vue.Js过程中遇到的问题记录。

最近公司有项目，让研究Vue.Js做前端，力求打造一套Vue.Js+WebApi+Sql的门户系统。在学习并使用Vue的过程中遇到的问题做一记录

一.Vue.js使用Vue-Router后点击跳转地址栏地址变化但是页面不刷新。

1.首先， <router-view />并不是在App.Vue里面写一次就可以了，需要在有跳转需求的页面也出现。

2.其次，如果出现点击跳转后地址栏调整但是页面停留在当前页面不刷新的情况，检查当前页面是否在data{} 内添加return｛｝。如下。

export default {
		data() {
			return{
				
			}
		},
		components: {
			Index:Index,
			NavHeader: NavHeader,
			NavFooter: NavFooter,
			Search:Search,
			Login:Login,
			Register:Register
		},
		}

3.还有可能是如下这种情况

//4.挂载组件
new Vue({
	el: #app,
	 router,
	 render: h => h(App),  //这个地方是APP，不能是其他的页面
})

二.Vue.Js提示组件未注册的错误

浏览器一直提示这个：组件也加载不出来

Unknown custom element: <page> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

新建了一个header组件，在引入的时候一直提示组件未注册，在网上的答案基本都是需要先引入，并且components内在进行引入，类似这种

import ManageHeader from ./components/ManageHeader.vue
	export default {
		data() {
			 return {
			        active: 0
			      };

		},

		components: {
			AAManageHeader: ManageHeader

		}  ,

但是我都做了，还是没能解决问题，猛然间意识到，是不是我存放的路径的问题，我自己在Src目录下面建立了一个Components文件夹，于是我改了下文件夹的名称，可以正常加载了。问题解决。

后来又遇到了这个问题，上方方法没能解决新出现的问题，后来发现，在页面1跳转到页面2 的过程中，页面1import 和componets内注册的顺序也有关系，应该先注册主页面，然后注册通用组件，例如这样

<script>
	import AddSource from ./AddSource.vue   //先注册这个
	import ManageHeader from ./Until/ManageHeader.vue  //后注册这个
	import ManageFooter from ./Until/ManageFooter.vue
	
	export default {
		data() {
			return {

			}


		},

		components: {
			AddSource:AddSource,  //先注册这个
			ManageHeader: ManageHeader,  //后注册这个，头部
			ManageFooter: ManageFooter,
			
		},
		methods:{
			PushSource(){
				console.log("发布源码")
				this.$router.push(/AddSource)
				
			}
			
		}
	}
</script>

这一点一定要引起重视！！！！！！

三.使用wangEditor富文本编辑器

找了两天的时间，看了很多个富文本插件，总的来说个人感觉wangEditor效果不错，实现起来也简单，本人对前端不是很熟悉，所以只能找实现方便简单的插件。

具体实现方法，网上很多，直接复制黏贴就可以。

说一个问题，由于我对CSS不是很熟练，加上看文档马马虎虎，导致最开始使用wangEditor的时候，出现了一些问题，可能是由于性格或者方法论的问题，以后还是要沉下心来。

四：css作用域问题（目的：使用css只作用于当前页面）

通过下面这个大神的文章解决

Add "scoped" attribute to limit CSS to this component only

这句话大家应该是见多了, 我也使用scoped, 但是使用@import引入外部样式表作用域依然是全局的，看了一遍@import的规则后, 进行初步猜测，难道是@import引入外部样式表错过了scoped style?

又回想到此前看过的前端性能优化文章里面都有提到，在生产环境中不要使用@import引入css，因为在请求到的css中含有@import引入css的话，会发起请求把@import的css引进来，多次请求浪费不必要的资源。

@import并不是引入代码到<style></style>里面，而是发起新的请求获得样式资源，并且没有加scoped

通过添加多个 <style scoped src=""/>标签引入css文件来解决

下一步工作： axios slot