vue項目搭建以及全家桶的使用詳細教程

前言

vue是現階段很流行的前端框架，很多人通過vue官方文檔的學習，對vue的使用都有了一定的瞭解，但再在項目工程化處理的時候，卻發現不知道改怎麼更好的管理自己的項目，如何去引入一些框架以及vue全家桶其他框架的使用，以下將詳細地介紹本人在處理工程文件構建的過程；對於剛開始解除vue的新手，建議使用官方腳手架vue-cli,當然，如果你對於webpack很熟悉，你也可以自己動手搭建自己的腳手架，當然如果你沒把握的話，還是推薦使用vue-cli，能更好的幫助你搭建項目：

步驟一、安裝vue-cli

首先，我們可以通過npm安裝vue-clic,前提是我們需要有node環境，如果電腦還沒安裝node，先安裝，可通過

node -v

查詢node的版本號，有版本號則已經安裝成功；

接下來，我們需要確保電腦已經安裝了webpack，webpack是一個包管理工具，也是vue-cli的構建工具，安裝也很簡單，全局安裝只需要執行

npm install webpack -g

緊接着，開始我們vue-cli的安裝

npm install --global vue-cli

查看是否安裝成功，我們可以通過在cmd中輸入vue -V 查看，如下圖出現版本號則說明安裝已經完成；

我們可以打開c盤>用戶>用戶名>AppData>Roaming>npm查看我們全局安裝的vue-cli,如下圖：

步驟二、構建工程文件

安裝完vue-cli後，我們可以通過在cmd中輸入

vue init webpack projectName

生成webpack腳手架，在我們按下回車的時候，會出現一些提示問題，對應關係如下：

項目名稱（注意名稱中不要出現大寫字母，否則會報錯）
項目描述（可寫可不寫，看個人需要）
作者（可寫可不寫，看個人需要）
vue編譯，這個選默認即可，運行加編譯Runtime + Compiler
是否安裝vue-router是否安裝vue路由工具
是否使用代碼管理工具ESLint管理你的代碼
後面幾個是測試的工具，需要自己自行了解
......

緊接着，我們使用cd squareRoot 移動到文件夾squareRoot下，執行

npm install

初始化項目，安裝package.json 文件中描述的依賴，初始化完成後，我們可以通過

npm run dev

運行我們的項目，這個時候，我們可以打開瀏覽器，輸入http://localhost:8080/，可看到如下界面，說明我們的項目腳手架已經初始化完成；

步驟三、項目結構解析

雖然我們是通過vue-cli生成的項目結構，但還是希望讀者能夠清楚的知道每個文件的作用，這樣對於我們學習該腳手架以及搭建自己的腳手架會有很好的幫助，如下圖，是一級目錄下的文件的作用：

構建相關的代碼主要是放在build文件夾和config文件夾下，包括了開發環境和生產環境，即dev和product,可以打開文件進行閱讀，有接觸過node的小夥伴應該可以很快讀懂對應文件代碼的作用，這裏就不做詳細的介紹了，需要注意的一點是，我們需要修改打包後文件的路徑的時候，可以通過修改config文件夾下的index.js文件，如下圖：

這裏，我們需要在src目錄下新增一個page文件夾，用於存放頁面相關的組件，而components存在的是公共的組件，這樣做有利於我們更好的理解項目：

步驟四、引入UI框架iView

該步驟並不是一定要實現的，實際項目操作中，要根據具體需求而引入對應的UI框架或者不引入，鑑於指導的作用，在此處也做個示範，給與參考，可先閱讀iVew官網學習；
首先，我們應進行iView的安裝，可利用npm包管理工具安裝

npm install iview --save

安裝成功後，我們要將對應的框架引入到項目中，這個時候，官網上有兩種方法可以實現，第一種是直接在main.js中做如下配置：

import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.config.productionTip = false
Vue.use(iView);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

