VUE学习-脚手架vue cli（六）

一、脚手架vue cli

官网文档：https://cli.vuejs.org/zh/guide/

A）安装vue/cli

1、使用以下命令安装：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

mac因为权限问题，需要在命令前加：sudo

2、查看安装的vue cli的版本：vue -V

3、关于旧版本

Vue CLI 的包名称由 `vue-cli` 改成了 `@vue/cli`。 如果你已经全局安装了旧版本的 `vue-cli` (1.x 或 2.x)，你需要先通过 `npm uninstall vue-cli -g` 或 `yarn global remove vue-cli` 卸载它。

4、Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

5、升级

如需升级全局的 Vue CLI 包，请运行：

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

6、项目依赖

上面列出来的命令是用于升级全局的 Vue CLI。如需升级项目中的 Vue CLI 相关模块（以 @vue/cli-plugin- 或 vue-cli-plugin- 开头），请在项目目录下运行 vue upgrade：

用法： upgrade [options] [plugin-name]（试用）升级 Vue CLI 服务及插件选项：-t, --to <version>    升级 <plugin-name> 到指定的版本-f, --from <version>  跳过本地版本检测，默认插件是从此处指定的版本升级上来-r, --registry <url>  使用指定的 registry 地址安装依赖--all                 升级所有的插件--next                检查插件新版本时，包括 alpha/beta/rc 版本在内-h, --help            输出帮助内容

B）使用脚手架搭建项目结构

1、执行命令

到自己规定的目录下执行命令

vue create vuecli-demo

2、选择Default，回车

3、启动

进入项目路径下，执行:

npm run serve
#或者
yarn serve (前提：已安装yarn)

4、访问

C）使用vscode创建项目

在vscode输入命令：

vue create vuecli-demo

二、基础架构

A）main.js（vue-cli工程入口文件）

//导入vue
import Vue from 'vue'
//导入App.vue组件
import App from './App.vue'//不显示生产提示信息
Vue.config.productionTip = false//创建一个vue实例
new Vue({//利用render函数，渲染App.vue组件到容器中render: h => h(App),//$mount（‘App’）表示挂载一个id为app的容器，等价于el：‘#app’
}).$mount('#app')

B）assets：资源目录

如css （样式）、img（图片）等资源文件

1、在assets下创建css和img文件夹

在css目录下创建common.css文件，并编写一些常用的样式

*{margin: 0;padding: 0;list-style: none;outline: none;
}
a{text-decoration: none;
}
.flex{display: flex;
}
.j-c{justify-content: center;
}
.j-s{justify-content: space-between;
}
.a-c{align-items: center;
}

2、在main.js中引入

在main.js中引入后，在所有的页面都可以使用该css样式

C）App.vue

App.vue是我们的主组件，页面入口文件，所有页面都是在App.vue下进行切换的。
也是整个项目的关键，app.vue负责构建定义及页面组件归集

<template><div id="app"><div class="header">1</div><div class="content flex"><div class="left">2</div><div class="right">3</div></div></div>
</template><script>export default {name: 'App',components: {}
}
</script><style>
#app{widows: 100vm;height: 100vh;display: flex;flex-direction: column;
}
.header{height: 60px;background: lightcoral;
}
.content{flex: 1;
}
.left{width: 200px;background: lightblue;
}
.right{flex:1;background: lightgoldenrodyellow;
}
</style>

展示效果：

D）components

1、components包中是存放组件

在components中创建两个文件，Header.vue和Left.vue，用于编写头部和左侧导航内容（避免App.vue中代码冗余过多）

Header.vue

<template><div>头部导航信息</div>
</template><script>export default {};
</script><style  scoped></style>

Left.vue

<template><div>左侧导航信息</div>
</template><script>export default {};
</script><style  scoped></style>

2、导入组件

在App.vue中导入组件

3、注册组件

4、使用组件

5、代码

<template><div id="app"><div class="header"><Header></Header></div><div class="content flex"><div class="left"><Left></Left></div><div class="right">3</div></div></div>
</template><script>//导入头部组件和左侧组件
import Header from'./components/Header.vue'
import Left from './components/Left.vue'export default {//当前组件名称,可以省略name: 'App',//注册页面中使用的组件components: {Header,Left}
}
</script><style>
#app{widows: 100vm;height: 100vh;display: flex;flex-direction: column;
}
.header{height: 60px;background: lightcoral;
}
.content{flex: 1;
}
.left{width: 200px;background: lightblue;
}
.right{flex:1;background: lightgoldenrodyellow;
}
</style>

6、展示效果

E）补充：禁用eslint

eslint是检测代码的规范性，不会影响代码的运行，但是会有红色的error报错（对新手不友好）

在根目录下创建vue.onfig.js文件，添加如下内容禁用eslint

module.exports = {    lintOnSave: false}

三、Element-ui组件库开发

官方：https://element.eleme.cn/#/zh-CN/component/installation

A）element-ui起步

1、安装

npm i element-ui -S

2、引入element

在main.js中引入

//导入vue
import Vue from 'vue'
//导入App.vue组件
import App from './App.vue'
//引入全局样式
import './assets/css/common.css'
//引入element
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//由于element-ui是一个插件，一定要use
Vue.use(ElementUI);//不显示生产提示信息
Vue.config.productionTip = false//创建一个vue实例
new Vue({//利用render函数，渲染App.vue组件到容器中render: h => h(App),//$mount（‘App’）表示挂载一个id为app的容器，等价于el：‘#app’
}).$mount('#app')

3、使用element-ui组件

