7.搭建工程

亮哥666
110 阅读3分钟

vue-cli: cli.vuejs.org/zh/

vue-cli

vue-cli是一个脚手架工具，用于搭建vue工程

它内部使用了webpack，并预置了诸多插件（plugin）和加载器（loader），以达到开箱即用的效果

创建新项目命令：vue create 项目名称

除了基本的插件和加载器外，vue-cli还预置了：

  • babel 解决兼容问题
  • webpack-dev-server 启动开发服务器
  • eslint
  • postcss
  • less-loader

SFC

单文件组件，Single File Component，即一个文件就包含了一个组件所需的全部代码，一个.vue文件就是一个SFC.在安装了vetur插件的vscode里面输入defalut,就会自动出现下面的模版

<template>
	<!-- 组件模板代码 -->
</template>

<script>
export default {
  // 组件配置，方法代码
}
</script>

<style>
	/* 组件样式 */
</style>

预编译

当vue-cli进行打包时，会直接把组件中的模板转换为render函数，这叫做模板预编译

这样做的好处在于：

  1. 运行时就不再需要编译模板了，提高了运行效率
  2. 打包结果中不再需要vue的编译代码，减少了打包体积
image-20201111155613940

根据上面的原理，也就是说打包的过程会编译，如果你在.vue中文件中不使用template来写模版，而是直接在export default配置里面按照下面template来写。

image.png

为什么会报错呢？ 是因为运行的时候没有编译器，打包的过程只能把 模版里面的进行编译，而不会将上面那种的进行编译，而最终只有生成render函数才能执行，所以上面报错。

课堂代码讲解

main.js

// 入口文件
import Vue from "vue";
import App from "./App.vue";

new Vue({
  render: (h) => h(App),
}).$mount("#app");

app.vue

<template>
  <div>
    <h1>App组件</h1>
    <Avatar
      url="http://mdrs.yuanjin.tech/FgMwAPYq17So9nwVH44ltDHo7u3c"
      :size="150"
    />
    <Avatar
      url="https://qiheizhiya.oss-cn-shenzhen.aliyuncs.com/image/avatar8.jpg"
      :size="50"
    />
  </div>
</template>

<script>
import Avatar from "./components/Avatar";
export default {
  name: "App", // 如果组件没有在注册的时候指定名字，则使用该名字
  components: {
    Avatar,
  },
};
</script>

1.上面 :size="150" 为什么要这样写而不是 size="150" 写呢，是因为Avatar传入的size是一个数字，而size="150"表示传入的是一个字符串，在v-on里面:后面 ""之间是一个js表达式，所以这里 :size="150"是代表传入的是150这个数字。 :size="'150'" 和 size= "150" 都代表字符串， :size="150"代表数字。

2.这里为什么要有一个name：“app”呢，是因为app这个组件是这样 render: (h) => h(App)显示出来的，没有正常的注册，如果在调试模式可以正常看到这个组件的名称，需要加一个name ："app".

Avatar.vue

<template>
  <img
    class="avatar-img"
    :src="url"
    :style="{
      width: size + 'px',
      height: size + 'px',
    }"
  />
</template>

<script>
export default {
  props: {
    url: {
      type: String, // url属性必须是一个字符串
      required: true, // 属性必传
    },
    size: {
      type: Number,
      default:150,
    },
  },
};
</script>

<style scoped>
/* 带有作用域的样式 */
.avatar-img {
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
</style>
  1. 首先这里有两个需要属性，一个是url，一个大小，其中props有两种写法，一个是数组的方式，一个是对象的方式，这里用的对象的方式。 先说url，如果我想对传入的url类型进行限制，那么就加上type:string,不能传空进行限制的话就是required进行限制。
  2. 由于url size都是来自外部的props的数据，所以这里 v-on来完成，简写成 ：,size可以设置一个默认值，如果不填，就是150，另外对style的写法比较特别，必须传入一个对象，这里用的是下面的写法。
{
      width: size + 'px',
      height: size + 'px',
    }

3.由于为了防止 class类型冲突，这里可以在style里面加一个 scoped，这样vue会将这个类再自动加一特殊的东西，防止重名。

avatar
文章
阅读
粉丝