使用HBuilderX-普通项目之vue-cli默认项目开发前端（四）

第四步：学习并记录一些小知识

每走一步都会发现很多知识点不清楚不了解，为了避免再次遗忘，我打算全部记录下来。

一、import文件时@和.的用法和区别

导入文件时引用的是相对路径。

vue中，@ 等价于 src这个目录，@/指src/,可以参考文章《Vue中import引入模块路径时的@符号》；

./指当前目录，../指当前目录的上一级目录。

二、new Vue({ render: h => h(App), }).$mount('#app')的含义 

render: h => h(App)是下面内容的缩写，h来自单词 hyperscript：推荐《关于Vue中的 render: h => h(App) 具体是什么含义？》

render: function (createElement) {
    return createElement(App);
}

new Vue({ render: h => h(App), }).$mount('#app')

还有一种写法，效果是一样的：其中 el选项 使实例立即进入编译过程，等价于显式调用 $mount()手动开启编译。

new Vue({
    el: '#app',
    template: '',
    components: {
        App
    }
})

三、npm时--save、--save-dev、不添加--save的区别

1、--save和不添加--save的区别

--save和不添加--save没有区别，因为现在默认使用--save，不想添加则需要主动--no-save。

--save安装会写入package.json文件中的dependencies列表中。

当我们提交到版本库时不会提交依赖，但是在其它环境部署项目时，都要按照package.json中的依赖列表安装依赖，如果开发时用到一个依赖项，但是没有保存到依赖列表，那么在其它环境部署时就会出错。

2、--save和--save-dev的区别

--save 安装会写入package.json文件中的dependencies列表中，这个列表中的依赖是项目发布后需要用到的依赖。

--save-dev 安装会写入package.json文件中的devDependencies 列表中，这个列表中的依赖是项目开发时需要用到的依赖。

为什么要区分项目开发时和发布时用到的依赖呢？

因为有些依赖在项目开发时需要用到，但是发布后就不需要用到了，没必要把他们放在发布后的项目中占地方，更何况有些依赖真的很大。

如webpack里面的less-loader,只是把less文件处理成浏览器可以识别的css.处理完了之后,你发布产品,就没有用了；

如babel，开发时用来把ES6编译成ES5，打包后，用来发布的代码就是已经编译出来的ES5代码了，发布时自然也不需要这个依赖了，webpack也是，开发时用来打包生成dist文件，发布时直接使用打包好的dist文件，而不再需要这个依赖了。

npm install -d 就是npm install --save-dev

npm insatll -s 就是npm install --save

四、svn或者git提交时忽略node_modules或git

空白处右键>选中TortoiseSVN>设置(settings)>常规设置(General)>Subversion>编辑(edit)>

在弹出的config文件中找global-ignores，复制一行下来，去掉global-ignores前的#。

如果是"文件夹" global-ignores = *node_modules

如果是文件  global-ignores = .project .git

中间用空格隔开，如下图：

五、使用路由懒加载时，标红报错[eslint-js]  parsing-error： unexpencted token import

安装eslint插件：（要想使用vue命令，必须先全局安装vue-cli）

vue add eslint

官网建议在安装eslint前先提交项目，我用的版本管理软件是svn，提交后安装eslint，报错：

Error: EPERM: operation not permitted, open 'E:\HBuilderX\Web\vue-cli-demo\svn\  'svn-base'。

解决办法：改变项目结构，报错时，.svn文件和public、src等文件在同一目录下；将.svn文件和vue-cli-demo这个项目文件放在同一目录下就能正确安装了。

六、vue 中computed、watch和method的区别

computed，以前的名字叫做ready，是在dom加载后马上执行的，如赋值；
methods，必须要有一定的触发条件才能执行，如点击事件；理论上，computed 所有实现可以使用 methods 完全替换。
他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。

计算属性computed的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。

computed最大特点就是缓存，我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

当需要在数据变化时执行异步或开销较大的操作时,watch方式是最有用的。其允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。

参考《vue computed正确使用方式》、《Vue中的computed怎么理解？是如何实现的？》

七、数组setArray和addObjectsFromArray的区别

-setArray：用另一个数组中的所有对象来替换当前数组中的所有对象

-addObjectsFromArray：在原数组最后添加另一个数组的全部对象

