技術棧：Vue-cli , vux , axios , vue-loader , webpack
項目基本架構 - Vue-cli
1、vue.js 提供一個官方命令行工具痴怨，可以用于快速搭建大型單頁應用浪藻。
2乾翔、安裝命令
vue init webpack my-project001 //創(chuàng)建一個基于webpack模板的新項目，可以用vue init webpack-simple my-project001 (該模板的的webpack配置更為簡單)
npm install //注意此處不能用cnpm末融，避免部分依賴丟失
npm run build //該命令的配置信息在webpack文件中勾习，打包之后可以將打包后得到的文件放到服務器，與后端結合
3乾颁、淘寶鏡像安裝方法
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
Vue 全家桶
vue-router , vux , vue-loader , awesome-vue
$ npm install vue-router vue-resource vuex --save
安裝vue全家桶艺栈，然后引入到項目中來湿右。修改src/main.js 文件
import Vue from 'vue';
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import App from './App.vue'
Vue.use(VueResource);
Vue.use(VueRouter);
Vue.use(Vux);
new Vue({
el:'#app',
render : h=>h(App)
});
學習資源：
vue.js中文論壇：https://forum.vuejs.org/c/chinese
vue.js討論組：https://gitter.im/vuejs/vue
Docs for this template ：http://vuejs-templates.github.io/webpack/
vue全家桶：vue-router: https://router.vuejs.org/zh-cn/
vue-loader: https://vue-loader.vuejs.org/zh-cn/
awesome-vue: https://github.com/vuejs/awesome-vue
安裝vux -- 一個基于vue的weui框架
$ npm install vux --save
配置webpack.base.conf.js：
安裝 axios
$ npm install axios --save
在引用axios的文件中配置：【在tool/ajax定義調(diào)用接口的方法時設置】
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
rem適配
在index.html中獲取屏幕寬高，結合設計稿進行計算尖殃，搞定rem與px的轉換
手機端適配插件
- amfe-flexible： 可伸縮布局方案（淘寶送丰，網(wǎng)易都在用）
- postcss-pxtorem ： 提供不同參數(shù)設置來轉換css中的px弛秋，rootValue用來定義轉化時根元素的值
-
autoprefixer: 自動加瀏覽器前綴
image.png
關于elementui 的一些組件使用
el-table 限制某些行可選蟹略，某些不可選
<!--selectable 是一個函數(shù)，返回可以選中的行-->
<el-table :data="list" size="mini" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" :selectable="checkSelectable"></el-table-column>
</el-table>
methods: {
checkSelectable(row) {
return row.received_status == 0
},
}
在table中使用radio壁畸，選中一行的時候radio選中
<!--radio 作為唯一選中值
:label的綁定屬性為:label="scope.row.id"捏萍，采用每條項目唯一的標識值
handleSelRow的方法使用this.radio = row.id來選中單選按鈕
-->
<el-table :data="list" size="mini" @row-click="handleSelRow">
<el-table-column label="" width="50">
<template slot-scope="scope">
<el-radio v-model="radio" :label="scope.row.id">
<span></span>
</el-radio>
</template>
</el-table-column>
<el-table-column prop="activity_name" label="活動名稱"></el-table-column>
<el-table-column label="活動時間">
<template slot-scope="scope">
<span v-if="scope.row.long_term && scope.row.long_term == 1">長期有效</span>
<span v-else>{{scope.row.begin_time ? dateFn(scope.row.begin_time) : '--'}} ~ {{ scope.row.end_time ? dateFn(scope.row.end_time) : '--'}}</span>
</template>
</el-table-column>
</el-table>
// 選中某一行
handleSelRow(row){
this.radio = row.id
this.$emit('complete', row)
}
