导语：
暑假在家闲着无事，就琢磨着做一个web博客练练手，现在已经做完了，把过程分享出来给大家看看，分享一下学习经验。这是第二篇，主要讲node，webpack和vue-cli环境的搭建，使用vue全家桶，写好路由，构建静态页面，为后续的api请求的编写打下基础。
微信搜索 【web小馆】，回复 “全栈博客项目”，即可获取 项目源码和后续的实战文章教程。
一，环境的搭建
1，node下载
如果本机没有安装node运行环境，请到官网下载node 安装包进行安装，如果本机已经安装node，要更新到最新的node 版本
官网下载地址：https://nodejs.org/en/ 或者 http://nodejs.cn/
选择current下载。傻瓜式安装，一直点next就行了。
安装好了之后输入cmd打开命令行窗口 进入安装路径 输入node -v和npm-v查看node版本，如果有输出就表示已经下载安装好了。
2，vue和vue-cli下载
npm install vue -g
npm install vue-cli -g
下载好了之后，到你要的目录下面创建一个项目就行了
vue init webpack myProject
yes yes no no
他会有一些vue项目的配置给你选择，根据你的需要去输入y或者n就行了，然后在对应目录的终端命令行上面输入npm run dev。
至此你的vue项目就运行起来了。
二，配置vue和编写部分页面的代码
根据我们项目的需要，我们需要给我的vue项目加上vuex和vue-router，axios这些东西，使用vue全家桶来进行开发。
npm install
npm install vue-router --save-dev
npm install axios --save
npm install vuex --save
安装好这些依赖后，我们来看一看这个vue前端项目的各个文件的作用。
<template>
<div class="home">
<scroll :listen-scroll="listenScroll" :probe-type="probeType"
class="list1" ref="list" :data="list" @scrollToEnd="upmethod"
:pullup="up" @scroll="scroll"
>
<div class="article-list-wrapper">
<Rotation :height= "handlheight" :list="bannerList" effect="zoom"></Rotation>
<!-- <button @click="getsession">检验登录</button>
<button @click="logout">退出登录登录</button> -->
<van-divider>最新文章</van-divider>
<div class="card_group">
<div class="ca" v-for="(item, index) in list" :key="index" @click="to($event)"
:ID="item.id">
<img :src="item.pic" class="caimg">
<div class="caleft">
<div class="title">{{item.title}}</div>
<div class="text">{{item.lei}}</div>
<div class="imformation">点击量 {{item.hits}} 收藏量 {{item.likes}}</div>
</div>
</div>
</div>
</div>
</scroll>
<router-view></router-view>
</div>
</template>
<script>
import Vue from 'vue';
import scroll from '@/base/scroll/scroll'
import toast from '@/base/toast/toast'
import { Divider, ContactList } from 'vant';
import { Card } from 'vant';
import Rotation from '@/components/Rotation/Rotation'
import { get, getbaners } from '@/api/home'
import { getSession, logOut } from '@/api/user'
Vue.use(Divider);
Vue.use(Card);
export default {
data() {
return {
isLoading: false,
list: [],
num: 0,
more: 'true',
bannerList: []
};
},
methods: {
to(e) { //查看文章详情
this.$router.push({
path: `/home/${e.currentTarget.id}`
})
},
_get() { //获取文章
let number = this.num + 10
// console.log(number)
get(number).then((res) => {
if (res.data.errno == 0) {
// console.log(res.data)
this.list = res.data.data
console.log(this.list)
this.more = res.data.message
}
})
},
_getbaners() { //获取轮播图图片
getbaners().then(res => {
if (res.data.errno == 0) {
this.bannerList = res.data.data
}
})
},
getsession(){ //检验登陆
getSession().then(res => {
console.log(res)
})
// console.log(this.$store.getters.getCurrentUser)
// console.log(this.$store.getters.getIsLogin)
},
logout() { //退出登录
logOut().then(res => {
console.log(res)
})
this.isLoading = true
setTimeout(() => {
this.isLoading = false
}, 1500);
this.$store.commit('updateUserStatus',null);
},
scroll(pos) { //滚动事实位置
this.scrollY = pos.y
},
upmethod() { //上拉加载
console.log("jiazai")
if (this.more == 'true') {
this._get()
} else {
console.log('meile')
}
}
},
created () {
this._get()
this._getbaners()
this.listenScroll = true
this.probeType = 3
this.up = true
},
computed: {
handlheight() {
return `${document.body.clientWidth/2.4}px`
}
},
components: {
Rotation,
scroll,
toast
}
};
</script>
<style scoped>
.home{
position: fixed;
top: 50px;
bottom: 50px;
width: 100%;
background-color: #f1f1f1;
}
.article-list-wrapper{
padding-top: 10px;
}
.list1{
height: 100%;
overflow: hidden;
}
.ca{
height: 100px;
display: flex;
background-color: #fdfbfb;
margin: 5px 10px 15px 10px;
border-radius: 10px;
}
.caimg{
margin: 15px 20px 10px 20px;
border-radius: 10px;
height: 70px;
width: 70px;
}
.caleft{
padding: 20px 10px 10px 0px;
display: block;
}
.title{
font-size: 14px;
margin-right: 8px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.text{
font-size: 13px;
margin-right: 8px;
margin-top: 2px;
color: #8a8a8a;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.imformation{
margin-top: 10px;
font-size: 11px;
margin-right: 8px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
color: #8c8a8a;
}
</style>
<template>
<div class="article" ref="article">
<van-grid :gutter="10" column-num="3">
<van-grid-item v-for="(item,index) in list" :key="index" :icon="item.icon" :text="item.text"
:to="item.to" :id="item.to"
/>
</van-grid>
<router-view></router-view>
</div>
</template>
<script>
import Vue from 'vue';
import { Grid, GridItem } from 'vant';
Vue.use(Grid);
Vue.use(GridItem);
export default {
data() {
return {
list : [
{ icon : 'http://47.***.***.222:80/api/file/icon?pic=tikuman.png', text: '前端', to: '/article/前端', id: '前端'},
{ icon : 'http://47.***.***.222:80/api/file/icon?pic=string.png', text: 'htmlcss', to: '/article/htmlcss', id: 'htmlcss'},
{ icon : 'http://47.***.***.222:80/api/file/icon?pic=stack.png', text: 'javascript', to: '/article/javascript', id: 'javascript'},
{ icon : 'http://47.***.***.222:80/api/file/icon?pic=tree.png', text: 'jquery', to: '/article/jquery', id: 'jquery'},
{ icon : 'http://47.***.***..222:80/api/file/icon?pic=link.png', text: 'vue', to: '/article/vue', id: 'vue'},
{ icon : 'http://47.***.***.222:80/api/file/icon?pic=queue.png', text: '小程序', to: '/article/小程序', id: '小程序'},
{ icon : 'http://47.***.***.222:80/api/file/icon?pic=sort.png', text: '后端', to: '/article/后端', id: '后端'},
{ icon : 'http://47.***.***.222:80/api/file/icon?pic=hash.png', text: 'node', to: '/article/node', id: 'node'},
{ icon : 'http://47.***.***.222:80/api/file/icon?pic=heap.png', text: '华农oj', to: '/article/**', id: '**'}
]
}
},
methods: {
to(e) {
console.log(e.currentTarget.id)
this.$router.push({
path: `/article/${e.currentTarget.id}`
})
},
}
}
</script>
<style scoped>
.article{
padding-top: 80px;
background-color: #f1f1f1;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<template>
<div class="me" ref="me">
<div class="user">
<van-image
round
width="5rem"
height="5rem"
:src= "avatar"
/>
<div class="username" v-html="name"></div>
</div>
<div class="hr"></div>
<div class="tooldiv">
<van-cell title="我的收藏" is-link class="cell" icon="label-o" to= "/me/like" icon-color="#eeeeee"/>
<van-cell title="历史阅读" is-link class="cell" icon="bookmark-o" />
<van-cell title="设置" is-link class="cell" icon="setting-o" to= "/me/imformation"/>
</div>
<router-view></router-view>
</div>
</template>
<script>
import Vue from 'vue';
import { Image as VanImage } from 'vant';
import { Cell, CellGroup } from 'vant';
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(VanImage);
export default {
data() {
return {
}
},
methods: {
to() {
this.$router.push({
path: `/me/like`
})
},
},
computed: {
avatar() {
if (this.$store.getters.getIsLogin){
return this.$store.getters.getCurrentUser.avatar
} else {
return 'http://47.***.***.222:80/api/file/avatar?pic=logo.png'
}
},
name() {
if (this.$store.getters.getIsLogin){
return this.$store.getters.getCurrentUser.realname
} else {
return '轻松学算法'
}
}
},
}
</script>
<style scoped>
.me{
padding-top: 80px;
background-color: #f1f1f1;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.user{
background-color: #a2ebb9;
padding: 30px 0 30px 0;
text-align: center;
margin: 10px 30px 10px 30px;
border-radius: 20px;
}
.tooldiv{
display: block;
margin-top: 20px;
}
.hr{
height: 1.5px;
background-color: #d8d8d8;
margin: 4px 20px 4px 20px;
}
.cell{
margin-bottom: 3px;
}
</style>
我们先把这三个页面给编写出来。
各位看官给我点个赞鼓励鼓励呗，谢谢啦~~~
补充：
微信搜索【web小馆】，回复全栈博客项目，即可获取项目源码和后续的实战文章教程。每天用最简单朴实的语言，潜移默化的提升你的计算机基础知识和前端技术。小米粥，一个专注的web全栈工程师，我们下期再见！
转载：https://blog.csdn.net/gitchatxiaomi/article/details/108105136
查看评论