导语：

暑假在家闲着无事，就琢磨着做一个web博客练练手，现在已经做完了，把过程分享出来给大家看看，分享一下学习经验。这是第二篇，主要讲node，webpack和vue-cli环境的搭建，使用vue全家桶，写好路由，构建静态页面，为后续的api请求的编写打下基础。

本文的目录

• 一，环境的搭建
• 1，node下载
• 2，vue和vue-cli下载
• 二，配置vue和编写部分页面的代码

一，环境的搭建

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>

我们先把这三个页面给编写出来。

各位看官给我点个赞鼓励鼓励呗，谢谢啦~~~