一、脚手架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-menu
default-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-menu
default-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>