Header.vue

<template><div><el-menu:default-active="activeIndex2"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="1">处理中心</el-menu-item><el-submenu index="2"><template slot="title">我的工作台</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项3</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item><el-menu-item index="2-4-2">选项2</el-menu-item><el-menu-item index="2-4-3">选项3</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item></el-menu></div>
</template><script>export default {data() {return {activeIndex2: '1'};},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);}}};
</script><style  scoped>
</style>

Left.vue

<template><div><el-menudefault-active="2"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">导航四</span></el-menu-item></el-menu></div>
</template><script>
export default {methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}
};
</script><style  scoped>
</style>

4、修改后

Header.vue

头部右移，二级导航删除一部分，修改样式

<template><div><div class="nav flex j-s a-c"><div class="logo">橡树后台管理系统</div><el-menu:default-active="activeIndex2"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="1">消息中心</el-menu-item><el-submenu index="2"><template slot="title">我的工作台</template><el-menu-item index="2-1">工作中心</el-menu-item><el-menu-item index="2-2">修改密码</el-menu-item><el-menu-item index="2-3">退出系统</el-menu-item></el-submenu></el-menu></div></div>
</template><script>
export default {data() {return {activeIndex2: "1",};},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);},},
};
</script><style>
.nav{background-color: #545c64;padding: 0 20px;
}
.logo{color: white;font-size: 20px;
}
</style>

Left.vue

简化导航，背景样式

<template><div class="left-nav"><el-menudefault-active="1-1"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>人员管理</span></template><el-menu-item-group><el-menu-item index="1-1">人员信息</el-menu-item><el-menu-item index="1-2">任务安排</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-location"></i><span>资产管理</span></template><el-menu-item-group><el-menu-item index="2-1">PC信息</el-menu-item><el-menu-item index="2-2">主机信息</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-location"></i><span>任务中心</span></template><el-menu-item-group><el-menu-item index="3-1">任务信息</el-menu-item><el-menu-item index="3-2">任务分析</el-menu-item></el-menu-item-group></el-submenu></el-menu></div>
</template><script>
export default {methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},},
};
</script><style>
.left-nav{background-color: #545c64;height: 100%;
}
</style>

B）创建views文件夹

该文件夹用来存放页面视图的组件

1、创建Page1.vue文件

<template><div>1</div>
</template><script>export default {};
</script><style></style>

2、在App.vue中导入，注册

<template><div id="app"><div class="header"><Header></Header></div><div class="content flex"><div class="left"><Left></Left></div><div class="right"><Page1></Page1></div></div></div>
</template><script>//导入头部组件和左侧组件
import Header from'./components/Header.vue'
import Left from './components/Left.vue'
import Page1 from './views/Page1.vue'export default {//当前组件名称name: 'App',//注册页面中使用的组件components: {Header,Left,Page1}
}
</script><style>
#app{widows: 100vm;height: 100vh;display: flex;flex-direction: column;
}
.header{height: 60px;
}
.content{flex: 1;
}
.left{width: 200px
}
.right{flex:1;padding: 10px;
}
</style>

3、编写Page1.vue

<template><div><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item>活动管理</el-breadcrumb-item><el-breadcrumb-item>活动列表</el-breadcrumb-item><el-breadcrumb-item>活动详情</el-breadcrumb-item></el-breadcrumb><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 class="flex j-c"><el-pagination background layout="prev, pager, next" :total="1000"></el-pagination></div></div>
</template><script>
export default {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>
</style>

数据给成“活”数据

需要在created方法里调用后台接口获取数据

<template><div><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item>活动管理</el-breadcrumb-item><el-breadcrumb-item>活动列表</el-breadcrumb-item><el-breadcrumb-item>活动详情</el-breadcrumb-item></el-breadcrumb><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 class="flex j-c"><el-pagination background layout="prev, pager, next" :total="1000"></el-pagination></div></div>
</template><script>
export default {//在该方法中请求数据created() {this.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 弄",},];},data() {return {tableData: [],};},
};
</script><style>
</style>

C）echarts简单使用

1、安装echarts

npm install echarts --save

2、创建Page2.vue，导入echarts

<template><div><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="main" style="width: 600px; height: 400px"></div></div>
</template><script>
//导入echarts
import * as echarts from "echarts";export default {data() {return {myChart:null};},//当vue的生命周期钩子函数，走到mounted时，页面已经渲染完成了mounted() {// 基于准备好的dom，初始化echarts实例this.myChart = echarts.init(document.getElementById("main"));// 绘制图表this.myChart.setOption({title: {text: "ECharts 入门示例",},tooltip: {},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],},yAxis: {},series: [{name: "销量",type: "bar",data: [5, 20, 36, 10, 10, 20],},],});},
};
</script><style>
</style>

3、在App.vue中引入注册使用

<template><div id="app"><div class="header"><Header></Header></div><div class="content flex"><div class="left"><Left></Left></div><div class="right"><Page1></Page1><Page2></Page2></div></div></div>
</template><script>//导入头部组件和左侧组件
import Header from'./components/Header.vue'
import Left from './components/Left.vue'
import Page1 from './views/Page1.vue'
import Page2 from './views/Page2.vue'export default {//当前组件名称name: 'App',//注册页面中使用的组件components: {Header,Left,Page1,Page2}
}
</script><style>
#app{widows: 100vm;height: 100vh;display: flex;flex-direction: column;
}
.header{height: 60px;
}
.content{flex: 1;
}
.left{width: 200px
}
.right{flex:1;padding: 10px;
}
</style>