這種方式是一種全局引入的方式，引入後就在具體的頁面或者組件內不需要再進行其他的引入，但缺點是無論是否需要該組件，都將全部引入，對於性能優化不是很好，這裏推薦第二種用法，按需引入，這裏需要藉助插件babel-plugin-import實現按需加載組件，減小文件體積。首先需要安裝，並在.babelrc中配置：

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}

然後這樣按需引入組件，就可以減小體積了，這裏需要注意的是，因爲我們修改了.babelrc文件，這將導致我們第一種引入方法失效了，如果再使用那種方式引入，會導致代碼報錯；

<template>
  <div class="content">
    <div class="title">患者接診</div>
    <div>
      <Button type="primary" shape="circle" class="btn-time">臨時保存</Button>
      <Button type="primary" shape="circle" class="btn-cancel">取消就診</Button>
      <Button type="primary" shape="circle" class="btn-done">完成就診</Button>
    </div>
  </div>
</template>

<script>
  import {Button} from 'iview'
  export default {
    name: "fHeader",
    components:{
      Button
    }
  }
</script>

運行結果如下圖

步驟五、vue-router的使用

如果沒有閱讀過官方文檔，建議大夥先閱讀，官網上的教程已經足夠詳細，受益匪淺；學習的過程中，需要了解路由配置的基本步驟，命名規則，嵌套路由，路由傳參，具名視圖以及路由守衛，滾動行爲和懶加載，這裏我們就不一一詳細介紹了，官網已有，我們這裏是做構建是的配置和懶加載處理：
首先，我們應該是安裝vue-router,這個在我們生成項目的時候，已經將該依賴加載進來了，下一步要做的是在router文件下index.js進行配置：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  },
  routes: [
    {
      path:'/',
      redirect:'/root'
    },
    {
      path: '/root',
      name: 'root',
      components: {
        Left:() => import('@/page/rootLeft.vue'),
        Middle: () =>import('@/page/rootMiddle.vue'),
        Right: ()=>import('@/page/rootRight.vue')
      }

    }

  ]
})

上面的代碼中，我們應用到了幾個知識點，首先是滾動行文，這裏我們配置了當路由跳轉的時候，默認是滾動到（0，0）位置，即頁面開始位置，其次我們用到的redirect是一個路由重定向的配置，接下來，在路由"/root"下，配置了具名視圖，加載對應組件到對應視圖，我們引入組件的方式使用到了箭頭函數，這樣寫的目的是爲了實現路由的懶加載，這樣構建，只有在路由被執行的時候，纔有引入對應的組件，對於頁面性能的優化有很大的幫助；這裏還需要注意的是，我們在引入的這些組件中，其實默認都是打包到一個文件下的，這樣就會導致一次性引入的文件過大，爲此，我們可以利用webapck打包工具，我們在build>webpack.base.conf.js文件下，增加如下代碼，用於配置輸出文件的模塊名稱，[name]是文件的名稱，[chunkhash]是打包文件的哈希值，加上這個是爲了將其作爲版本號，以解決瀏覽器緩存機制帶來的問題：

然後在路由文件中引入組件的代碼如下：

{
      path:"/test",
      name:"test",
      component: ()=>import(/*webpackChunkName:"test"*/'@/page/test.vue')
}

在引入組件的時候，加上/ webapckChunkName: "文件名" /，就這可以將對於的組件打包到指定名稱的文件下，這樣可以減少首次加載的文件的大小，對於一些沒有聯繫的功能，比如不同頁面，我們可以把對應的組件放在同一個文件，這樣，既可以減少首次加載文件達大小，同時也可以將文件實現一個按需加載，提高頁面性能；

通過控制檯，我們可以查看當前加載的文件資源，當我們點擊測試按鈕的時候，頁面發生的跳轉，這時候，我們會發現，在Network下，會加一條新的資源加載信息，這一條就是我們的分塊打包後請求的資源；

