Vue--搭建个人博客

1.初始化vue项目

1.1环境初始化

1.安装node。官网直达

2.安装淘宝npm镜像提高下载速度。 npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装vue脚手架vue-cli。 npm install --global vue-cli

1.2创建项目

1.创建一个基于 webpack 模板的新项目my-blog。 vue init webpack my-blog

2.创建过程中会提示是否需要vue-router、eslint、unit tests等，全部输入no。

1.3安装依赖，启动项目

1.切换到项目目录 cd my-blog

2.安装依赖 cnpm install

3.启动运行 cnpm run dev

4.如果浏览器没有自动启动运行，请查看命令行输出的打印信息，把最后的网址拷贝到浏览器地址栏即可。我这里是 http://localhost:8080

2.实现添加博客页面

1.效果图

2.在components下新建一个AddBlog.vue文件。

<template><div id="add-blog"><h2>添加博客</h2><form v-if="!submmited"><label>博客标题</label><input type="text" v-model="blog.title" required /><label>博客内容</label><textarea v-model="blog.content"></textarea>  <!-- 博客分类 --><div id="checkboxes"><span>Vue.js</span><input type="checkbox" value="Vue.js" v-model="blog.categories"><span>Node.js</span><input type="checkbox" value="Node.js" v-model="blog.categories"><span>React.js</span><input type="checkbox" value="React.js" v-model="blog.categories"><span>Angular4</span><input type="checkbox" value="Angular4" v-model="blog.categories"></div><!-- 作者 --><label>作者:</label><select v-model="blog.author"><option v-for="author in authors">{{author}}</option></select><button v-on:click.prevent="post">添加博客</button></form> <!-- 提示信息 --><div v-if="submmited"><h3>您的博客发布成功!</h3></div><!-- 博客总览 --><div id="preview"><h3>博客总览</h3><p>博客标题: {{blog.title}}</p><p>博客内容:</p><p>{{blog.content}}</p><p>博客分类:</p><ul><li v-for="category in blog.categories">{{category}}</li></ul><p>作者: {{blog.author}}</p></div></div>
</template><script>
export default {name: 'add-blog',data () {return {blog:{title:"",content:"",categories:[],author:""},authors:["Hemiah","Henry","Bucky"],// 是否提交submmited:false}
},
// npm install vue-resource --save
methods:{post:function(){this.$http.post("https://......awfuoz.wilddogio.com/posts.json",this.blog).then(function(data){console.log(data);this.submmited = true;}) }
}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#add-blog *{box-sizing: border-box;
}#add-blog{margin: 20px auto;max-width: 600px;
}label{display: block;margin:20px;
}input[type="text"],textarea,select{display: block;width: 100%;padding: 8px;
}textarea{height: 200px;
}#checkboxes input{display: inline-block;margin-right: 10px;
}button{display: block;margin: 20px auto;background: crimson;color: #fff;border: 0;padding: 14px;border-radius: 4px;font-size: 18px;cursor: pointer;
}#preview{padding: 10px 20px;border: 1px dotted #ccc;margin: 30px 0;
}h3{margin-top: 10px;
}
</style>

3.其他

1.安装vue-resource。cnpm install vue-resource --save

2.在main.js中引入vue-resource。

import VueResource from 'vue-resource'

Vue.use(VueResource)

3.将数据提交到野狗云，存储数据。

4.注意这里需要将你数据库的读写权限都设为true

5.远程数据库中的数据

3.博客总览页面

1.效果图

2.在components下新建一个ShowBlogs.vue文件。

