day02前端实训

最新推荐文章于 2024-09-15 00:00:00 发布

夜污岚·蒙雾

最新推荐文章于 2024-09-15 00:00:00 发布

阅读量190

点赞数

文章标签： vue npm

本文链接：https://blog.csdn.net/qq_44709849/article/details/108244818

版权

day02

上午:搭建项目框架

准备工作

一. node，git安装

傻瓜式安装，一路下一步

测试开发环境

//查看node版本
node -v
//查看git版本
git --version

二.cnpm安装

//淘宝的镜像
https://developer.aliyun.com/mirror/NPM?from=tnpm

//cnpm安装 -g表示全局安装 
npm install -g cnpm --registry=https://registry.npm.taobao.org

Readme.md文件中提到使用
cnpm install
会导致各种bug

因此我使用作者推荐的
 npm install
方式安装

三.安装依赖

依赖安装需要进入对应的文件夹，请自行操作。

npm install --registry=https://registry.npm.taobao.org

四.运行项目

npm run dev

五.认识项目结构

在这里插入图片描述

node_modules 项目依赖目录类似于java的库
src 项目目录这个没什么好说的
assets 资源文件夹放置一些静态资源的文件夹
router 定义路由
layout 网页布局
pages 自定义网页（我们自己创建的网页）
store 状态机
util 工具
views 视图
App.vue
package.json 项目配置文件

六.添加自己的页面

在pages文件夹中新建map.vue文件

修改router文件中的index.js文件，添加如下内容

import Map from '../pages/map.vue'

{
    path: '/map',
    component: Layout,
    meta: {title: '全国疫情可视化',icon: 'dashboard'},
    children: [{
      path: 'map',
      name: 'pages/map',
      component: Map,
      meta: {title: '全国疫情地图',icon: 'eye-open'},
    }]
  },

3.启动项目

npm run dev

七.定制页面

1.引入highcharts组件

在public/index.hml页面中添加如下内容

    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>

2.使用highcharts

在pages文件夹下创建real-time.vue

并在template节点中添加如下内容

<div class="real-time">
    
    <div class="first">
      <div>现有确诊</div>
      <div>国内治愈率</div>
      <div id="city-container">确诊病例全国TOP10</div>
    </div>
    
    <div class="second" id="qz-container" style="height:100%;"></div>
    
  </div>

样式

<style scoped>
  .real-time > .first{
    display: flex;
    height: 300px;
    text-align: center;
  }
  .real-time > .first > div{
    flex: 1;
  }
  .real-time > .second {
    height: 200px;
  }
</style>

js需要添加在mounted钩子函数中

var chart = Highcharts.chart('qz-container', {
        chart: {
          type: 'line'
        },
        title: {
          text: '全国新增确诊病例'
        },
        subtitle: {
          text: '数据来源: WorldClimate.com'
        },
        xAxis: {
          categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          title: {
            text: '气温 (°C)'
          }
        },
        plotOptions: {
          line: {
            dataLabels: {
              // 开启数据标签
              enabled: true
            },
            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            enableMouseTracking: false
          }
        },
        series: [{
          name: '东京',
          data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
          name: '伦敦',
          data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
      });