Vue.js学习记录-10-Vue去哪儿网项目实战：首页开发-Icon + Recommend + Weekend + 细节配置补充

• icons

• <template>
  

• <script>
  

  采用vue-devtools浏览器工具插件查看此部分计算属性详情：
  

• Recommend

• <template>
  

• <script>：通过props获取父组件传递数据，并进行数据类型判断

   	<script>
   	export default {
   	  name: 'HomeRecommend',
   	  props: {
   	    list: Array
   	  }
   	</script>
  

• weekend

• <template>
  

• <script>：通过props获取父组件传递数据，并进行数据类型判断

  	<script>
  	export default {
  	  name: 'HomeWeekend',
  	  props: {
  	    list: Array
  	  }
  	</script>
  

• main.js 资源导入汇总

    移动端300毫秒点击延迟问题
    移动端高分辨率屏幕中的1像素边框问题
  

  入口文件main.js全部内容：
  

• 配置模拟静态json数据不同步到线上代码仓库

  坐标：./gitignore
  

• 通过npm命令下载的依赖均声明在package.json文件中，保存在node_modules文件夹下
  

• 设置常用目录别名

  在项目中很多子组件中都在<style>块中进行了import操作，引入外部的styl文件，这里引出一个常用目录的问题。

  以 @import ‘~styles/mixins.styl’ 为例子：

    src目录简单引用： @ , 在此标签中引用，需要使用 ~ 作为前缀。如：@import '~@/xxx/mixins.styl'
  

  设置styles目录别名，坐标：./build/webpack.base.conf.js，此文件修改后需要重新启动项目，注意。
  

• 最后针对<style>标签内容未涉及是因为针对样式的配置复杂，并且配置方式多种多样，博主在配置样式的是参考教程很多地方也是不能很正确的展示，因此很多地方的样式设置采用了曲线救国的方案。另一个原因，针对rem自适应的样式单位配置学习也在开展，不得不说，这个地方着实水太深。