Vue cli 是一个基于 Vue.js 进行快速开发的完整系统
脚手架是创建大型项目时使用vue-cil
脚手架工具需要全局安装
快捷键：Ctrl+`快速开启终端
Vuc-cil官网
一、安装Vuc-cil
（1）在全局下载安装包
开始->cmd>输入回车
npm install -g @vue/cli
①前提要有node环境和npm
npm是node环境里的包管理工具
检查是否有下载和版本：
npm,yarn,cnpm必须要有一个
node -v
npm -v
yarn -v
cnpm -v
②用这个命令来检查其版本是否正确
vue --version
二、安装好后开始创建项目
（1）右键终端打开，需要检查是否是cmd,如果不是需要更改下设置**
111.png
222.png
（2）在终端输入一下代码创建包
vue create demo
（3）先用上下键选择vue2,后面会出现让你选择用npm做包管理还是yarn请选择npm作为你包的项目管理工具
44.png
四、出现demo文件代表项目已经建好了
（1）public 静态目录 静态资源
（2）src 代码目录。 就是你的开发目录
①assets：静态资源目录。样式、图片字体图标之后都放在assets里面。
②componente：组件。定义组件统一放在componente里面
③APP.vue：是全局文件
④main.js：入口文件
（3）.gitignore git的忽略文件
（4）babel.config.js 做es6转es5,将来是在浏览器中运行的，项目中大量使用，在浏览器环境中无法识别，需要babel做转换，在打包的时候做**
（5）package-lock.json npm包的详情文件，版本位置等，这个文件可删除
（6）package.json 包的描述文件，脚手架创建的项目本身就是一个包，包就有包的描述文件。此包不可以删除。
①项目发给别人的时候，可以删除node_modules，再通过npm i根据这个######②包下载所有依赖。有这个包再次下包会很快。
在包的描述文件里面一定有一个入口文件“mian”:"index.js"
③dependencies 生产依赖，项目打包时候参与打包
④devDependencies 开发依赖 开发项目时候的依赖：eslint做语法检查的。开发项目时依赖这些包，将来上线就不需要了
（7）README.md 项目文档是写如何下包运行等
（8）node_modules 项目依赖**
五、在mian.js页面，主要作用是导入其他组件，也可创建vue实例
（1）实例中也可写方法数据，render是渲染函数
完整写法：
h是个形参
render:function h(){return App}
（2）在脚手架的环境中，每一个组件都是一个文件（每个文件都是组件）
①使用el:'#app'挂在app和$mount可以二选一
②render、template和el都是指定渲染的容器,只是优先级不同。
③先找template模板渲染，没有再找到el，如果有reder函数的话，render函数的优先级更高。
// 导入vue
import Vue from 'vue'
// 导入App组件
import App from './App.vue'
// 导入ElementUI组件库
import ElementUI from 'element-ui';
// 导入ElementUI组件库的样式
import 'element-ui/lib/theme-chalk/index.css';
// 由于ElementUI组件库是插件，所有必须要use
Vue.use(ElementUI);
// 不显示生产提示
Vue.config.productionTip = false
// 创建vue实例
new Vue({
// render是渲染函数
render: h => h(App),
}).$mount('#app')
六、运行
①输入cd demo跳转到创建的项目里
②输入npm run serve在开发环境中运行
③按住ctrl点击蓝色网页，进入网页
vue的脚手架有个开发服务器，只要代码发生变化，一保存就会更新，我们叫热更新
（1）XXX.vue
是vue的单文件组件
1.每个vue的单文件组件由三个部分组成，
①template里面放置模板内容
②script里面放置js代码
③style里面放置样式代码
2.name选项定义组件的名称，data定义组件的数据
export default {
name: 'App',
data(){
return{
}
},
components: {
}
}
七、项目开发成功后，打包上线
（1）脚手架的环境中已经有webpack包，只要输入命令打包：
npm run bulid
（2）打包后多了dist包，它是把src里的代码加上生产依赖打包到里面
最终上线的是打包过后的东西
注意：组件首字符一般都大写
<template>
<div id="app">
<h2>{{title}}</h2>
<p>汽车信息：{{car}}</p>
<p>飞机信息：{{planeName}}-{{planePrice}}</p>
3.使用组件
<Child :car="car" :planeName="planeName" :planePrice="planePrice"
@updatePName="planeName=$event" @updatePPrice="planePrice=$event"></Child>
<Element></Element>
<Charts></Charts>
</div>
</template>
<script>
使用组件的步骤：
1.导入组件
import Child from './components/Child.vue'
import Element from './components/ELement.vue'
import Charts from './components/Charts.vue'
exopt是导入默认对象每个组件就是默认导出的对象
export default {
name选项定义组件的名称
name: 'App',
data选项定义组件的数据,组件里的data必须是一个方法，有方法返回一个对象
data() {
return {
title:'欢迎学习Vue，月薪过万不是梦',
//定义一辆车的信息
car:{
name:'奔驰',
price:'50W'
},
//飞机信息
planeName:'波音747',
planePrice:'10Y'
}
},
2.注册组件
components:{
Child,
Element,
Charts
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#app {
border: 1px solid #eee;
margin: 10px;
padding: 10px;
}
</style>
（3）exopt是导入默认对象
每个组件就是默认导出的对象
使用组件的步骤:
①导入组件
impoet .. for '...'
②注册组件
components:{}
③使用组件
<..></..>**
八、父子组件传值
（1）在当前页面属性能直接使用，在子组件是用
①绑定属性的方式传过去
②在子组件页面接一下使用props:[]
③对象使用v-model双向绑定可以双向修改数据
父组件发送数据
<p>{{car.name}}--{{car.price}}</p>
<p>{{title}}</p>
<child :car="car"></child>
子组件接收并使用
props:['car'],
<p>车名：<input type="text" v-model="car.name"></p>
<p>车价：<input type="text" v-model="car.price"></p>
（2）这种情况的不能改
①不是对象，直接是数据，传给子组件
②普通属性使用v-model不能改，会报错
③解决方法先在data里中转一下，并绑定转后的属性
data() {
return {
title:'我是Child组件',
//中转父组件传递过来的值
myPlaneName : this.planeName,
myPlanePrice : this.planePrice
}
<p>飞机名称：<input type="text" v-model="myPlaneName"></p>
<p>飞机价格：<input type="text" v-model="myPlanePrice"></p>
④再使用侦听器侦听转过后的属性名,通过this.$emit传送改变时val的值过去
watch:{
myPlaneName(val){
this.$emit('updatePName',val)
},
myPlanePrice(val){
this.$emit('updatePPrice',val)
}
⑤最后在父组件页面接收使用属性明等于$event
<child :car="car" :planName="planeName" :planPrice="planePrice" @updatePname="planeName=$event" @updatePprice="planePrice=$event"></child>
个人理解：
和以前一样，只不过是一个组件是一个页面，换了两个组件换成了两个页面
APP.vue在这里担任角色
是作为代码的中转器，所有代码引入这里，再最后它引到入口文件里
因为要保证入口文件的干净
（3）回忆下如果不要双向绑定,只显示父组件数据的写法
<p>车名：<input type="text" :value="car.name"></p>
<p>车价：<input type="text" :value="car.price"></p>
九、快捷键设置
快捷输入template、scrip和style
在设置->用户代码片段->选择Vue.js->在花括号里放入一下代码
下次输入vv2即可，出现快捷代码
"create2": {
"prefix": "vv2",
"body": [
"<template>",
"<div>",
"</div>",
"</template>",
"<script>",
"export default {",
"name:'App'",
"}",
"</script>",
"<style scoped lang='scss'>",
"</style>"
],
"description": "生成Vue2-template"
}
十、去除蒙版提示
55.png
在package.json文件中找到,rules{},并添加里面的内容
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"vue/no-unused-components":"off"
}
},
十一、Element-ui组件库及使用
https://element.eleme.cn/#/zh-CN/component/tabs
1.在浏览器中我们是引入文件,但模块化中需要安装**
npm i element-ui -S
2.使用elment-ui组件库需要在入口文件导入三项
// 导入ElementUI组件库
import ElementUI from 'element-ui';
// 导入ElementUI组件库的样式
import 'element-ui/lib/theme-chalk/index.css';
// 由于ElementUI组件库是插件，所有必须要use
Vue.use(ElementUI);
3.复制粘贴使用
<template>
<div class="el">
<h3>Element-UI组件库</h3>
<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>
<el-pagination background layout="prev, pager, next" :total="1000">
</el-pagination>
</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: green solid 1px;
padding: 10px;
margin-top: 10px;
}
</style>
十二、sweiper 轮播图
十三、echarts安装及使用
https://echarts.apache.org/handbook/zh/basics/download/
（1）安装
npm install echarts --save
（2）在App引入
import Charts from './components/Charts.vue'
（3）在App注册
components: {
Child,Element,Charts
}
（4）使用
（5）在组件页面引入
把echarts里的所有方法和属性导进来并转为 一个对象，echarts名称可以改
import * as echarts from 'echarts';
（6）给echarts准备容器
<template>
<div class="charts">
<h2>我是Charts</h2>
<div class="main">
</div>
</div>
</template>
（7）在mounted里初始化echarts实例，并引入绘制图表内容
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
（8）粘贴使用
<template>
<div class="charts">
<h3>在vue项目中使用ECharts</h3>
<div id="main"></div>
</div>
</template>
<script>
// 导入echarts对象
import * as echarts from "echarts";
export default {
name: "Charts",
data() {
return {
list:[
{
title:'衬衫',
xl:5,
kc:9
},
{
title:'羊毛衫',
xl:20,
kc:19
},
{
title:'雪纺衫',
xl:36,
kc:55
},
{
title:'裤子',
xl:10,
kc:2
},
{
title:'高跟鞋',
xl:10,
kc:5
},
{
title:'袜子',
xl:20,
kc:35
}
]
}
},
mounted() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 绘制图表
myChart.setOption({
title: {
text: "产品销售信息",
subtext:'2021-12-8'
},
legend:{
},
tooltip: {},
xAxis: {
// 获取X轴的数据
data: this.list.map(r=>r.title)
},
yAxis:{},
// 获取系列数据
series: [
// 第一个系列显示销量信息
{
name: "销量",
type: "bar",
data: this.list.map(r=>r.xl)
}
,
// 第二个系列显示库存信息
{
name: "库存",
type: "bar",
data: this.list.map(r=>r.kc)
}
],
});
},
};
</script>
<style>
.charts {
border: 1px solid blue;
padding: 10px;
margin-top: 10px;
}
.charts #main {
width: 500px;
height: 300px;
border: 1px solid red;
}
</style>
十四、普通子组件
<template>
<div class="child">
<h3>{{title}}</h3>
<hr>
<p>车名：<input type="text" v-model="car.name"></p>
<p>车价：<input type="text" v-model="car.price"></p>
<hr>
<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('updatePName',val)
},
myPlanePrice(val){
this.$emit('updatePPrice',val)
}
}
}
</script>
<style>
.child{
border: 1px solid red;
padding: 10px;
}
hr{
margin: 10px 0;
}
</style>
十五、App页面引入、注册、导出及使用
所有组件页面引入APP页面，并创建和使用
<template>
<div id="app">
<h2>{{title}}</h2>
<p>汽车信息：{{car}}</p>
<p>飞机信息：{{planeName}}-{{planePrice}}</p>
<!-- 3.使用组件 -->
<Child :car="car" :planeName="planeName" :planePrice="planePrice"
@updatePName="planeName=$event" @updatePPrice="planePrice=$event"></Child>
<Element></Element>
<Charts></Charts>
</div>
</template>
<script>
// xxx.vue是vue的单文件组件
// 每个vue的单文件组件由三个部分组成：template里面放置模板内容，script里面放置js代码，style里面放置样式
// 使用组件的步骤：
// 1.导入组件
import Child from './components/Child.vue'
import Element from './components/ELement.vue'
import Charts from './components/Charts.vue'
export default {
// name选项定义组件的名称
name: 'App',
// data选项定义组件的数据
data() {
return {
title:'欢迎学习Vue，月薪过万不是梦',
//定义一辆车的信息
car:{
name:'奔驰',
price:'50W'
},
//飞机信息
planeName:'波音747',
planePrice:'10Y'
}
},
// 2.注册组件
components:{
Child,
Element,
Charts
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#app {
border: 1px solid #eee;
margin: 10px;
padding: 10px;
}
</style>
十六 、入口文件
用于引入Vue、App页面、组件库和指定渲染的容器
// 导入vue
import Vue from 'vue'
// 导入App组件
import App from './App.vue'
// 导入ElementUI组件库
import ElementUI from 'element-ui';
// 导入ElementUI组件库的样式
import 'element-ui/lib/theme-chalk/index.css';
// 由于ElementUI组件库是插件，所有必须要use
Vue.use(ElementUI);
// 不显示生产提示
Vue.config.productionTip = false
// 创建vue实例
new Vue({
// render是渲染函数
render: h => h(App),
}).$mount('#app')
