vue-cli构建项目---浅析文件

为什么会出现懒加载模式？

主要原因是vuejs开发出来的单组件，默认情况下在最后打包时，会把所有的单文件打包到一个.js文件中，导致单个文件过大，因为index.html会加载js文件，由于js文件过大，会导致单页面首次加载很慢，或者出现白屏问题

为什么加载慢？

js加载会阻塞代码的执行

使用懒加载模式优化：

用户去访问这种单页应用的时候，其实第一次只会去看一些基本的信息，其他的信息是需要点击之后才可以加载查看，没必要把所有的组件代码全部打包到一个文件。
• 可以把首次展示的打包成一个单独的文件，然后把其他的各个组件也打包成一个一个 的单独文件。
• 然后用户点击那个路由的时候，就去发送网络请求加载对应的组件的js文件，实现按需加载的效果。

Home.vue首页组件

<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<!--&ndash;这里其实类似于父子通信，通过属性传递，把模型变量给儿子，但是这里的模型变量其实就是固定的一个字符串-->
<!--在子组件的调用处定义一个属性：msg-->
<!--子组件的组件对象里的props定义好调用处已经声明的属性-->
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>

<script>
// @ 是src的别名，代表src的绝对路径
//HelloWorld是一个局部组件
import HelloWorld from '@/components/HelloWorld.vue'
//导出home组件
//其实这里相当于这样导出
// var home={
//   template:``
//   components:{},
//   methods:{}
// }
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>

HelloWorld.vue子组件

<template>
<div class="hello">
<!--这里显示属性msg等于的值（父亲给的模型变量）-->
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
//子组件的组件对象里的props定义好调用处已经声明的属性
props: {
msg: String
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

</style>

创建一个news组件

（1）在App.vue中配置导航

< router-link to="/news">News< /router-link>

（2）router中定义路由映射表，并且按需加载

{
path: '/news',
name: 'news',
component: () => import(/* webpackChunkName: "news" */ '../views/news.vue')
},

（3）views中创建一个文件news.vue组件，

<template>
<div>
<h2>我是新闻页</h2>
<h3>{{ msg }}</h3>
<button @click="fn">点我有惊喜</button>
</div>
</template>

<script>
export default {
name: "news.vue",
data:function(){
return {
msg:'hello news!'
}
},
methods:{
fn:function(){
alert("我是新闻页")
}
},
created() {
console.log('哈哈我还是新闻页的生命周期函数')
}
}
</script>

结果大概长这样

组件的样式要注意：

1，html 里面的 style标签里面写样式是一样， 可以使用 css选择器选中页面的元素，然后在定义css样式
2，默认情况下，组件内部写的 style 是全局的 ，会把组件内部的 style 样式放置在 public/index.html 的head头部里面
3，如果在多个组件里面写的 style 样式，如果不做任何处理的情况下，如果出现了冲突操作，使用的样式的样式，则后面的会覆盖前面的
4，每个组件有自己的样式作用域，当前写的 style 就在当前的组件内部生效就可以了 如果真的有公共的样式要所有的组件全部公用，就写到 App.vue 主组件里面。
5，scoped 翻译过来叫做作用域，代表当前的样式只在当前的组件生效

//声明样式私有
<style scoped>

</style>

预处理语言

如果你的style中的语言是预处理语言，比如less，sass等
就要在style中加入lang=‘less’/lang=‘sass’

<style scoped lang="less">

</style>

• 点赞
• 收藏
• 分享
• 文章举报