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上传到服务器即可
   GithHub
# vue.js # 前端 # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue