vue-cli的使用

前端韭菜

于 2019-12-07 09:22:32 发布

阅读量204

点赞数

分类专栏： vue 文章标签：前端 vue

本文链接：https://blog.youkuaiyun.com/qq_36483750/article/details/103432205

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何使用Vue CLI 3.x及2.x版本搭建项目，包括安装流程、项目启动命令，并针对2.x版本提供了具体操作指南。同时，文章还探讨了解决组件模板中出现的根元素错误问题，提供了一种实用的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-cli的使用

安装

具体安装过程详见官网，官网是基于3.x版本以上的，2.x版本的vue安装过程自行度娘
搭建一个项目，3.x版本以上的vue详情见官网，2.x版本的构建一个工程首先需要初始化基于webpack的vue项目：
```
    vue init webpack my-project
```
之后按照提示 cd 到my-project文件夹，运行
```

npm run dev

npm start serve
```

关于组件模板应仅包含一个根元素。如果在多个元素上使用v-if，请改为使用v-else-if链接它们的错误。

‘ Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. ’

解决方法：在组件外部下添加一个div,如下代码

    <template>
          <div>
            <Header @save="handleSaveClick"></Header>
            <div class="contain">
              <Navigation></Navigation>
            </div>
          </div>
    </template>