跑動一個vue項目的完整步驟（寫給自己的新手指南）

一、配置vue環境

這里可以參見別人寫好的一篇，個人感覺非常詳盡https://www.jianshu.com/p/4f744c935e1c

值得注意的是在配置項目的名稱以及一些相關屬性的時候，以下兩項要特別注意

Projectname這里設置的名稱會在項目的title中展示，如果你后來重新設置了title也會先展示它，但這里似乎不可以使用中文，目前還沒有找到好的解決辦法所以先用loading代替

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

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

當你跑完一系列步驟的時候我們就需要利用cil腳手架安裝插件了，這里我選擇了安裝jq和mint（mint為UI樣式，后面vue已經不維護它了，所以嘗試一下新的ui框架吧）

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啦