• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

跑通一篇博客代码假装自己会Vue

互联网 diligentman 3小时前 2次浏览

本文是《跑通一篇博客代码假装自己会Java》的母亲篇,Vue是目前比较流行的前端框架。博主本人在两个月前对Java一窍不通,发配帝都出差一个月后,对Java,包括前端和后端都稍有熟悉。这篇博文主要介绍Vue的快速入门。

前端说得更准确是web前端,一般包括HTML、CSS、Javascript三个部分。其中,HTML负责网页内容的搭建;CSS负责调整HTML中的元素属性,让他们更好看;Javascript负责业务逻辑。严格来说,Javascript算是一种计算机语言,HTML和CSS只能算是一种格式。Vue最简单、最主要的用法就是连接HTML和Javascript,通过Javascript,动态调整HTML。

首先本文目标是入门Vue,做一个最简单的系统Demo。功能是通过选择左侧不同的菜单项,实现不同页面的切换。

跑通一篇博客代码假装自己会Vue

1.首先,安装webstorm:WebStorm: The Smartest JavaScript IDE, by JetBrains

2.然后,安装Node.js:下载 | Node.js (nodejs.org),本文安装路径 D:Program Filesnodejs(Node.js强制管理员模式安装,所以后面的所有操作都在管理员模式下操作)

3.安装Node.js后,验证npm能不能用,这玩意和python的pip差不多,用来管理包的。找不到npm命令就把 D:Program Filesnodejs加到环境变量。

4.给npm设置个墙外代理:npm config set registry https://registry.npm.taobao.org

5.下载Vue的框架:npm install -g vue-cli

6.新建一个vue工程:vue init webpack vue_test

– Project name:vue_test(这是文件名)

– Project desc…:(随便)

– Auther:(随便)

– Vue build:Runtime + Compiler

– Install vue-rooter:No

– Use ESLint:No

– set up unit tests: No

– setup e2e tests…:No

– Should we run…:Yes,use NPM

生成的vue项目如图所示:

跑通一篇博客代码假装自己会Vue

7.用webstorm打开这个项目,给项目添加配置环境:

先 跑通一篇博客代码假装自己会Vue ,然后 跑通一篇博客代码假装自己会Vue,选择npm,然后如下图配置,路径改成自己的Node.js安装路径。

跑通一篇博客代码假装自己会Vue

8.运行,webstorm给出网址,点击网址,出现vue的官方Demo。

跑通一篇博客代码假装自己会Vue

跑通一篇博客代码假装自己会Vue

9.分析一波这个Demo工程。

工程的入口是index.htmlindex.html里面只有一个div,id叫app,对应main.js的vue实例。跑通一篇博客代码假装自己会Vue

vue实例绑定了<App/>这个template,对应App.vue中的template,也就是说,最终显示的是App.vue的内容。

跑通一篇博客代码假装自己会Vue

App.vue的<template>中,div里面只有两个东西,一个是一张图片,一个是另一个页面HelloWorld.vue的内容。 

跑通一篇博客代码假装自己会Vue

HelloWorld.vue的div包括五个标签,刚好对应页面显示的内容。

跑通一篇博客代码假装自己会Vue

大概看一看就能明白,vue文件整合了HTML,CSS,Javascript三个东西,写在一个文件里面。<template>就是HTML,<script>是Javascript,<style>是CSS。

10.加载UI组件库,本文用的element-ui。安装指令:npm i element-ui -S。

然后在main.js加如下代码:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

 11.修改App.vue,让程序运行我们自己的页面。这里我们绑定的是Main.vue。步骤12会建立一个Main.vue文件。

<template>
  <div id="app">
    <Main/>
  </div>
</template>

<script>
import Main from "./components/Main"

export default {
  name: 'App',
  components: {
    Main
  }
}
</script>

<style>
  body {
    margin: 0;
    overflow: hidden;
  }
</style>

12.在components文件夹新建Main.vue文件,代码如下:代码功能主要是通过鼠标选择主页面不同的菜单项,显示不同的子页面。子页面还没做,所以只有不同颜色来区分。

<template>
  <div>
    <div class="header">
      <div id="system-logo"></div>

      <div id="system-label">&nbsp;差 旅 消 费 管 理</div>
      <div id="user-logo"></div>
      <div id="user-name-label">{{userName}}</div>
      <el-button
        id="setting-button"
        type="info"
        icon="el-icon-setting"
        @click="handleClick()"
        circle></el-button>
    </div>

    <div class="body">
      <div class="left-menu">
        <el-menu
          default-active="2-2"
          background-color="#545c64"
          text-color="#fff"
          @open="handleOpen"
          @close="handleClose"
          @select="handleSelect">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>旅程管理</span>
            </template>
            <el-menu-item index="1-1">开始旅程</el-menu-item>
            <el-menu-item index="1-2">消费登记</el-menu-item>
            <el-menu-item index="1-3">结束旅程</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>消费统计</span>
            </template>
            <el-menu-item index="2-1">消费信息</el-menu-item>
            <el-menu-item index="2-2">图表统计</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-info"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item index="3-1">用户管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>

      <div class="right-content">
        <StartJourneyPanel v-if="isShowStartJourneyPanel === true"></StartJourneyPanel>
        <ConsumeRecordPanel v-if="isShowConsumeRecordPanel === true"></ConsumeRecordPanel>
        <EndJourneyPanel v-if="isShowEndJourneyPanel === true"></EndJourneyPanel>
        <ChartStatisticsPanel v-if="isShowChartStatisticsPanel === true"></ChartStatisticsPanel>
        <ConsumeInfoPanel v-if="isShowConsumeInfoPanel === true"></ConsumeInfoPanel>
        <UserManagePanel v-if="isShowUserManagePanel === true"></UserManagePanel>
      </div>

      <div class="setting-panel" v-if="isShowSettingPanel === true">
        <SettingPanel></SettingPanel>
      </div>
    </div>
  </div>
