第一个Vue项目（一个简单vue页面的实现，主要记录Vue设计思想）

最近在实习中学习vue框架，踩的坑无数，犯的错无数。昨天整理遇到过的问题时，发现很多小错都已经忘了或者无法记录下来了，所以还是决定写一写博客来记录一下吧。安装关于开发环境的安装，可以百度google，应该很多。我用的工具之类的列举一下。1.操作系统Windows102.命令行工具gitbash，可以到官网自行下载并安装。3.浏览器当然是Chrome了，如果会 [科学上网] 当然是非...

文章共3,995字 · 阅读需要大约14分钟

一键AI生成摘要，助你高效阅读

问答

SEU_YL

10290人浏览 · 2020-01-15 14:28:20

SEU_YL · 2020-01-15 14:28:20 发布

最近在实习中学习vue框架，踩的坑无数，犯的错无数。昨天整理遇到过的问题时，发现很多小错都已经忘了或者无法记录下来了，所以还是决定写一写博客来记录一下吧。

安装

关于开发环境的安装，可以百度google，应该很多。我用的工具之类的列举一下。

1.操作系统

Windows10

2.命令行工具

gitbash，可以到官网自行下载并安装。

3.浏览器

当然是Chrome了，如果会 [科学上网] 当然是非常方便了。

4.环境

环境的下载和安装就不赘述了，贴一下版本吧（没少因为版本的原因出问题）。

5.编辑器

VSCode，可以去官网自行下载并安装。
另外，最最最最重要的vue插件 vetur
打开 VSCode ，点击左侧最后一个图标菜单，在输入框内输入vetur，完成安装即可，最后重启VSCode。

6.版本管理

前面以及安装了git，现在安装一个图形化的Git操作工具Sourcetree，安装这个这个工具就是个坑，在安装官网的个人版本需要翻墙登录，但是在身份验证跳转之后就没有之后了，一直卡在那里，所以后来就选择了
企业版https://www.sourcetreeapp.com/enterprise，如果无法安装的话参考这个帖子配置一下https://www.cnblogs.com/geekformore/p/10498855.html。

7.初始化项目

进入根目录（一定不要忘了是根目录，血泪的教训）然后初始化
vue init webpack,生成项目在此文件夹下选择y即可。
在这里插入图片描述
项目名称、项目描述可直接按小括号中的键入即可。作者要填对

构建类型选择上面即可

是否需要路由？是

是否需要lint？是

选择lint的模板？选择标准Standard即可

是否加入单元测试？是

选择测试运行器？Jest即可
在这里插入图片描述
是否选择端到端测试？否

选择包管理工具？npm即可

然后会蹦出一大堆，最后到如下图，然后运行即可npm run dev。

运行成功就会出现这样的画面。

安装iView

命令：npm install @idg/iview --save
在这里插入图片描述
引入iView

到这里，基本上环境都算是搭建完成了，项目也初始化完成了，就可以开始进行开发了

Vue文件目录和大致设计思想

在初始化完项目之后进入到一段比较艰难的时间，因为对于项目文件架构的不熟悉和项目运行流程、设计思想不了解，几乎是从头学起，网上的教程也是非常的简短而且不详细，所以一开始并没有什么头绪，所幸最后碰到了一篇博客，对我帮助很大，在这里感谢作者，这篇博客的地址https://blog.csdn.net/zhenzuo_x/article/details/81013475
下面我介绍的也基本上是在这篇博客的基础上进行展开的。

1.文件目录架构

在这里插入图片描述
这个就是vue项目主要的文件目录了，其中比较重要的文件index.html 、App.vue、HelloWorld.vue，理解这三者的关系很重要。

我们可以打开index.html看一下。
在这里插入图片描述
其实index中几乎什么都没有，最主要的就是加载了一个名为app 的vue module，也可以看成是加载了一个组件。
那说到这里我觉得也有必要简单说说我对于vue的理解，其实我觉得vue最显著的就是它把一个网站分为了不同的组件，而页面跳转在这里也就是组件的加载，我觉得这样做的好处就是不同界面的相同部分的组件无需替换只需替换不同的组件，提高了性能，让界面看起来更加的简洁。在这里就不多赘述了，有兴趣可以看看专门研究这个的资料。

