vue脚手架的简单使用

做项目主要在src中

 

Vue中的导入：import xxx from "./xx.vue"

后缀可以省略。

 

创建脚手架的过程中，按ctrl +c 可以退出当前安装。

<style lang=”less”>    用less语法

<style scoped lang=”less”>     这个style样式只应用于当前子组件

Npm run serve          启动你的项目

Npm run build           将你的项目打包

 

 

Ctrl +s热重载

 

 

在我们的脚手架里面，你的组件名不用加“-”号

如何定义如何写，并且支持单标签。

 

我们先来使用一下脚手架，首先创造一个名为Header的组件，如左图所示。

在components中创建

 

 

 

 

 

 

 

 

 

 

 

 

 

在组件中编写。然后回到app.vue

 

使用组件的三步：引入-挂载-使用

 

一般而言，在组件名之间写入文字或者内容是不会显示在页面上的

但是slot标签可以解决这个问题

<Header>第一次使用<Header>

<template>

       <div >{{msg}}  <slot></slot></div>

</template>

 

这样就可以显示组件名中的内容了。