vue-cli的组件化开发（上）

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 完成服务器的启动

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享