一、全局安装vue-cli
打开Vue-Cli官网，找到安装界面，复制安装包的代码。再Windows+R打开电脑终端，输入cmd，粘贴安装指令。
Vue-Cli官网：https://cli.vuejs.org/zh/guide/installation.html
可以使用下列任一命令安装这个新的包：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。
你还可以用这个命令来检查其版本是否正确：
vue --version
如需升级全局的 Vue CLI 包，请运行：
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
二、创建项目
1、在文件夹中打开终端，创建文件名为demo的项目。注意：要在cmd环境下安装
在当前文件目录中输入以下代码
vue create demo
2、创建成功后
在package.json文件中，可以看见有生产环境依赖（dependencies: 可以参与项目打包）和开发环境依赖（devDependencies:不能参与项目打包）
components文件夹中可以存放组件，App.vue是全局组件，main.js是入口文件。
注意：xxx.vue是vue的单文件组件。每个vue的单文件组件由3个部分组成，template里面放置模板内容，script里面放置js代码，style里面放置样式。
main.js文件中写入以下代码
//导入vue
import Vue from 'vue'
//导入app组件
import App from './App.vue'
//不显示生产提示
Vue.config.productionTip = false
//创建vue实例
new Vue({
//render是渲染函数
render: h => h(App),
}).$mount('#app')
在开发环境中运行可以在当前终端文件目录里输入以下代码
npm run serve
执行完成后，会出现以下界面，点击任何一条网址并按住Ctrl键来运行项目。
image.png
在开发环境中打包可以在当前文件目录里输入以下代码
npm run build
在components文件中创建一个新的组件Child.vue。注意：组件名称一般开头大写。在组件里写入以下代码。
<template>
<div class="child">
<h3>{{title}}</h3>
<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 black;
padding: 10px;
}
hr{
margin: 10px 0;
}
</style>
在全局组建中引入、注册、使用子组件。
template>
<div id="app">
<h2>{{title}}</h2>
<p>汽车信息：{{car}}</p>
<p>飞机信息：{{planeName}}--{{planePrice}}</p>
<Child :car='car' :planeName='planeName' :planePrice='planePrice' @updatePName='planeName=$event' @updatePPrice='planePrice=$event'></Child>
</div>
</template>
<script>
//xxx.vue是vue的单文件组件
//每个vue的单文件组件由3个部分组成，template里面放置模板内容，script里面放置js代码，style里面放置样式。
//导入其他组件的步骤：
//1.导入组件
import Child from './components/Child.vue'
export default {
//name选项定义组件的名称
name: 'App',
//data选项定义组件的数据。
data(){
return {
title:'好好学习，争取拿高薪！！！',
//定义一辆车的信息
car:{
name:'奔驰',
price:'30W'
},
//飞机信息
planeName:'波音747',
planePrice:'2000W'
}
},
//2.注册组件
components:{
Child
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#app {
border: 1px solid blue;
padding: 10px;
}
</style>
在components文件夹里在创建一个新的子组件Element-UI组件。首先需要重新开启一个终端，并在当前demo文件目录里安装Element-UI包。
Element-UI官网地址：https://element.eleme.cn/#/zh-CN/component/installation
npm i element-ui -S
在 main.js 中写入以下内容：
//导入Element-UI组件库
import ElementUI from 'element-ui';
//导入Element-UI组件库的样式
import 'element-ui/lib/theme-chalk/index.css';
//由于Element-UI组件库是插件，所以必须要use
Vue.use(ElementUI);
在Element.vue文件里面可以直接从官网上复制代码来使用。
<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
:page-size="20"
:pager-count="11"
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: 1px solid red;
margin: 10px 0;
padding: 10px;
}
</style>
在全局组件中导入、注册、使用Element-UI子组件。
<template>
<div id="app">
<Element></Element>
</div>
</template>
<script>
import Element from './components/Element.vue'
export default {
//name选项定义组件的名称
name: 'App',
//2.注册组件
components:{
Element,
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#app {
border: 1px solid blue;
padding: 10px;
}
</style>
在components文件夹里再创建一个新的子组件Charts组件。首先需要重新开启一个终端，并在当前demo文件目录里安装 ECharts包。
ECharts官方地址：https://echarts.apache.org/zh/index.html
npm install echarts --save
注意：为了避免弹出提示语句‘定义但没有使用’，我们需要在package.json文件中，加入以下代码。更改了package.json文件，就一定要退出当前终端（ctrl+C之后 再次运行npm run serve）
"rules": {
"no-unused-vars":"off"
}
在Charts.vue文件中可以写入以下代码。
<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:10
},
{
title:'羊毛衫',
xl:20,
kc:12
},
{
title:'雪纺衫',
xl:36,
kc:22
},
{
title:'裤子',
xl:10,
kc:23
},
{
title:'高跟鞋',
xl:10,
kc:33
},
{
title:'袜子',
xl:20,
kc:30
}
]
}
},
mounted() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 绘制图表
myChart.setOption({
title: {
text: "产品销售信息",
subtext:'2021-12-08'
},
tooltip: {},
legend:{},
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 brown;
padding: 10px;
margin-top: 10px;
}
.charts #main {
width: 500px;
height: 400px;
border: 1px solid green;
}
</style>
在全局组件中引入、注册、使用Charts子组件。
<template>
<div id="app">
<Charts></Charts>
</div>
</template>
<script>
//xxx.vue是vue的单文件组件
//每个vue的单文件组件由3个部分组成，template里面放置模板内容，script里面放置js代码，style里面放置样式。
//导入其他组件的步骤：
//1.导入组件
import Charts from './components/Charts.vue'
export default {
//name选项定义组件的名称
name: 'App',
//2.注册组件
components:{
Charts
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#app {
border: 1px solid blue;
padding: 10px;
}
</style>
