一、配置vue環境

值得注意的是在配置專案的名稱以及一些相關屬性的時候，以下兩項要特別注意 Projectname這裡設定的名稱會在專案的title中展示，如果你後來重新設定了title也會先展示它，但這裡似乎不可以使用中文，目前還沒有找到好的解決辦法所以先用loading代替

這個問題找到解決方案了（實在是我太蠢了），直接到最後dist裡面的index.html內改title就好了

ESLing如果選擇yes的話會導致vue專案執行的時候非常嚴格，包括多一個空格它都會報警告，非常討厭，所以選擇no，當然如果你實在不小心選擇了yes也是有辦法的，只需要在webpack.base.conf.js中吧引用ESLing的地方註釋掉就好，見下圖

cnpm install jquery --save
cnpm i mint-ui --save

二、配置路由

安裝完環境之後呢，我們就可以開始碼程式碼了

初次接觸vue實在搞不懂他這個資料夾之間的關係（現在我也不是很明白只是能勉強搭專案），所以這裡先寫一下我現在搭專案的檔案路徑 具體檔案路徑就如上圖，下面我們開始講一下引入iconfont和引入公共部分js

a.引入iconfont

到iconfont的官網上下載樣式，然後把下載好的相關檔案放入資料夾下，最後在app.vue

b.引入公共部分js

在main.js裡面引入檔案路徑，具體如下

c.配置路由

在router/index.js內配置

import Vue from 'vue'
import Router from 'vue-router'
import user from '@/components/user'
import home from '@/components/home'//定義
Vue.use(Router)

//引用
export default new Router({
  routes: [
    {
      path: '/',//'/'是預設的index位置，一開啟專案就是這個頁面
      name: 'home'
 
,
      component: home
    },
    {
      path: '/user',//用ruoter-link跳轉時,to=''，裡面填寫的值
      name: 'user',
      component: user
    },
  ]
})

d.使用元件

在vue中，封裝元件可以節約我們很多程式碼，方便好用。下面寫一個簡單的頂部返回 複製程式碼

//公用放回上一級介面程式碼
<template>
  <div class="commonBack">
    <p>{{title}}</p>
    <em @click="back()" v-if="show">
      <span class="iconfont backicon"></span>
    </em>
  </div>
</template>

<script>
export default {
  name: "commonBack",
  data() {
    return {}
  },
  props: {
    title: {
      type: String,
      default: "頂部名稱"
    },
    show: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    back() {
      this.$router.go(-1);
    }

  }
}

</script>
<style scoped>
  .commonBack {
    width: 100%;
    height: 40px;
    background-color: #6fc8fb;
    line-height: 40px;
    position: fixed;
    z-index: 99999;
    top: 0;
  }

  .commonBack > em {
    position: absolute;
    top: 0;
    left: 10px;
  }

  .commonBack > em > img {
    width: 100%;
    height: 100%;
  }

  .commonBack > p {
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    margin: 0;
  }
</style>

//引用的地方
<!--manage-->
<template>
  <div class="custom">
    <commonBack :title="title"></commonBack>
</template>

<script>
//定義元件名 commonBack
import commonBack from "@/components/commonBack"

export default {
  name: "custom",
//引用
  components: {
    commonBack
  },
  data() {
    return {
      title: '聯絡客服',//設定中間文字內容
    }
  },
  mounted: function () {
  },
  methods: {},
}
</script>

<style scoped></style>

做好了就npm run dev跑動自己的專案吧

三、打包專案以便部署到伺服器

首先我們得先找到下圖中的兩個檔案

然後在上圖中的兩個檔案中分別修改配置如下

完成好以上之後，我們就可以在cmd裡面npm run build

打包好之後呢我們可以看到在專案檔案下多了一個dist檔案，只要把這個dist檔案部署到伺服器就ok啦

好啦就醬了。看到這裡的各位程式設計師們祝您心明眼亮，加班不禿~