vue仿手机新闻站: 1.拿到静态页面,直接用vue边布局,边写 2.假数据 没有用任何UI组件,切图完成 做项目基本流程: 1.规划组件结构 Nav.vue Header.vue Home.vue ... 2.编写对应路由 vue-router 3.具体写每一个组件功能 建议:一些公共文件 jquery,jquery插件,一般在index.html文件里面引入 main.js require() / import vue init webpack-simple news 项目需要的模块: vu…

1.axios的配置 main.js import Vue from 'vue' import App from './App.vue' // 引入 路由 import VueRouter from 'vue-router' // 引入 路由配置文件 import routes from './router.config' // 引入 vuex入口文件 import store from './store/index' // 引入 axios import axios from 'axios'…

1.全局过滤器 (1)normalTime.js  自定义 将 时间戳 转换成 日期格式 过滤器 /** * 将 时间戳 转换成 日期格式 */ export const normalTime = (time) => { if(time){ var oDate = new Date(); oDate.setTime(time); var y = oDate.getFullYear(); var m = oDate.getMonth() + 1; var d = oDate.getDate();…

1.项目结构 $ vue init webpack-simple news $ npm install vuex vue-router axios style-loader css-loader -D 2.main.js import Vue from 'vue' import App from './App.vue' // 引入 路由 import VueRouter from 'vue-router' // 引入 路由配置文件 import routes from './router.con…

1.结构 2.配置详情页路由 router.config.js /** * 配置 路由 */ // 导入组件 import Home from './components/Home.vue' import Follow from './components/Follow.vue' import Column from './components/Column.vue' import UserInfo from './components/UserInfo.vue' import Article…

1.组件结构 index.js const LoadingComponent = require('./Loading.vue') const loading = { install: function(Vue) { Vue.component('loading', LoadingComponent) } } module.exports = loading; Loading.vue <template> <div class="zns-loading"> &l…

1.创建 store 结构 2.main.js  引入 vuex 3. App.vue  组件使用 vuex <template> <div id="app"> <loading v-show="loading"></loading> <NavView v-show="headerShow"></NavView> <router-view></router-…

组件拆分 先把项目搭建时生成的代码给清了吧 现在static目录下引入reset.css 接着在index.html引入,并且设置<meta> 有时候呢,为了让代码符合我们平时的编码习惯,我们可以在ESLint进行设置,如下: 回到入口js文件main.js,为了好看,我们给它加上分号: 不过这是就会报错了: 所以要到eslintrc.js去设置(上面对应可以去官网查看怎么配置),使它接受这样的编码方式. 现在的App.vue如下: 然后我们编写组件来替换那三个区块. 创建header组件 将…

Vue2.0仿饿了么webapp单页面应用 声明: 代码源于 黄轶老师在慕课网上的教学视频,我自己用vue2.0重写了该项目,喜欢的同学可以去支持老师的课程:http://coding.imooc.com/class/74.html 源代码地址:https://github.com/ColinScales/shell 演示地址:https://colinscales.github.io/scale 手机扫码查看效果: ## 技术栈:vue-cli   webpack   axios    vue…

goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可以上下滚动. good.vue: 为了兼容性问题呢,设置flex之后还设置了宽度,使得在不兼容flex的浏览器也能有80px的宽: 外壳就是这样了: 开始填内容了 同样的,我们还是利用vue-resource这个技术去拿到数据,获取goods数据: goods需要用data去绑定,因为后面需要用到g…