碼上歡樂
相關內容    簡體    繁體

vue項目實戰

本文轉載自   查看原文   2020-02-09 09:32   601 

本篇文章主要介紹了vue的環境配置,vue項目的目錄結構以及在開發vue項目中問題的一些解決方案。

環境配置及目錄結構

1.安裝node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)
2.基於node.js,利用淘寶npm鏡像安裝相關依賴
在cmd里直接輸入：npm install -g cnpm –registry=https://registry.npm.taobao.org，回車，等待安裝...
3.安裝全局vue-cli腳手架,用於幫助搭建所需的模板框架
在cmd里 1)輸入：cnpm install -g vue-cli，回車，等待安裝…
2).輸入：vue，回車，若出現vue信息說明表示成功
4.創建項目
在cmd里輸入：vue init webpack vue_test(項目文件夾名)，回車，等待一小會兒，依次出現‘git’下的項，可按下圖操作
Alt text
5.安裝依賴
在cmd里 1).輸入：cd vue_test（項目名），回車，進入到具體項目文件夾
2).輸入：cnpm install，回車，等待一小會兒
回到項目文件夾，會發現項目結構里，多了一個node_modules文件夾（該文件里的內容就是之前安裝的依賴）
基於腳手架創建的默認項目結構如下圖所示：
Alt text
6.測試環境是否搭建成功
方法1：在cmd里輸入：cnpm run dev
方法2：在瀏覽里輸入：localhost:8080(默認端口為8080)
運行起來后的效果如下圖所示：
Alt text

項目的目錄結構：
assets：主要放置樣式文件和圖片
components：組件
lib：放置模擬好的數據
router：放置路由信息
store：放置vuex的文件
views：放置所有的單頁面

使用Vuex步驟

1.使用npm安裝：
npm install vuex –save
2.引入vuex插件
創建文件夾store，新建index.js，import Vue和Vuex，Vue的插件引入函數Vue.use()使用Vuex,Vue.use(Vuex)
store/index.js

1
2
3
4
 
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.Store({})

main.js中引入store，在Vue實例中注冊store對象

1
2
3
4
5
6
7
8
9
10
11
12
13
 
import Vue from 'vue'
import App from './App'
import router from './router'

import store from './store'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

3.將狀態映射到組件
store/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.Store({
  state: {
    receiveInfo: [{
      'name': '王某某',
      'phone': '13811111111',
      'areaCode': '010',
      'landLine': '64627856' 大專欄  vue項目實戰;,
      'provinceId': 110000,
      'province': '北京市',
      'cityId': 110100,
      'city': '市轄區',
      'countyId': 110106,
      'county': '海淀區',
      'add': '上地十街輝煌國際西6號樓319室',
      'default': true,
      'checked': true
    }, {
      'name': '李某某',
      'phone': '13811111111',
      'areaCode': '010',
      'landLine': '64627856',
      'provinceId': 110000,
      'province': '北京市',
      'cityId': 110100,
      'city': '市轄區',
      'countyId': 110106,
      'county': '海淀區',
      'add': '上地十街輝煌國際東6號樓350室',
      'default': false,
      'checked': false
    }]
  }
})

組件中修改狀態

1
2
3
4
5
6
7
 
export default {
  computed: {
    receiveInfo: function () {
      return this.$store.state.receiveInfo
    }
  }
}

getters:過濾state數據
mutations:顯式的更改state里的數據

vue中關於props和$emit的用法

1.父組件可以使用props把數據傳給子組件
props是父組件用來傳遞數據的一個自定義屬性。父組件的數據需要通過props把數據傳遞給子組件，子組件需要顯示地用props選項聲明props
父組件

1
 
<address-pop v-if="popShow" @close="closePop" :oldReceive="oldReceive"></address-pop>

子組件

1
2
3
4
5
6
7
8
 
props: {
  oldReceive: {
    type: Object
  },
  receiveIndex: {
    type: Number
  }
}

2.子組件可以使用$emit觸發父組件的自定義事件
父組件定義了一個close事件，在子組件中直接通過this.$emit(‘close’)調用父組件中的close方法
父組件

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<address-pop v-if="popShow" @close="closePop" :oldReceive="oldReceive"></address-pop>
<script>
import addressPop from '@/components/address-pop'
export default {
components: {
  addressPop
},
methods: {
  closePop: function () {
    this.popShow = false
  }
}
}

子組件

1
2
3
4
5
6
7
 
<span class="dialog-close" @click="closePop">x</span>
export default {
methods: {
  closePop: function () {
  this.$emit('close')
}
}


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 9個實戰Vue開發項目 Vue 項目實戰系列 （二） vue之TodoMVC項目實戰 從 0 到 1 實戰項目Vue3 vue項目構建與實戰 vue 項目實戰 (入門) Vue 項目實戰系列 （一） Vue 項目實戰系列 （三） vue+elementUI項目實戰1 從無到有構建vue實戰項目（三）
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM