vue-cli 的简介

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 实现的交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

上面是vue-cli官网的简介，接下来我带着大家来做一个简单的组件化的vue-cli的小demo

vue-cli项目的创建

首先我们要有环境

打开cmd

输入 npm install -g @vue/cli

等待一段时间下载完毕

输入 vue --version

输入 vue create components-demo

创建一个components-demo 的项目

接下来进入命令行

这里我们先选择第三个

这里我们可以通过空格来选中需要添加的配置，再摁一次空格可以取消添加的配置

这个小demo的配置如下

接下来我们选择2的版本

这里我们选择Less

这里我们选择 In pakeage.json

最后是否保存可以选择N(No)

接下来我们等待一段时间，等着项目创建完毕。

App.vue部分的代码

src目录下有一个App.vue文件，接下来我们将生成的代码全部删掉。

<templete></templete>

这个标签某种程度上可以在这里直接写一些html代码，经过main.js可以将其渲染到index.html中，这里我们在<templete></templete>中写的html代码会替换到index.html中指定的div中去，有一点要注意:<templete></templete>里只能有一个唯一的根节点!!!!如果想写多个放进去可以用一个<div></div>来整体包裹。

<style></style>这里可以写css样式

我们装了 Less 这里我们还可以通过

<style lang="Less">
</style>

来启动Less。

<script></script>

最后这里则可以写一些js代码。

组件化的创建

我们在components中创建一个up.vue的文件

up.vue部分的代码

<template>
    <div class="leftStyle">
        {{updata}}
    </div>
  </template>
  
  <style lang="less">
    .leftStyle {
        width: 300px;
        height: 300px;
        background-color: greenyellow;
    }
  </style>
  
  <script>
    export default {
        data(){
            return {
                updata:"这是上组件"
            }
        }
    }
  </script>

组件的注册

App.vue部分的代码

<template>
  
</template>

<style lang="less">

</style>

<script>
import { up } from "@/components/up.vue";
export default {
  components:{
    up
  }
}
</script>

我们通过import { up } from "@/components/up.vue";引入组件

再通过

components:{
    up
  }

完成组件的注册。

接下来我们就可以把up当成html标签来在template中使用了

在控制台输入 npm run serve 完成服务器的启动