实现效果
image
实现步骤
- 通过 vue-cli 脚手架工具， 初始化项目， 命名为test_project；
-
- 在 components 目录下创建 Header.vue 组件、 List.vue 组件、 Recommend.vue 组件；
- 在 src 目录先新建 page 文件夹， 在 page 文件夹下新建 Home.vue 组件；
- img 文件夹（提供）、iconfont 文件夹（提供） 放在 static 目录下；
- 在public文件夹放json文件
- Home.vue组件引入List.vue 组件、 Recommend.vue 组件，App.vue 组件中引入Header.vue 组件；
具体操作
- 安装vue-cli，我是用yarn安装的，需要提前安装yarn，也可以用npm安装，创建项目
yarn global add @vue/cli
//创建项目
vue create my-project
- vsCode添加此项目，在有package.json的情况下，可以使用npm i或者cnpm i安装package.json中需要的包（cnpm是淘宝镜像，没有的话需要安装）
cnpm i
//或者 yarn serve
npm run serve
//安装axios包
yarn add axios
- 将文件放入指定文件夹，如下为相关文件
//home.json
{
"status": "success",
"data": {
"listInfo": [
{
"id": 1,
"imgUrl": "//upload-images.jianshu.io/upload_images/15035171-da8ef5127e7628b0.png@c_1,w_640,h_402,x_0,y_0?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240",
"title": "21句正能量的句子，让你在自律路上多点思考",
"desc": "1、如果非要说成功有捷径，我想应该是每天做一点点有益小事，持续执行，保持自律状态。 2、当我们每天带着开天辟地的隆重感，去把平凡小事完成好。"
},
{
"id": 2,
"imgUrl": "//upload-images.jianshu.io/upload_images/12830911-487d64e0b633a495.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240",
"title": "坚持跑步十四年，我一斤没瘦",
"desc": "不知不觉，从2005年的春天开始跑步，到今年整整十四年了。 我从一开始一个人孤独的跑步，最多跑个五公里，到拖着仇先生一起跑，慢慢加长到十公里，直..."
},
{
"id": 3,
"imgUrl": "//upload-images.jianshu.io/upload_images/16039452-d910371f88cb26d3.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240",
"title": "无聊翻到的小程序居然给我带来了现金收益？",
"desc": "最近在家无聊，在翻微信的过程中，无意间发现了个小程序，是类似于知乎的，但又和知乎不一样，最主要的是，这个小程序居然可以给我转到一些外快？"
},
{
"id": 4,
"imgUrl": "//upload-images.jianshu.io/upload_images/15177263-cb5d496aa0d1deeb.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240",
"title": "成为数据分析师，抢占互联网红利！",
"desc": "师从硅谷名企，洞察数据秘密，成为互联网高薪人才！"
}
],
"recommendlist": [
{
"id": 1,
"imgUrl": "http://cdn2.jianshu.io/assets/web/banner-s-club-aa8bdf19f8cf729a759da42e4a96f366.png"
},
{
"id": 2,
"imgUrl": "http://cdn2.jianshu.io/assets/web/banner-s-3-ddcc844ebdd8edca2d93b7ea5a8de79e.png"
},
{
"id": 3,
"imgUrl": "http://cdn2.jianshu.io/assets/web/banner-s-7-1a0222c91694a1f38e610be4bf9669be.png"
}
]
}
}
-
如下为文件夹放置示意图
image - Header.vue
此处需要注意的是iconfont的引入及使用，这边文件里是用的unicode
首页
下载APP
登录
注册
写文章
- List.vue
{{item.title}}
{{item.desc}}
![]()
- Recommend.vue
![]()
- Home.vue引入List.vue和Recommend.vue组件，此处需要用axios引入json。
这里需要注意的是，静态的json文件需放在public文件夹，用axios.get('data.json')即可，不加public路径，或者放在其他文件夹，用require引入也可
- App.vue
- index.js
因为Home.vue是可以切换的，所以我将它设置成了路由，保存在src/router中，由于大部分情况下路由很多，所以单独写在index.js文件中，再将他暴露出去
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../page/Home'
Vue.use(VueRouter)
Vue.use(Home)
let router=new VueRouter({
routes: [{
path: '/',
component: Home
}]
})
export default router
- main.js
import Vue from 'vue'
import App from './App'
import router from './router/index.js'
Vue.use(App)
new Vue({
el:'#app',
router,
render:h=>h(App)
})
效果图
image
补充路由
懒加载
- 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
- Vue中实现懒加载有如下两种方法
- 被 Webpack 自动代码分割的异步组件
const Foo = () => import('./Foo.vue') const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })- 把组件按组分块：把某个路由下的所有组件都打包在同个异步块 (chunk) 中
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue') - 为了防止所有组件打包到App.js中导致文件过大，首屏加载缓慢，使用注释分组打包
let router=new VueRouter({
routes: [{
path: '/',
component:()=>import (/* webpackChunkName: "group-foo" */ '../page/Home')
},{
path: '/login',
component: ()=>import (/* webpackChunkName: "group-foo" */ '../page/Login')
}]
})
路由元信息
- 定义路由的时候可以配置 meta 字段
let router=new VueRouter({
routes: [{
path: '/',
meta:{title:'首页'},
component:()=>import (/* webpackChunkName: "group-foo" */ '../page/Home')
},{
path: '/login',
meta:{title:'登录'},
component: ()=>import (/* webpackChunkName: "group-foo" */ '../page/Login')
}]
})
- 在全局导航守卫中可以获取元字段
导航守卫
- 通过跳转或取消的方式守卫导航
- 全局前置守卫 ：路由跳转之前被拦截
router.beforeEach((to, from, next) => {
// if(×××) next()
})
- 全局后置钩子：路由跳转之后被拦截
router.afterEach((to, from) => {
// ...
})
- 通过导航守卫制作头部的process进度条,通过判断有无原信息的title，控制切换网页的title
//App.vue
//router/index.js
router.beforeEach((to, from, next) => {
let pro =document.getElementById('progress')
if(pro) pro.style.display='block'
//to代表去往的页面，若有元信息的title，则网页的title换成to.meta.title
if(to.meta&&to.meta.title) document.title=to.meta.title
console.log(to)
setTimeout(() => {
next()
}, 1000);
})
router.afterEach(() => {
// to and from are both route objects.
let pro =document.getElementById('progress')
if(pro) pro.style.display='none'
})
小技巧
Vue中添加方法
- 混入，其他文件引入时import+路径即可
import Vue from 'vue'
import axios from 'axios'
Vue.mixin({
methods: {
$get(url,data){
return axios(url,{params:data})
}
},
})
- 将方法加在Vue的原型对象上
import axios from "axios";
Vue.prototype.$axios=axios
其他
- @代表src文件夹，可以用它避免相对引用。
- 当要读取的时index命名的文件时，可以不写index，如下：
import '@/mixin'
- public放置静态资源
- Vue的源码中有一段关于Vue.use的定义，从源码中我们可以发现vue首先判断这个插件是否被注册过，如果已经注册过就直接 return 这个插件。并且接收的plugin参数的限制是Function | Object两种类型。
- 如果我们传入一个对象，对象中包含install方法，那么我们就调用这个plugin的install方法并将整理好的数组当成参数传入install方法中。
- 如果我们传入的plugin就是一个函数,那么我们就直接调用这个函数并将整理好的数组当成参数传入。
- Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。然而在像 CommonJS 这样的模块环境中，你应该始终显式地调用 Vue.use()
function initUse (Vue) {
Vue.use = function (plugin) {
var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// additional parameters
var args = toArray(arguments, 1);
args.unshift(this);
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args);
} else if (typeof plugin === 'function') {
plugin.apply(null, args);
}
installedPlugins.push(plugin);
return this
};
}