Vue+Webpack開發
轉載自:https://www.talkingcoder.com/article/6309726065044556372
寫在前面
本文為系列文章,總共分四節,建議按順序閱讀:
《Vue+Webpack開發可複用的單頁面富應用教程(配置篇)》
《Vue+Webpack開發可複用的單頁面富應用教程(元件篇)》
《Vue+Webpack開發可複用的單頁面富應用教程(技巧篇)》
注意要點
- 開發儘量使用ES2015,遵循CommonJS規範
- 切勿直接操作DOM,要運算元據
- 儘量使用Vue的語法糖,比如可以用:style代替v-bind:style;用@click代替v-on:click
- 剛開始使用Vue比較容易進入的一個誤區,Vue是以資料驅動的,所以只用關係資料的變化即可,不是萬不得已,千萬不要主動操作DOM;
- 不要在JS裡繫結跟業務相關的事件,業務事件及邏輯,應該在HTML上繫結。在JS裡繫結事件應該用於使用了第三方的外掛等場景,如果主動繫結了事件,記得在相關生命週期接觸繫結以及銷燬相關例項,比如在元件內建立了一個百度echarts,並加了一個定時器來更新資料,在元件銷燬時,應該銷燬這個echarts例項,並將定時器clear;
規範
- 命名。元件名稱(包括路由元件)使用"-"來分割,比如persons-new-poi.vue,不推薦使用駝峰,詳見http://cn.vuejs.org/guide/components.html#資源命名約定
- 事件。在派發和廣播事件時,事件的名稱也使用"-"來分割,而且字首為該元件的名稱,不能使用駝峰 ,例如當前元件為open-layer.vue,則事件名稱為 open-layer-close
資料
不要將HTML的Attributes和Vue的Model混用
比如最終要實現的程式碼是:
<img src=123.jpg>
<a href="index.html?id=123"></a>
<div id="id-123"></div>
比如Vue例項為:
new Vue({
el: 'body',
data: {
id: 123
}
})
錯誤 的使用是:
<img src={{ id }}.jpg>
<a href="index.html?id={{ id }}"></a>
<div id="id-{{ id }}"></div>
正確 的使用是:
<img :src=id + '.jpg'>
<a :href="'index.html?id=' + id"></a>
<div :id="'id-' + id "></div>
class和style的使用
靜態的class放在HTML的class特效內,而動態的應該使用:class,比如
new Vue({
el: 'body',
data: {
list: [
{
name: '《HTML權威指南》',
is_read: 0
},
{
name: '《深入淺出NodeJS》',
is_read: 1
},
]
}
})
<div v-for="item in list" class="book_item" :class="{'off': !item.is_read}"></div>
在元件中使用第三方外掛
比如元件初始化為:
<style>
</style>
<template>
</template>
<script>
import echarts from 'echarts';
export default {
data () {
return {
}
},
ready: {
},
destroyed: {
},
methods: {
}
}
</script>
要建立一個echarts例項,應該在ready裡面完成,但程式碼可能很多而且需要拆分,所以可以在methods裡定義許多方法,最終程式碼如下:
<style></style>
<template>
<div class="chart" v-el:dom-line></div>
</template>
<script>
import echarts from 'echarts';
import $ from 'jquery';
export default {
data () {
return {
chartData: {}
}
},
ready: {
this.getData();
},
beforeDestroy: {
// 銷燬定時器
if (this.chartTimeout) {
clearTimeout(this.chartTimeout);
}
// 銷燬echart例項
if (this.myChart) {
this.myChart.dispose();
}
},
methods: {
initChart () {
if (!this.myChart) {
this.myChart = echarts.init(this.$els.domLine);
}
var option = {
// ...
}
this.myChart.setOption(option);
},
getData() {
var _this = this;
$.ajax({
url: '',
type: 'get',
data: {},
success (data) {
// 每分鐘更新一次資料
_this.data = data;
Vue.nextTick(function() {
_this.initChart();
});
_this.chartTimeout = setTimeout(function() {
_this.getData();
}, 1000 * 60);
}
})
}
}
}
</script>
資源的高度可複用
元件、指令、過濾器
為了使元件、自定義指令、自定義過濾器高度可複用,需要儘可能地將可複用的內容單獨拆離,將 元件 放置在 components 目錄內(如果需要,可以在components目錄內再建立目錄),將 自定義指令 放置在 directives 目錄內(如果需要,可以在directives目錄內再建立目),將自定義過濾器放置在 filters 目錄內(如果需要,可以在filters目錄內再建立目)。使用方法舉例:
<script>
import Picker from '../picker'
import Cell from '../cell'
import Popup from '../popup'
import Flexbox from '../flexbox'
import FlexboxItem from '../flexbox-item'
import array2string from '../../filters/array2String'
import value2name from '../../filters/value2name'
module.exports = {
components: {
Picker,
Cell,
Popup,
Flexbox,
FlexboxItem
},
filters: {
array2string,
value2name
},
data: function() {
return {}
},
methods: {
}
}
</script>
CSS的使用
可將業務型的CSS程式碼單獨寫一個css檔案,比如首頁,index.css,放置在 styles 目錄內(如果需要,可以在styles目錄內再建立目錄),在使用index.css的元件內,使用@import引入css,,對於區域性的css,可以在style上增加scoped,舉例:
<style scoped>
@import('reset.css');
@import('index.css');
h1{
color: red;
}
</style>
<template>
<h1>title</h1>
</template>
<script>
</script>
功能型的css,建議和元件一起,不推薦拆離,比如一個通用的confirm確認框。相關文章
- 關於vue+webpack開發時讓人無語的坑VueWeb
- 一套vue+webpack下,如何開發多個專案VueWeb
- vue+webpack打造todo應用VueWeb
- Vue+webpack搭建自己的腳手架VueWeb
- vue+webpack 從入門到精通(二)VueWeb
- vue+webpack 從入門到精通(基礎篇)VueWeb
- vue+webpack專案中px2rem的例子VueWebREM
- vue+webpack繞過QQ音樂介面對host的驗證VueWeb
- 從零開始:一個正式的vue+webpack專案的目錄結構是怎麼形成的VueWeb
- vue+webpack搭建單檔案應用和多檔案應用webpack.conVueWeb
- 採用 vue+webpack 構建的單頁應用——私人部落格 MintloG 誕生記VueWeb
- 敏捷開發--Scrum開發模型敏捷Scrum模型
- 多端開發之uniapp開發appAPP
- 軟體開發:app軟體開發,pc端軟體開發,微商城/小程式開發APP
- 原生開發、H5開發和混合開發的區別H5
- 淺談軟體開發模型之瀑布開發和敏捷開發模型敏捷
- 開發
- 軟體開發新模式:敏捷開發模式敏捷
- Flutter開發之Flutter外掛開發Flutter
- 即拼商城APP開發(開發APP)APP
- python開發例項-python開發案例Python
- CXF開發及與Spring整合開發Spring
- 教育app開發需要開發哪些功能APP
- [新手開發記錄] 從測試開始開發
- 軟體開發流變史:從瀑布開發到敏捷開發再到DevOps敏捷dev
- 物聯網【專案開發】開源系統開發
- Weex開發之路(一):開發環境搭建開發環境
- 玩轉iOS開發《建立CocoaPods開發庫》iOS
- DAPP開發流程 | DAPP智慧合約開發APP
- zigbee開發,低功耗,通訊加密開發加密
- Java開發和Android開發的區別JavaAndroid
- Hardhat 開發框架 - Solidity開發教程連載框架Solid
- 教育直播系統開發APP開發(需求)APP
- Flutter開發入門之開發環境搭建(VSCode搭建Flutter開發環境)Flutter開發環境VSCode
- 敏捷開發敏捷
- 開發日常
- QT開發QT
- DAPP開發APP
- golang開發Golang