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

最新推荐文章于 2024-03-01 17:05:20 发布

RyleeLouth

最新推荐文章于 2024-03-01 17:05:20 发布

阅读量214

点赞数

本文链接：https://blog.csdn.net/RyleeLouth/article/details/102827862

版权

构建web服务器

在用vue-cli创建了文件夹（myapp）的前提下

cd myapp
yarn serve
然后访问cmd上提示的路径就可以看到一个简单的基于vuejs的项目了

文件分析
在这里插入图片描述
代码分析

mian.js：入口文件

//入口文件
// 导入文件。1，vue。2主组件。3.
import Vue from 'vue'
import App from './App.vue'
//导入路由库
//完整的写法是：./router/index.js,但是如果某个文件名叫做index.js则可以省略不写
import router from './router'

Vue.config.productionTip = false

new Vue({
  //注册路由
  router,
  //h函数是将主组件的东西变成虚拟dom
  //然后render将这个虚拟dom渲染到public文件夹下的index文件下的#app中
  render: h => h(App)
}).$mount('#app')

app.vue:主组件

<!--这是主组件文件-->
<!--完成路由相关操作，1，配置导航，2设置容器-->
<template>
  <div id="app">
    <div id="nav">
      <!--配置导航-->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <!--设置容器，当请求哪一个导航时，会将对应内容放到这里面去-->
    <router-view/>
  </div>
</template>

<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

router/index.js:路由库


//这是路由库
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
//插件的使用
//写了这句话后，可以在组件内部调用如下方法：this.$router.push("./home")这样的编程式路由
Vue.use(VueRouter)

const routes = [
  //  定义路由映射关系
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    //如果component的属性值如果是一个函数，则代表当前的组件加载模式为懒加载模式（也称为按需加载）
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]
//实例化路由
const router = new VueRouter({
  routes
})
//导出路由，此处路由导出到main.js
export default router

Vue.use(VueRouter)底层原理

写了这句话后，可以在组件内部调用如下方法：this.$router.push("./home")这样的编程式路由
相当于给vue的原型上增加了一个$router函数，里面有很多方法，例如

 Vue.prototype.$router={
   push:function(path){},
   back:function(){},
   go:function(){}
 }

在实例对象中就可以使用了

 export default {
   methods:{
     goback(){
       this.$router.push('/')//回到首页
     }
   }
}

懒加载模式

1,什么是懒加载模式
- 如果component的属性值如果是一个函数，则代表当前的组件加载模式为懒加载模式（也称为按需加载）
为什么会出现懒加载模式？
- 主要原因是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>

RyleeLouth

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-cli构建项目---浅析文件

构建web服务器在用vue-cli创建了文件夹（myapp）的前提下cd myappyarn serve然后访问cmd上提示的路径就可以看到一个简单的基于vuejs的项目了代码分析mian.js：入口文件//入口文件// 导入文件。1，vue。2主组件。3.import Vue from 'vue'import App from './App.vue'//导入路由库/...
复制链接

扫一扫