最近vue更新的2.0版本，唉，我是在2.0版本前学习的，现在更新了又要看一遍了，关键是我之前看了3个星期2.0就更新了，vux还没同步更新，导致我用vux时要将vue的版本降回1.x，vue-router也要降回1.0才能使用~~~所以今天就写一个单页的下方tabbar的实例来记录一下吧，也希望各位在用vue全家桶时少点坑吧，当然不是用vux= =…只是仿造而已
这里的demo我会使用vue2.0的simple-template作为脚手架，vue-router版本也是2.0的，如果想使用vux作为组件库的话，大家就降版本吧~哦对了，如果大家正式写项目的话，记得要用vuex，不是开玩笑，我之前写了个简单的单页应用就没用vuex也没用组件库都是手写，然后组件之间的通信各种烦，你能想象一直向上广播事件$boardCast之后，再一直向下分发 $emit的无语吗……到最后自己都乱了，所以不是自己写demo而是开始项目的话还是推荐使用vuex了，用过react的同学的话就知道了，vuex跟redux是一样的~只是一个用于vue，一个用于react而已.
好了，开始构建吧~
Prerequisites: Node.js (>=4.x, 6.x preferred) and Git.
前提当然是装了node且版本已经升级为6.x，在尤大大的vue-cli的使用教程中有说明的，对这里我们是采用自动化构建的方式创建配置模板
首先从零开始，打开打算创建的项目根目录，再打开git的命令行吧~
1、全局安装vue-cli脚手架
npm install -g vue-cli
2、初始化webpack+vue的脚手架模板，这里我是用的简化版模板，不带单元测试的~因为多出来的很多我看不懂……….简化版的我大概能看懂，也是我菜的原因= =…
vue init webpack-simple <project-name> 这里我定个名字就叫test吧
vue init webpack-simple test
3、按照步骤来就好
cd test
npm install 这里会安装babel、vue的加载器等各类依赖,这里要等一会，有点慢
npm run dev 这里跑一下本地文件，看看是否搭建完成，如果出现vue的页面就完毕了
4、安装vue-router与需要的组件库，这里我装一个饿了么的组件库ElementUI吧,地址，因为已经兼容了vue2.0的版本，所以暂时拿来用用吧~官方文档齐全，需要什么自己去看吧，我这里就简单用一点
npm install vue-router npm i element-ui -D
5、记得安装css的加载器，如果你是用less或者sass的话，自己对应装了添加到加载器就好
npm install style-loader css-loader 如果没错的话，你的加载器现在应该是这样的，最后在package.json里面依赖文件要加上element-ui
//package.json "dependencies": { "element-ui": "^1.0.4", "vue": "^2.1.0" } //webpack.config.js module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { // vue-loader options go here } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.css$/, loader: 'style-loader!css-loader' }, {//添上这条规则，这是elementUI要用到的 test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader' }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }
6、分模块，写组件
下面先展示我的文件目录
test dist build.js node_modules … src App.vue discovery.vue index.vue info.vue main.js setting.vue .babelrc .gitignore index.html package.json README.md webpack.config.js
//App.vue（这里仿制vux的下方tabbar写了一个组件,所以有点多，代码有点烂，请原谅） <template> <div> <router-view></router-view> <div @click="select"> <router-link :class="{'selected':indexPage === 'index'}" to="/index"> <img src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_button.png" alt=""> <label>主页</label> </router-link> <router-link :class="{'selected':indexPage === 'info'}" to="/info"> <img src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_msg.png" alt=""> <label>信息</label> </router-link> <router-link :class="{'selected':indexPage === 'discovery'}" to="/discovery"> <img src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_article.png" alt=""> <label>发现</label> </router-link> <router-link :class="{'selected':indexPage === 'setting'}" to="/setting"> <img src="https://o84lhz5xo.qnssl.com/master/src/assets/demo/icon_nav_cell.png" alt=""> <label>设置</label> </router-link> </div> </div> </template> <script> export default { name: 'app', data () { return { radio:'1', indexPage:'index' } }, methods:{ select(event){ function findA(target){ if(target.nodeName != 'A'){ return findA(target.parentNode) } return target; } var modules = findA(event.target).lastElementChild.innerHTML; if(modules == '主页'){ this.indexPage='index'; } else if(modules == '信息'){ this.indexPage='info'; } else if(modules == '发现'){ this.indexPage='discovery'; } else if(modules == '设置'){ this.indexPage='setting'; } } } } </script> <style> html,body{ margin:0; padding:0; } #app { font-family: 'microsoft yahei', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } .tabbar{ position: fixed; bottom:0; display: flex; width:100%; height:55px; flex-direction:row; background: rgba(247,247,250,.9); font-size:12px; } .tabbar:before{ content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #979797; color: #979797; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(.5); transform: scaleY(.5); background-color: white; } .tabbar a{ flex:1; color: #888; } .tabbar a img{ display: block; width:24px; height:24px; margin:3px auto; padding-top:5px; } .selected{ color: #09bb07 !important; } h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { text-decoration: none; } </style>