vue-cli 单组件认识和使用

最新推荐文章于 2024-12-01 21:15:12 发布

ghost_violets

最新推荐文章于 2024-12-01 21:15:12 发布

阅读量256

点赞数 1

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/ghost_violets/article/details/102830007

版权

vue 专栏收录该内容

19 篇文章

订阅专栏

为什么要用 vue 单组件

在使用 vuejs 做开发的时候，为了代码的复用和维护一般我们会把那些公共的代码封装为一个一个的组件，然后供其他的地方进行使用，在最初的封装里面我们都是采用全局封装或者局部封装，但是这种封装有很多的弊端问题：

全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

为了解决这些问题，官方引入一个单文件组件的方式，形成一个 .vue 结尾的文件

vue单组件的内容

在 vue 单组件里包含以下三部分

<template>
    //用于定义页面的组件结构，等价于之前写的组件对象里面的 template 属性
</template>

<script>
    export default {
        //用于定义组件的数据，方法，生命周期函数
    }
</script>

<style scoped>
//定义组件的样式，在标签上加了 scoped 则代表是局部，只为当前这个组件所使用，并且还可以支持 less，sass
/*
	1：默认情况下，组件内的样式是全局的，会把组件的样式放到 public/index.html 页面的 head 中（在标签上加了 scoped 则代表是局部，只为当前这个组件所使用）
	2：现在的前端开发里，引入了 css 预处理语言（less，sass 等），当使用脚手架创建项目时，如果选择了相关的 css 处理语言，则可以在我们的 style 标签里面使用与之对应的语法写预处理语言，但是要在标签上告诉使用的是哪一种(在创建项目的时候使用的是哪个，就引入哪一个)
	<style lang = "less"></style>
*/
</style>

最后需要注意：形成的单文件组件 .vue 文件，浏览器并不能识别，vue-cli 的底层是借助 webpack 这样的构建工具进行转换操作（webpack 这个工具有能力（webpack(gulp) 的能力是借助一个叫做 vue-loader（之前学习gulp的时候里面的plugin）这样的加载器进行完成的。）可以把 .vue 文件转换为浏览器可以识别的 .js文件，然后在这个js文件里面就有我们之前使用 Vue.component() 这种方式写的组件。）

单组件的使用

**vue 单组件必须在 vue-cli 构建的项目里使用，因为只有在这个里面才被翻译**
顺序：main.js ----> 主组件（App.vue） ------> 路由（router）-----> 单组件

1: 先看 main.js

这是我们项目的入口文件，项目从这里开始运行

//1：es6 里面的模块化导入，相当于 require（'vue'）
//模块如果没有使用路径，则代表使用 node_module 下的模块
import Vue from 'vue'

// 2. 导入主组件 a. 路径 ./ 当前文件夹  b. 存在一个后缀 .vue（.vue 是vuejs作者设计出来的这种单组件的方式去管理 vuejs 的组件; 最先学习的组件 全局组件 局部组件 都是在一个文件文件里面）但是现在的单组件就是一个文件就是一个组件，并且每个组件里面的成员都是私有的（如果要给别人使用，则需要导出，体验模块化编程思想）。
import App from './App.vue'

// 3. 导入一个路由
import router from './router'

Vue.config.productionTip = false
//实例化
new Vue({
  router, //注册路由
  //h:创建虚拟 DOM ，将 APP 子组件变成虚拟 DOM ，放在节点上 
  render: h => h(App) //函数的返回值就是渲染的内容
}).$mount('#app')
//$mount('#app'):相当于：el:"#app",定义了作用区域
//#app 在 public 里的 index.html 里，当程序运行的时候，主组件中的 template 里的内容就会渲染 index.html 里对应的区域

2：然后看主组件：App.vue

App.vue 主组件：完成路由的操作（1：导航 ```````````2：容器）

template 里的内容在运行是会覆盖掉 index.html 上对应的区域

<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>

3：路由的规则（路由表）：route/index.js

定义了路由的规则，访问哪个路由的时候展示那个组件

import Vue from 'vue'

//******1：引入了 vue-router***********
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

//********2：安装插件，专业的术语叫做插件的使用，如果是这样操作后，我们可以在我们的组件内部调用诸如这样的方法： this.$router.push('/home') 函数式编程 函数式导航
Vue.use(VueRouter)

//******3：定义路由的映射关系(路由表)
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    
    //路由的懒加载:component的属性值如果是一个函数，则代表当前的组件的加载模式是使用的懒加载这种模式（也称为按需加载）
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

//******4：实例化路由器
const router = new VueRouter({
  routes
})

// *******5：导出
export default router

`个别代码的解释`

Vue.use(VueRouter)

Vue.use(VueRouter)
//底层是这样的
/**
 Vue.prototype.$router = {
  	push: function(path){
  	},
  	back: function(){
  	},
  	go: function(){
  	}
 }
 new Vue({
  methods: {
    goBack: function(){
      this.$router.push('/home');
      this.__proto__ === Vue.prototype 原型继承
    }
  }
 })
 就是在原型上增加方法
 */

component: () => import(’…/views/About.vue’):路由的懒加载

component: () => import('../views/About.vue')
//路由的懒加载
/*
component的属性值如果是一个函数，则代表当前的组件的加载模式是使用的懒加载这种模式（也称为按需加载），主要的原因是vuejs开发出来的单组件，默认情况下在最后进行打包的时候，会把所有的单文件组件打包到一个.js文件，导致单个js文件过大，因为的 index.html 会加载该js文件，由于js文件过大，导致单页面的首次加载过慢。（加载该js文件的时候，由于js加载会阻塞代码的执行，会导致首次加载页面变的很慢，出现白屏的效果，用户的体验非常的不好，则我们就需要优化，让打包后的js文件应该是尽可能的小，思考这样一个问题，用户去访问这种单页应用的时候，其实第一次只会去看一些基本的信息，其他的信息是需要点击之后才可以加载查看，没必要把所有的组件代码全部打包到一个文件，可以把首次展示的打包成一个单独的文件，然后把其他的各个组件也打包成一个一个 的单独文件。然后用户点击那个路由的时候，就去发送网络请求加载对于的组件的js文件，实现按需加载的效果。）
*/

4：书写对应的单组件

根据路由表里的路径，在对应的文件夹下书写单组件，上面的代码中，单组件是书写在 views 文件夹内的，我们去到 views 问价夹里，新建一个单组件。

<template>
  <div class="about">
    <h1 class="about1">This is an about page</h1>
  </div>
</template>
<style scoped>
  .about1{
    background-color: greenyellow;
  }
</style>