<template><!-- 传入的参数 --><div v-theme:column="'narrow'" id="show-blogs"><h1>博客总览</h1><input type="text" v-model="search" placeholder="搜索"><div v-for="blog in filteredBlogs" class="single-blog"> <router-link v-bind:to="'/blog/' + blog.id"><h2 v-rainbow>{{blog.title | to-uppercase}}</h2></router-link><article>{{blog.content | snippet}}</article></div></div>
</template><script>export default {name: 'show-blogs',data(){return {blogs:[],search:""}},//或者是 ./../static/post.json 注:资源文件只能放在static目录下created(){this.$http.get('https://......awfuoz.wilddogio.com/posts.json').then(function(data){return data.json()//Response }).then(function(data){ var blogsArray = [];//将对象放到数组里面去for(let key in data){console.log(data);console.log(data[key]);data[key].id = key;blogsArray.push(data[key]);}this.blogs = blogsArray;})},//computed:{filteredBlogs:function(){return this.blogs.filter((blog) =>{//blog每一篇文章return blog.title.match(this.search)})}},//过滤器filters:{"to-uppercase":function(value){return value.toUpperCase();},"snippet":function(value){return value.slice(0,100) + "...";}
},
//自定义指令
directives:{'rainbow':{bind(el,binding,vnode){el.style.color = "#" + Math.random().toString(16).slice(2,8);}},'theme':{bind(el,binding,vnode){if(binding.value =="wide"){el.style.maxWidth = "1260px";}else if (binding.value == 'narrow') {el.style.maxWidth = "560px";}if (binding.arg == 'column') {el.style.background = "#6677cc";el.style.padding = '20px';} }
}
}
}
</script><style>
#show-blogs{max-width: 800px;margin: 0 auto;
}.single-blog{padding: 20px;margin: 20px 0;box-sizing: border-box;background: #eee;border: 1px dotted #aaa;
}#show-blogs a{color: #444;text-decoration: none;
}input[type="text"]{padding: 8px;width: 100%;box-sizing: border-box;
}</style>

3.博客详情页

1.效果图

2.在components下新建一个SingleBlog.vue文件。

<template><div id="single-blog"><h1>{{blog.title}}</h1><article>{{blog.content}}</article><p>作者: {{blog.author}}</p><p>分类:</p><ul><li v-for="category in blog.categories">{{category}}</li></ul></div>
</template><script>
export default{name:"single-blog",data(){return{id:this.$route.params.id,blog:{}}},created(){this.$http.get('https://......awfuoz.wilddogio.com/posts/' + this.id + ".json").then(function(data){return data.json();}).then(function(data){this.blog = data;})}
}
</script>
<style>
ul,li{list-style: none;
}
#single-blog{max-width: 960px;margin: 0 auto;padding: 20px;background: #eee;border: 1px dotted #aaa;
}
</style>

3.其他

1.通过this.$route.params.id获取传过来的值

4.头部页面

1.效果图

2.在components下新建一个BlogHeader.vue文件。

<template><nav><ul><li><router-link to="/" exact>博客</router-link><router-link to="/add" exact>写博客</router-link></li></ul></nav>
</template><script>export default{name:"blog-header"}
</script><style scoped>
ul{list-style-type: none;text-align: center;margin: 0;
}
li{display: inline-block;margin: 0 10px;
}a{color: #fff;text-decoration: none;padding: 12px;border-radius: 5px;
}
nav{background: crimson;padding: 30px 0;margin-bottom: 40px;
}.router-link-active{background: rgba(255,255,255,0.8);color: #444;
}</style>

3.其他

1.安装vue-router。 cnpm install vue-router --save

2.在main.js中引入vue-router。

import VueRouter from 'vue-router'

Vue.use(VueRouter)

5.路由配置

1.在src下新建一个routes.js文件。

import ShowBlogs from './components/ShowBlogs.vue'
import AddBlog from './components/AddBlog.vue'
import SingleBlog from './components/SingleBlog.vue'export default[{path:"/",component:ShowBlogs},{path:"/add",component:AddBlog},{path:"/blog/:id",component:SingleBlog},
]

2.在main.js中

import Routes from './routes'

// 创建路由
const router = new VueRouter({
routes: Routes,
mode:"history"
})

new Vue({
router:router,
el: '#app',
template: '<App/>',
components: { App }
})

6.首页

1.效果图

2.App.vue

<template><div id="app"> <blog-header></blog-header><router-view></router-view> </div>
</template><script>
import BlogHeader from './components/BlogHeader'export default {name: 'app',components: {BlogHeader}
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

7.打包上传到服务器

1.将项目进行打包。cnpm run build

2.自动生成dist文件

3.只需要将static和index.html上传到服务器即可

GithHub