步驟六、全局過濾器filter和全局註冊組件的引入

寫到這裏的時候，可能很多人都會覺得，全局註冊filter和全局組件組件不是很簡單嗎，直接Vue.filter()和Vue.component()不久解決了嗎，其實這麼講也沒錯，但是你可曾想過，註冊全組件是掛載在Vue對象下的，這意味這按照正常思路，我們要寫在main.js文件下，這樣就會造成，我們所寫的mian文件過於冗長，你可以想一下，把全局的過濾器，和組件都寫進去，着實醜陋，很不優雅，下面跟大家說一個優雅的實現方法：
首先，我們在src>assets目錄下新建一個js文件夾，再該文件夾下再創建一個filters.js的文件，如下圖：

接下來，我們在filters.js文件下寫我們的全局過濾器，再將其拋出，寫一個時間過濾器作爲例子：

const fullTime = val => {
  var dateObj = new Date(Number(val));
  var year = dateObj.getFullYear();
  var month =
    dateObj.getMonth() + 1 > 9
      ? (dateObj.getMonth() + 1).toString()
      : "0" + (dateObj.getMonth() + 1).toString();
  var date =
    dateObj.getDate() > 9
      ? dateObj.getDate().toString()
      : "0" + dateObj.getDate().toString();
  var hour =
    dateObj.getHours() > 9
      ? dateObj.getHours().toString()
      : "0" + dateObj.getHours().toString();
  var minutes =
    dateObj.getMinutes() > 9
      ? dateObj.getMinutes().toString()
      : "0" + dateObj.getMinutes().toString();

  return year + "/" + month + "/" + date + "  " + hour + ":" + minutes;
};
module.exports={
  fullTime
}

做完這一步，其實我們的過濾器還沒寫完，還需要在main.js中寫一個註冊函數：

import Vue from 'vue'
import App from './App'
import router from './router'
import filters from './assets/js/filters'
import 'iview/dist/styles/iview.css';

Object.keys(filters).forEach(key =>{
  Vue.filter(key,filters[key])
})

Vue.config.productionTip = false

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

這樣，我們就把filters文件下的過濾器函數註冊到Vue全局下，同樣道理，我們可以按照同樣的思路註冊全局組件，我們在src>assets>js下新建一個components.js文件，在其中引入我們想註冊的全局組件，export出一個對象，使用Object.keys獲取後註冊到全局下：

//components.js下
import testInput from '@/components/testInput.vue'

export default{
  testInput:testInput
}

//main.js下
import components from './assets/js/components'

Object.keys(components).forEach(key => {
  Vue.component(key,components[key])
})

優雅的註冊全局組件和全局過濾器已經講完，接下來就是API管理階段了。

步驟七、請求api管理

這裏我們使用axios發起異步的請求，安裝很簡單，npm install axios 即可，一開始的時候，我使用的是直接在每個組件內使用axios,到後面發現，但當我需要修改api接口的時候，需要查找的比較麻煩，只因爲沒有集中的對所有的api進行管理，而且每個請求回來的接口都需要寫對應的報錯處理，着實麻煩，這裏我新建一個fecth文件夾並在其下新建一個api.js用來存放所有的axios處理和封裝，：

//fetch/api.js
import axios from 'axios'

export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params).then(
      response => {
        resolve(response.data)
      }
    ).catch(error => {
      console.log(error)
      reject(error)
    })
  })
}

getDefaultData=()=>{
  return fetch('/api/getBoardList');
}
export default {
  getDefaultData
}

這樣做的好處是集中化的管理了所有的api接口，當我們需要修改接口相關的代碼，只需要在api.js中修改，包括路由修改以及路由攔截等，可讀性更好；在不同的組件內，我們只需要把對應的接口用解構賦值的思想把它引入對應的組件內即可使用。

import {getDefaultData} from '@/fetch/api.js'

步驟八、代理服務器的配置

