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.vue的script中使用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的主要内容,如果未能解决你的问题,请参考以下文章