项目执行流程图：

单文件组件的使用：

组件有两种：普通组件、单文件组件

普通组件的缺点：

1. html代码是作为js的字符串进行编写，所以组装和开发的时候不易理解，而且没有高亮效果。
2. 普通组件用在小项目中非常合适，但是复杂的大项目中，如果把更多的组件放在html文件中，那么维护成本就会变得非常昂贵。
3. 普通组件只是整合了js和html，但是css代码被剥离出去了。使用的时候的时候不好处理。

将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用，这种文件的扩展名为“.vue”，比如："Home.vue"。

####

如果使用的是PyCharm这个IDE，需要我们自行下载vue的插件，在配置中找到plugins，然后搜索vue.js，点击下载，下载完成之后重启PyCharm就可以了

初始化项目

删除某些文件 ，删除App.vue组件的默认css样式和一些无用标签，修改vue-router.js文件中的mode模式，创建ShowCenter.vue组件，配置访问路径，介绍ShowCenter.vue文件的结构，补充代码部分等工作，先做出我们的展示中心页面。

main.js：

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

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


<style>
  body{
    padding: 0;
    margin: 0;
  }

</style>

ShowCenter.vue

<template>
    <div class="show_center">
      <h1>展示中心页面</h1>
    </div>
</template>

<script>
    export default {
        name: "ShowCenter"
    }
</script>

<style scoped>

</style>

Src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import ShowCenter from '@/components/ShowCenter'

Vue.use(Router)

export default new Router({
  mode:'history',  // 别忘了改模式
  routes: [
    {
      path: '/',
      name: 'ShowCenter',
      component: ShowCenter
    },

  ],

})

启动项目，终端进入到项目目录下，执行npm run dev

访问http://localhost:8080 就看到了我们的展示中心页面。

调整配置

为了方便开发，我们做一些配置调整

将项目目录下面的config/index.js的配置做如下调整

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    // 修改一下启动时的域名
    host: 'www.hippo.com', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    ...
  }
}

我们现在为前端和后端分别设置两个不同的域名：

ubuntu系统下执行指令，其他系统自行处理啦

sudo vim /etc/hosts                                   

加上如下内容:

127.0.0.1   localhost
127.0.0.1   api.hippo.cn
127.0.0.1   www.hippo.cn

在开发过程中，我们可能经常会在前端使用的某些变量，我们可以添加到某个配置文件中，比如我们在src目录下创建一个settings.js文件

为了方便后面其他组件使用该配置，我们在main.js文件中引入封装一下

import Vue from 'vue'
import App from './App'

import settings from './settings'
Vue.prototype.$settings = settings

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

未完待续。。。 请大家多多关注转发 后续会继续为大家更新更多vue开发干货。