3-11 vue脚手架小练习

vue脚手架

Vue CLI API 在vue的官方文档中

安装

建议使用cmd 命令行工具进行全局安装

npm install -g @vue/cli

可以用这个命令来检查其版本是否正确：

vue --version

创建项目

vue create hello-world
// vue create 

若创建不成功出现以下问题

可以尝试在cmd中输入

set-ExecutionPolicy RemoteSigned

Vue CLI 新闻案例

app.vue

<template>
  <div id="app">
    <!-- 路由出口 -->
    <router-view/>
  </div>
</template>

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入文件
import List from '../views/list.vue'
import Edite from '../views/edite.vue'
import Add from '../views/add.vue'
import Detail from '../views/detail.vue'

Vue.use(VueRouter)

const routes = [
  // 设置路由
  {
    path:'/',
    name:'list',
    component: List
  },
  {
    path:'/add',
    name:'add',
    component: Add
  },
  {
    path:'/detail/:id',
    name:'detail',
    component: Detail
  },
  {
    path:'/edite',
    name:'edite',
    component: Edite
  }
]

const router = new VueRouter({
  routes
})

export default router

list.vue

<template>
  <div class="list">
    <router-link to="/add">新增</router-link>
    <table>
      <thead>
        <tr>
            <th>编号</th>
            <th>标题</th>
            <th>发表时间</th>
            <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in posts" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.title }}</td>
            <td>{{ item.create_time }}</td>
            <td>
                <!-- 向其他组件传递值 -->
                <router-link :to="{ name: 'detail', params: { id: item.id } }"
                >详情</router-link
                >
                <router-link :to="{ name: 'edite', params: { id: item.id } }"
                >编辑</router-link
                >
                <a href="javascript:;" @click="deleteData(item.id)">删除</a>
            </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
    data: function () {
    return {
      posts: [
        { id: 1, title: '今天据说要下雨', content: '今天据说要下雨今天据说要下雨今天据说要下雨今天据说要下雨', create_time: Date.now() },
        { id: 2, title: '天气越来越暖和了', content: '天气越来越暖和了天气越来越暖和了天气越来越暖和了天气越来越暖和了', create_time: Date.now() },
        { id: 3, title: '万物复苏，冰雪消融', content: '万物复苏，冰雪消融万物复苏，冰雪消融万物复苏，冰雪消融', create_time: Date.now() },
      ]
    }
  },
  methods:{
      deleteData:function(post_id){
          this.posts.forEach((item,index)=>{
              if(item.id==post_id){
                  this.posts.splice(index,1)
              }
          })
      }
  }
}
</script>

add.vue

<template>
    <div>
        <router-link to='/'>文章列表</router-link>
        <form action="">
            <div>
                <label for='title'>标题:</label>
                <input type="text" id="title" v-model="title" />
            </div>
            <div>
                <label for="content">内容</label>
                <textarea id="content"
                style="width:300px;height:200px; resize:none"
                v-model="content">
                </textarea>    
            </div>
            <input type="button" value="提交" @click="saveData" />
        </form>
    </div>
</template>
<script>
export default {
    data:function(){
        return {
            posts: [
                { id: 1, title: '今天据说要下雨', content: '今天据说要下雨今天据说要下雨今天据说要下雨今天据说要下雨', create_time: Date.now() },
                { id: 2, title: '天气越来越暖和了', content: '天气越来越暖和了天气越来越暖和了天气越来越暖和了天气越来越暖和了', create_time: Date.now() },
                { id: 3, title: '万物复苏，冰雪消融', content: '万物复苏，冰雪消融万物复苏，冰雪消融万物复苏，冰雪消融', create_time: Date.now() },
            ],
            title: '',
            content: ''
        }
    },
    methods:{
        saveData:function(){
            this.posts.push({
                id:4,
                title:this.title,
                content:this.content
            })
            console.log(this.posts)
        }
    }
}
</script>

edite.vue

<template>
  <div>
    <router-link to="/">文章列表</router-link>
    <form action="">
      <div>
        <label for="title">标题:</label>
        <input type="text" id="title" v-model="title" />
      </div>
      <div>
        <label for="content">内容:</label>
        <textarea
          id="content"
          style="width: 500px; height: 250px; resize: none"
          v-model="content"
        ></textarea>
      </div>
      <input type="button" value="提交" @click="updateData" />
    </form>
  </div>
</template>
<script>


export default {
  data: function () {
    return {
      posts: [
        { id: 1, title: '今天据说要下雨', content: '今天据说要下雨今天据说要下雨今天据说要下雨今天据说要下雨', create_time: Date.now() },
        { id: 2, title: '天气越来越暖和了', content: '天气越来越暖和了天气越来越暖和了天气越来越暖和了天气越来越暖和了', create_time: Date.now() },
        { id: 3, title: '万物复苏，冰雪消融', content: '万物复苏，冰雪消融万物复苏，冰雪消融万物复苏，冰雪消融', create_time: Date.now() },
      ],
      title: '',
      content: '',
      post: {} // 查找到的符合条件的文章对象
    }
  },
  created: function () {
    let post_id = this.$route.params.id
    // 下面代码要替换成请求 api 接口
    let post_res = this.posts.find(item => {
      return item.id == post_id
    })
    this.title = post_res.title
    this.content = post_res.content

  },
  methods: {
    updateData: function () {
    }
  }
}
</script>

detail.vue

<template>
    <div>
        <router-link to="/">文章列表</router-link>
        <h2>{{post.title}}</h2>
        <div>{{post.content}}</div>
    </div>
</template>

<script>
export default {
    data: function () {
    return {
      posts: [
        { id: 1, title: '今天据说要下雨', content: '今天据说要下雨今天据说要下雨今天据说要下雨今天据说要下雨', create_time: Date.now() },
        { id: 2, title: '天气越来越暖和了', content: '天气越来越暖和了天气越来越暖和了天气越来越暖和了天气越来越暖和了', create_time: Date.now() },
        { id: 3, title: '万物复苏，冰雪消融', content: '万物复苏，冰雪消融万物复苏，冰雪消融万物复苏，冰雪消融', create_time: Date.now() },
      ],
      post: {} 
    }
  },
  created:function(){
    let post_id = this.$route.params.id
    //   console.log(post_id)
    let res_post = this.posts.find(item => {
        return item.id == post_id
    })
    this.post = res_post
  }
}
</script>

ate_time: Date.now() },
],
post: {}
}
},
created:function(){
let post_id = this.$route.params.id
// console.log(post_id)
let res_post = this.posts.find(item => {
return item.id == post_id
})
this.post = res_post
}
}