详解vue+vueRouter+webpack的简单实例
最近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脚手架 2、初始化webpack+vue的脚手架模板,这里我是用的简化版模板,不带单元测试的~因为多出来的很多我看不懂……….简化版的我大概能看懂,也是我菜的原因= =…
3、按照步骤来就好
4、安装vue-router与需要的组件库,这里我装一个饿了么的组件库ElementUI吧,地址,因为已经兼容了vue2.0的版本,所以暂时拿来用用吧~官方文档齐全,需要什么自己去看吧,我这里就简单用一点 5、记得安装css的加载器,如果你是用less或者sass的话,自己对应装了添加到加载器就好 npm install style-loader css-loader 如果没错的话,你的加载器现在应该是这样的,最后在package.json里面依赖文件要加上element-ui 6、分模块,写组件 下面先展示我的文件目录 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 我是主页模块{{msg}}{{msg}}<el-button style="margin-top: 12px;" @click="next">下一步 {{msg}}
import Vue from 'vue'
import Router from 'vue-router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' import App from './App.vue' import index from './index.vue' import info from './info.vue' import discovery from './discovery.vue' import setting from './setting.vue' Vue.use(Router); const router = new Router({ new Vue({ 最后就是webpack的入口文件必然是要改成main.js的,出口文件的文件夹为dist,名字就你自己定了,在index.html里加上就好~具体可以在我的另一篇笔记”初识webpack “中有写过 最后npm run dev 查看效果就ok~如果想改绑定的端口号或者主机号,则在package.json中对应改就好 example: 其中端口号是dev中的 --port 最后给大家展示一下效果图吧~没看过vue-router的同学请自行看文档= =…我这里只是最基础的展示了而已
其实都是一些很简单的代码和组件划分,大家应该看一看就明白的了,最后vux你快更新2.0吧555~不说了我去看vuex了 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |