一、CLI 的介绍
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
- 通过 @vue/cli 实现的交互式的项目脚手架。
- 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
- 一个运行时依赖 (@vue/cli-service)，该依赖：
①可升级；
②基于 webpack 构建，并带有合理的默认配置；
③可以通过项目内的配置文件进行配置；
④可以通过插件进行扩展。 - 一个丰富的官方插件集合，集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。
官方文档：https://cli.vuejs.org/zh/
二、安装
使用下列任一方法进行包的安装:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
注意：安装cli包 本地必须要有node环境和npm（yarn，cnpm）工具（npm是node环境里面的包管理工具）
安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。
查看版本：
vue --version
升级
如果需要升级全局的vue cli包，就运行
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
三、基本使用
1、创建项目
单击右键打开终端（终端配置文件为cmd）
vue create demo //demo 为项目名
注意：项目名不能有中文和大写字母
点击回车后会出现以下选项（选择Default ([Vue 2] babel, eslint) ）
image.png
image.png
编辑器中的空文件夹会变成一个完整的文件夹
node_model：包（项目依赖）
public：静态目录
src：代码目录
assets：静态资源目录（整个项目中的图片，样式，以及字体图标）
components：组件目录
App.vue：全局组件
main.js：入口文件
.gitignore：git的忽略文件
babel.config.js：作为 ES6转ES5的转化工具
package-lock.json：npm的包的详情文件（可删除（不删除的优势：））
package.json：包的描述文件（包括包的包名、版本、调试脚本、依赖（生产依赖和开发依赖），不可删除）
README.md：项目文档
image.png
2、使用示例
在components文件夹中添加组件文件
（1）父子组件传值
定义一个Child 组件
<template>
<div class="child">
{{title}}
<hr style="margin:10px 0">
<p>车名：<input type="text" v-model="car.name"></p>
<p>车价：<input type="text" v-model="car.price"></p>
<hr style="margin:10px 0">
<p>飞机名称：<input type="text" v-model="myplaneName"></p>
<p>飞机价格：<input type="text" v-model="myplanePrice"></p>
</div>
</template>
<script>
// 每个组件其实就是一个导出的默认对象
export default {
name:'Child',
props:['car','planeName','planePrice'],
// 注意：组件里面的data一定要是一个方法，由方法返回一个对象
data() {
return {
title:'我是Child组件',
// 中转父组件传递过来的值
myplaneName:this.planeName,
myplanePrice:this.planePrice
}
},
watch:{
myplaneName(val){
this.$emit('updatapName',val)
},
myplanePrice(val){
this.$emit('updatapPrice',val)
},
}
}
</script>
<style>
.child{
border: 1px solid red;
padding: 10px;
}
</style>
在App.vue全局组件中使用子组件Child
<template>
<div id="app">
{{ title }}
<p>汽车信息：{{car}}</p>
<p>飞机信息：{{planeName}}--{{planePrice}}</p>
<hr style="margin-top:10px;border:none">
<!-- 3、使用组件 -->
<Child :car="car" :planeName="planeName" :planePrice="planePrice" @updatapName="planeName=$event" @updatapPrice="planePrice=$event"></Child>
</div>
</template>
<script>
// xxx.vue是vue的单文件组件
// 每个vue的单文件组件由三和部分组成：template里面方式模板内容，script里面放置js代码，style里面放置样式
// 使用组件的步骤
// 1、导入
import Child from './components/Child.vue'
export default {
// name选项定义组件的名称
name: 'App',
// data选项定义组件的数据
data() {
return {
title:'欢迎学习vue-cli!',
car:{
name:'奔驰',
price:'50w'
},
planeName:'波音747',
planePrice:'10Y'
}
},
// 2、注册组件
components:{
Child,
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#app {
margin: 10px;
padding: 10px;
border: 1px solid #eee;
}
</style>
image.png
(2) 第三方组件ElementUI
定义一个ElementUI组件
<template>
<div class="el">
<h4>ElementUI</h4>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "Element",
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
};
</script>
<style>
.el {
border: 1px solid green;
padding: 10px;
}
</style>
在App.vue全局组件中使用定义的子组件
<template>
<div id="app">
<Element></Element>
</div>
</template>
<script>
// xxx.vue是vue的单文件组件
// 每个vue的单文件组件由三和部分组成：template里面方式模板内容，script里面放置js代码，style里面放置样式
// 使用组件的步骤
// 1、导入
import Element from './components/Element.vue'
export default {
// name选项定义组件的名称
name: 'App',
// data选项定义组件的数据
data() {
return {
},
// 2、注册组件
components:{
Element,
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#app {
margin: 10px;
padding: 10px;
border: 1px solid #eee;
}
</style>
image.png
更多使用可参考官方文档：
