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个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
有需要的小伙伴，可以点击下方卡片领取，无偿分享
1984
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
