vue小记

1.vuwe不仅可以使用单页面开发也可以进行多页面开发
2.单页面应用即只有一个html文件,切换界面通过切换组件实现
3.多页面应用每一个页面都有对应的html文件,跳转界面是通过常用的window.location这些方式实现的
4.app.vue中的router-view是用来存放组件的,切换组件就是跳转界面都是在这里面切换的,全局只需要一个router-view,

截屏2020-10-10下午5.07.13.png
5.单页面应用中所有的组件都需要在index.js中注册登记.
path属性是访问路径,HelloWorld的设置的为'/'即为根路径http://localhost:8080/就可以访问到该界面,/bottom路径为http://localhost:8080/dong/index.html#/bottom 截屏2020-10-13上午10.32.19.png

6.webpack打包的相关问题
(1)打包时文件中的引用文件的路径设置,注意版本不一样可能配置不一样
在config/index.js文件中有两个配置参数dev和prod两个
dev
assetsSubDirectory:这个参数设置的是编译好的文件存储的位置
assetsPublicPath:设置打包时的路径,就是编译后vue文件或者html文件中引用其他文件的路径,这块dev中不用多管但是在prod环境中需要设置为相对路径
prod
assetsPublicPath:设置为相对路径(./)打包,可以解决访问不到的bug

截屏2020-10-13下午2.01.20.png

(2)代码压缩
如果在未上线前打包方便调试可以选择不压缩代码编译
修改webpack.prod.conf.js里面的内容

截屏2020-10-13下午2.37.20.png 截屏2020-10-13下午2.37.36.png

下面minify中的属性都设为false

截屏2020-10-13下午2.37.57.png

还有一种方式在config/index.js中build属性中修改productionGzipExtensions属性,定义需要被压缩的文件类型,尝试了一下不好使
7.组件嵌套组件使用响应式布局,使用说明
(1)定义一个vue文件,命名为Bottom.vue

<template>
  <div class="bottom">
    底部模板
  </div>
</template>

<script>
export default{

}
</script>

<style>
.bottom{
  width: 100%;
  height: 300px;
  background-color: aqua;
  position: fixed;
  left: 0;
  bottom: 0;
}
</style>

(2)在HelloWorld.vue中引用

<script>
// 引入其他组件,因为bottom作为嵌套的组件所以无需在index.js中的router中注册
import bottom from './Bottom'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  // 将组件命名为mybottom使用
  components: {
    mybottom: bottom
  }
}
</script>

组件的使用

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <!-- 组件嵌套组件 -->
    <mybottom/>
  </div>
</template>

8.父组件调用子组件的方法
(1)以上面的组件的使用为例子说明,在父组件HelloWorld.vue中给子组件mybottom设置ref

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <!-- 组件嵌套组件 -->
    <mybottom ref='webbottom'/>
  </div>
</template>

(2)在父组件中添加点击事件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <!-- 组件嵌套组件 -->
    <mybottom ref='webbottom'/>
    <div @click='invokeSub'>点击调用子组件的方法</div>
  </div>
</template>

(3)在父组件和子组件中的methods分别定义两个方法
父组件中:invokeSub
子组件中:invokeFromSuper

// 父组件
invokeSub () {
  this.$refs.webbottom.invokeFromSuper()
}
// 子组件
invokeFromSuper () {
  console.log('父类调用了子类的方法')
}

9.vue中v-for和v-if不要在一起使用,因为V-for的优先级比v-if的优先级别gao
代码传送门已实现单页面模板和多页面模板主分支为单页面morepage分支为多页面