這個功能主要是我們在調試接口的時候使用，因爲當我們運行npm run dev 的時候，實際上我們的項目已經掛載在一個本地服務端運行了，端口號爲我們配置的8080，當我們想在該項目下訪問服務端接口數據的時候，就會產生跨域的問題，這個時候，我們就需要使用到proxy代理我們的數據請求，在vue-cli中已有配置相關的代碼，我們僅需要把對應的代理規則寫進去即可，這裏以一個通用配置例子實現;
首先，我們在fetch文件夾下新建一個config.js的文件，用於存放我們的代理路徑配置：

const url = 'http://www.dayilb.com/';
let ROOT;
if (process.env.NODE_ENV === 'production') {
  //生產環境下的地址
  ROOT = url;
} else {
  //開發環境下的代理地址，解決本地跨域跨域，配置在config目錄下的index.js dev.proxyTable中
  ROOT = "/"
}

exports.PROXYROOT = url; //代理指向地址
exports.ROOT = ROOT;

接下來，我們要在config目錄下新建一個proxyConfig.js,存放代理服務器的配置規則：

var config= require("../src/fetch/config");
module.exports = {
  proxy: {
    [config.ROOT]: {    //需要代理的接口，一般會加前綴來區分，但我個人是沒加，即‘/’都轉發代理
      target: config.PROXYROOT,  // 接口域名
      changeOrigin: true,  //是否跨域
      pathRewrite: {
        [`^/`]: ''   //需要rewrite的，針對上面的配置，是不需要的
      }
    }
  }
}

最後，我們在config目錄下的index.js文件中，引入我們的代理規則,並在，即

var proxyConfig=require('./proxyConfig')
...//省略號表示省略其他代碼
module.exports = {
...
proxyTable: proxyConfig.proxy,
...
}

重新啓動項目，我們就可以做到代理轉發來實現跨域請求了。

步驟九、vuex狀態管理引入

終於，來到了最後一步，那就是我們的狀態管理vuex，其實這個東西不是說所有項目都需要引入，看項目的具體需求，但需要對同一個數據源進行大量的操作的時候，建議使用，如果每個組件的數據都可以輕易的在data中管理，那其實是沒必要引進去的，該管理工具是更友好的解決了組件間傳值的問題，包括了兄弟組件；
首先，我們需要安裝vuex,老規矩就是

npm install vuex

安裝完成後，我們需要對我們的項目進行一些修改，首先是我們的目錄，我們需要src下新增一個store文件夾作爲vuex數據存放位置，在開始搭建前，我們需要有vuex的相關知識，我就不一一說明，自行百度一下vuex官方文檔；衆所周知，vuex有state,getter,mutation,action等關鍵屬性，state主要是用於存放我們的原始數據結構，類似與vue的data,不過它是全局的，getter類似於計算屬性computed,mutation主要用於觸發修改state的行爲，actions 也是一種觸發動作，只不過與mutation的區別在於異步的操作我們只能在action中進行而不能在mutation中進行，目的是爲了瀏覽器更好的跟蹤state中數據的變化。
接下來，我們來看一下store文件夾中都有什麼：

從上圖可知，我創建了一個index.js入口文件，getters.js,mutation.js和mutationtypes.js,以及actions.js，下面我們先看看index.js的源碼：

import Vue from 'vue'
import Vuex from 'vuex'

import actions from '@/store/actions.js'
import getters from '@/store/getters.js'
import mutations from '@/store/mutations.js'

Vue.use(Vuex)
const state = {
  recipeList:[],
  currRecipe:0
};
if (module.hot) {
  // 使 action 和 mutation 成爲可熱重載模塊
  module.hot.accept(['./mutations'], () => {
    // 獲取更新後的模塊
    // 因爲 babel 6 的模塊編譯格式問題，這裏需要加上 `.default`
    const newMutations = require('./mutations').default;
    // 加載新模塊
    store.hotUpdate({
      mutations: newMutations,
    })
  })
}
export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})

