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-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>