八、npm run serve 报错

报错：* ../../mock/0.json in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules /cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/xxx .vue?vue&type=script&lang=js&

解决：/src/views/xxx .vue这个文件中的配置有问题，去检查是不是缺少配置。

九、Vue生命周期中mounted和created的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

如：数据初始化一般放到created里面，这样可以及早发请求获取数据，

如果有依赖dom必须存在的情况，即希望等到整个视图都渲染完毕，就放到mounted(){this.$nextTick(() => { /* code */ })}里面

十、vue 组件间传值之props方法

props--父组件向其内部的子组件传值

在子组件内部定义props属性，如：

export default {
	props: {
		Menus: Array
	},
	data() {}
}

在子组件内部处理父组件传来的值，如：（如果从父组件传来的值不需要处理，则不需要这个步骤）

computed: {
	menus() {
		return this.Menus.filter(item => {
			return item.childrens.length == 0;
		});
	},
},

在父组件内部向子组件传值的形式：

十一、vue-router报错： Uncaught (in promise) NavigationDuplicated

解决办法：禁止全局路由错误处理打印，这个也是vue-router开发者给出的解决方案：

import VueRouter from 'vue-router'

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

把这段代码放在引入vue-router之后就行，一般在main.js里，如果你的路由单独抽取出来了，那可能在其他的路由文件中。

十二、监听页面宽度变化，设置页面显示模式

方法一：使用mounted()函数和window.onresize函数

data() {
	return {
		isPhone:false,
		winWidth: document.documentElement.clientWidth, // 网页可见区域宽，随着窗口缩放而变动
	};
},
mounted() {
	//mounted只会挂载一次，意味着其他组件中不能再出现mounted函数了
	// this.$nextTick(function() {//等到整个视图都渲染完毕再执行
	this.isPhone = this.winWidth > 1000 ? false : true;
	window.onresize = () => {
		//监听页面宽度变化
		return (() => {
			this.winWidth = document.documentElement.clientWidth;
			this.isPhone = this.winWidth > 1000 ? false : true;
		})();
	};
	// });
},

缺陷：mounted()函数一个html页面只能挂载一次，一个html页面中有多个组件，这些组件中都可以写mounted()函数，但只会执行最后加载的组件中的mounted()函数。

推荐采用方法二：使用window.removeEventListener('resize', this.handleResize)

created() {
	window.addEventListener('resize', this.handleResize);
},
beforeDestroy: function() {
	window.removeEventListener('resize', this.handleResize);
},
computed: {
	isPhone() {
		return this.winWidth > 991 ? false : true; //根据屏幕宽度动态设置显示模式
	}
},
methods: {
	handleResize() {
		this.winWidth = document.documentElement.clientWidth;
	}
}

documentElement 对应的是 html 标签，而 body 对应的是 body 标签。

document.body.clientWidth || document.documentElement.clientWidth兼容所有浏览器。

关于屏幕宽高、浏览器宽高和网页宽高：

1、屏幕宽高是指显示器的分辨率，输入console.log(window.screen.width,window.screen.height)，可以打印看见。

修改系统分辨率会改变屏幕宽高。

2、浏览器宽高是指浏览器窗口最大化时的宽高，普通的最大化后，一般就是去掉系统任务栏高度，而宽度和屏幕宽是一样的。

输入console.log(window.screen.availWidth,window.screen.availHeight)，可以查看浏览器宽高。

3、网页宽高，是指页面所占的宽高，浏览器除了页面内容以外的部分，不计算在内。标签栏，地址栏，书签栏，控制台等全不计算在宽高的范围里面，只有网页内容区域才是。

输入console.log(window.innerHeight,window.innerWidth)可以打印得到。

参考《JS如何获取屏幕、浏览器及网页高度宽度？》

十三、npm run serve 报错 Mixed spaces and tabs  no-mixed-spaces-and-tabs

解决办法：重排代码格式后保存，就不会再报错了。

HbuilderX重排代码格式的快捷键是Ctrl+K，保存的快捷键是Ctrl+S。

十四、关于img图片的宽度设置

max-width:100%   相对于img本身的尺寸而言，最大的宽度为自身宽度

width:100% 相对于父级宽度的