接下来看看我们的App.vue文件
在这里插入图片描述
这个文件里也是几乎啥都没有，我们看一下<template>里的，一个div包了一个<img>和<router-view>，我们可以运行一下这个项目看看展示出来的页面是啥样的

根据App.vue，应该可以看出来上面是logo的img，下面那些应该就是<router-view>里的东西了。那<router-view>的东西到底在哪里呢？这涉及到vue的路由跳转，我们可以看一下router文件夹下的index.js文件
在这里插入图片描述
可以看到这里有一条默认的路由路径，意思是说如果在浏览器中打开http://localhost:8080/的话会加载HelloWorld这个组件，那么HelloWorld这个组件在哪里呢，上面有一行import HelloWorld from '@/components/HelloWorld'说明这是components文件夹下的HelloWorld组件，那我们再来看一下HelloWorld.vue这个文件。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

很显然，这个就是我们<router-view>中的组件了，那么看到这里我相信读者应该已经大概了解了vue项目的运行过程了。我上面推荐的那篇博客里有一个小实验可以辅助你理解，这里我就不做了。总结一下，我们最外层的index.html加载了App.vue，而我们的App.vue组件中加载了HelloWorld.vue，这是通过router实现的。

一个利用iView组件写的网页

iview是一个不错的组件库，很方便且也很简单，前面我们已经下载安装了，现在可以使用了，对于新手，可以阅读iView官网来帮助自己熟练使用，一定注意版本，查看相应的官方文档，一般现在的是4.x版本的，但也有较低版本的，要注意！！！

项目架构

在这里插入图片描述
这是我的一个很简单的页面实现的项目架构，可以看到最外面是一个App.vue组件，里面有Home.vue basicForm.vue basicInfo.vue stepForm.vue以及writeInfo.vue confirmInfo.vue complete.vue组件。为了便于理解他们之间的关系，我们可以看一下router文件夹下的index.js文件，看一下路由。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import basicForm from '@/components/basicForm'
import basicInfo from '@/components/basicInfo'
import stepForm from '@/components/stepForm'
import writeInfo from '@/components/stepForm/writeInfo'
import confirmInfo from '@/components/stepForm/confirmInfo'
import complete from '@/components/stepForm/complete'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/basicForm',
      name: 'basicForm',
      component: basicForm
    },
    {
      path: '/basicInfo',
      name: 'basicInfo',
      component: basicInfo
    },
    {
      path: '/stepForm',
      name: 'stepForm',
      component: stepForm,
      children: [
        {
          path: '/',
          name: 'writeInfo',
          component: writeInfo,
        },
        {
          path: '/writeInfo',
          name: 'writeInfo',
          component: writeInfo,
        },
        {
          path: '/confirmInfo',
          name: 'confirmInfo',
          component: confirmInfo,
        },
        {
          path: '/complete',
          name: 'complete',
          component: complete,
        }
      ]
    },
  ]
})

我相信大家看完路由以后应该还是不太明白，不如直接看页面来的清楚。
在这里插入图片描述
先简单介绍一下红色框的部分，红色框的部分是我整个页面的布局，布局是用<Layout>组件实现的，由<Sider> 、 <header>和<Content>组成，蓝色框部分就是<Content>的内容，里面有一个<router-view>，这样就可以根据左边菜单栏的路由跳转加载不同的组件来实现“页面跳转”。

组件间的通信（prop和emit）

看这个之前，可以先看看Vue官网的关于prop和emit的文档，反正我是没看太懂，所以问了老师，下面用我自己能理解的最简单的语言描述。
prop其实就相当于一个接口，是子组件暴露给父组件的接口，如果父组件想传值给子组件，那么往这个接口丢数据就OK了。
emit其实就相当于一个触发函数，当子组件想传值给父组件时就可以通过触发这个函数来将值传给父组件

当然了，这么说只是为了便于大家理解，最重要的还是看代码。

emit的实现

这是我的一个叫做stepForm的组件，它有三个子组件分别为：writeInfo.vue confirmInfo.vue complete.vue 。它的data里有一个currentStep的数据，我希望在加载不同的子组件的时候我的currentStep可以改变，比如加载writeInfo.vue 的时候我希望currentStep的值为0。该怎么做呢？
在这里插入图片描述