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