vue-cli 为啥每个组件都要import vue

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-cli 为啥每个组件都要import vue相关的知识,希望对你有一定的参考价值。

参考技术A 一个不错的开头 1 . 首先全局装vue-cli,它是vue的一个脚手架。 cnpm i -g vue-cli1 2 . 然后进入workspace。执行了如下代码,生成vue项目的初始化工作。这里是基于webpack打包。 vue init webpack learnvue1 3 . 引导定制过程中,测试的选项我...本回答被提问者采纳

Vue-cli中的组件

  组件文件位置  

    Vue-cli的组件都写在项目文件夹下的`src`文件夹下的`components`下,每个组件单独一个`.vue`文件。

  基本组件文件结构

   每个组件文件都包含:模版(template)、组件参数、组件样式(style)

// 模版
<template>

</template>
// 组件参数
<script>
export default {
  
};
</script>
// 组件样式
// 在style标签中添加`scoped`,表示该样式只适用于当前组件,如果需要全局适用,则去掉`scoped`即可
<style scoped>

</style>

  在写组件参数时,和在Vue中的写法一样。

  组件文件引用

  1、导入组件文件

  在app.vuescript中使用import语法导入

import 自定义组件名(不一定必须使用vue文件名) from "文件路径";

  2、注册组件

  在app.vue中的`components`中添加刚才自定义的组件名

  1、2两步合起来的示例代码:

 

<script>
import HeaderVue from "./components/header";
export default {
  name: "App",
  components: {
    HeaderVue
  },
};
</script>

 

  3、引用组件

  在app.vue的template中引用组件

<template>
  <div id="app">
    <HeaderVue></HeaderVue>
  </div>
</template>

 

以上是关于vue-cli 为啥每个组件都要import vue的主要内容,如果未能解决你的问题,请参考以下文章

Vue自动化工具(Vue-cli)基础3

Vue自动化工具(Vue-cli)基础3

vue-cli vant组件应用, template应用

vue-cli构建项目中组件的使用

vue-cli脚手架

vue-cli -- vantUI按需加载