Vue--搭建个人博客
1.初始化vue项目1.1环境初始化1.安装node。官网直达2.安装淘宝npm镜像提高下载速度。 npm install -g cnpm --registry=https://registry.npm.taobao.org3.安装vue脚手架vue-cli。 npm install --global vue-cli1.2创建项目
·
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.将项目进行打包。npm run build
2.自动生成dist文件
3.只需要将 static 和 index.html上传到服务器即可
更多推荐
已为社区贡献1条内容
所有评论(0)