</template>

<script>
    import SettingPanel from "./SettingPanel";
    import StartJourneyPanel from "./JourneyManage/StartJourneyPanel";
    import ConsumeRecordPanel from "./JourneyManage/ConsumeRecordPanel";
    import EndJourneyPanel from "./JourneyManage/EndJourneyPanel";
    import ChartStatisticsPanel from "./ConsumeStatistics/ChartStatisticsPanel";
    import ConsumeInfoPanel from "./ConsumeStatistics/ConsumeInfoPanel";
    import UserManagePanel from "./SystemManage/UserManagePanel";

    export default {
        components: {
            SettingPanel,
            StartJourneyPanel,
            ConsumeRecordPanel,
            EndJourneyPanel,
            ChartStatisticsPanel,
            ConsumeInfoPanel,
            UserManagePanel
        },
        name: "Main",
        data () {
            return {
                userName: "admin",
                isShowSettingPanel: false,
                isShowStartJourneyPanel: false,
                isShowConsumeRecordPanel: false,
                isShowEndJourneyPanel: false,
                isShowConsumeInfoPanel: false,
                isShowChartStatisticsPanel: true,
                isShowUserManagePanel: false
            }
        },

        methods: {
            handleOpen(key, keyPath) {

            },
            handleClose(key, keyPath) {

            },
            handleSelect(key, keyPath) {
                this.isShowSettingPanel=false;
                this.isShowStartJourneyPanel=false;
                this.isShowConsumeRecordPanel=false;
                this.isShowEndJourneyPanel=false;
                this.isShowChartStatisticsPanel=false;
                this.isShowConsumeInfoPanel=false;
                this.isShowUserManagePanel=false;

                switch (keyPath[1]) {
                    case "1-1":
                        this.isShowStartJourneyPanel = true;
                        break;
                    case "1-2":
                        this.isShowConsumeRecordPanel = true;
                        break;
                    case "1-3":
                        this.isShowEndJourneyPanel = true;
                        break;
                    case "2-1":
                        this.isShowConsumeInfoPanel = true;
                        break;
                    case "2-2":
                        this.isShowChartStatisticsPanel = true;
                        break;
                    case "3-1":
                        this.isShowUserManagePanel = true;
                        break;
                }
            },
            handleClick(evt) {
                this.isShowSettingPanel = this.isShowSettingPanel === false?true:false;
            }
        },
    }
</script>

<style scoped>
  .header{
    width: 100%;
    height: calc(10vh);
    background: #6a727a;
  }
  .body{
    width: 100%;
    height: calc(90vh);
    background: #545c64;
  }

  #system-logo{
    position: absolute;
    top: 1.5%;
    left: 1%;
    width: 50px;
    height: 50px;
    background: url("..//assets/system-logo.png");
  }
  #system-label{
    position: absolute;
    top: 2.5%;
    left: 5%;
    font-size: 32px;
    font-family: 华光行楷_CNKI;
    color: white;
  }

  #user-logo{
    position: absolute;
    top: 3.5%;
    left: 85%;
    width: 25px;
    height: 25px;
    background: url("..//assets/user-small.png");
  }

  #user-name-label{
    position: absolute;
    top: 4%;
    left: 87.5%;
    font-size: calc(2.5vh);
    font-family: "Times New Roman";
    color: #ffffff;
  }

  #setting-button{
    position: absolute;
    top: 2%;
    left: 95%;
  }

  .left-menu{
    position: absolute;
    top: calc(10vh);
    left: 0%;
    width: 15%;
    height: calc(90vh);
    padding: 1px;
  }

  .right-content{
    position: absolute;
    top: calc(10vh);
    left: 15%;
    width: 85%;
    height: calc(90vh);
  }

  .setting-panel{
    position: absolute;
    top: 33%;
    left: 33%;
    width: 50%;
    height: 33%;
  }

</style>

13.子页面代码如下:所有子页面都是这个格式,就改了颜色和名字。

跑通一篇博客代码假装自己会Vue

到此,一个简单的Vue程序Demo建立完成。


程序员灯塔
转载请注明原文链接:跑通一篇博客代码假装自己会Vue
喜欢 (0)