首先，我們把Vuex插件引入vue中，並新建了一個Vuex.Store()對象，其中各項屬性值來自我們前面所創建的文件夾，中間module.hot是配置我們的action和mutation成爲可熱重載的模塊，對於我們的調試更方便，當我們創建爲Vuex.store對象後，我們還需要把它聲明到main.js的頁面Vue對象中

import store from './store/index'

...
new Vue({
  el: '#app',
  router,
  store,
  components: {App},
  template: '<App/>'
})

在使用mutation的時候，我們是推薦大家把所有的行爲常量保存到一個.js文件中，這樣更有利於管理我們的項目，因爲我們的mutation往往是需要使用action進一步封裝的，這樣我們在使用的時候，只需要修改常量對象裏的屬性值，就可以達到同時修改mutation和action的對應關係，一舉兩得，下面舉例給大家參考：

//mutationType.js
export default {
  ADD_NEW_RECIPT:'ADD_NEW_RECIPT',
  CHANGE_CURR_TAB:'CHANGE_CURR_TAB'
}

//mutations.js
import mutationTypes from '@/store/mutationTypes.js'

const mutations = {
    [mutationTypes.ADD_NEW_RECIPT](state, item) {
      state.recipeList.push(item);
    },
    [mutationTypes.CHANGE_CURR_TAB](state, index) {
      state.currRecipe=index;
    }
  }
;
export default mutations

import mutationTypes from '@/store/mutationTypes.js'

const actions = {
  add_new_recipt:({commit,state}, type)=>{
    commit(mutationTypes.ADD_NEW_RECIPT,type);
  },
  change_curr_tab:({commit},index)=>{
    commit(mutationTypes.CHANGE_CURR_TAB,index)
  }
};

export default actions

從上面的例子可以看出，action和mutation使用的是同一個常量表，可以更好的管理我們的修改動作，而不會出現對不上的錯誤；
最後，我們在組件內引入vuex中存放的state和action，如下

import {mapActions, mapState} from 'vuex'
...
computed: {
      ...mapState({
        recipeList: state => state.recipeList,
        currRecipe: state => state.currRecipe
      })
    },
methods: {
      ...mapActions([
        'add_new_recipt',
        'change_curr_tab'
      ]),
      addNewRecipt(type) {
        this.add_new_recipt(type)
      }
    }

這裏是推薦大家按照例子中，使用mapActions和mapState以及利用三點擴展符來引入state 和action，state最好存放在組件的computed 屬性內，這樣當state中的數據發生改變的時候，也會實時的修改computed裏定義的變量值，來實現數據的綁定，同時，當我們修改了某些數據的時候，也要同步到state中去，這樣數據源纔可以保持一致性與準確性；

總結

寫這個的時候，只是給個思路去搭建自己的工程文件，並不是說把所有相關知識點都講一遍，需要有一定的相關知識，不過相信還沒自己搭建過工程文件的小夥伴會不知道如何去安排，可以參考參考，這裏推薦大家安裝chrome的擴展插件Vue.js devtools，可以很有效的幫助我們追蹤數據，定位錯誤。

vue項目搭建以及全家桶的使用詳細教程

前言

步驟一、安裝vue-cli

步驟二、構建工程文件

步驟三、項目結構解析

步驟四、引入UI框架iView

步驟五、vue-router的使用

步驟六、全局過濾器filter和全局註冊組件的引入

步驟七、請求api管理

步驟八、代理服務器的配置

步驟九、vuex狀態管理引入

總結

Python 潮流週刊#50：我最喜歡的 Python 3.13 新特性！

Redux入門篇

vue項目搭建以及全家桶的使用詳細教程

vue下實現input實現圖片上傳，壓縮，拼接以及旋轉

JS實現不重載頁面前提下創建一條歷史紀錄

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結