vue脚手架

脚手架

安装

全局安装

npm install -g @vue/cli

创建项目

vue create 项目名

选择 Manually select features

选择 Choose Vue version、Babel、Router ==>

选择 2.x版本

选择 no ==>

选择 In dedicated config files ==>

选择 no ==>

最后在终端运行 npm run serve

项目结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Od0bbS97-1615464666171)(C:\Users\联想\AppData\Roaming\Typora\typora-user-images\1615457871825.png)]

运行打包命令

npm run serve

展示列表页

在 views 文件夹中 创建 List.vue ，在 List.vue 中添加代码：

<template>
    <div class="list">
        <table border="1" cellspacing=0>
            <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>
                </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()},
            ]
        }
    }
}
</script>

在 index.js 中引入，设置路由：

// 引入
import List from '../views/List.vue'
// 路由规则
{
    path:'/',
    name:'List',
    component:List
  },

展示详情页

在 List.vue 中的表格添加详情操作:

<router-link :to="{name:'Detail',params:{id:item.id}}">详情</router-link>

在 index.js 中引入，并写路由规则：

// 引入 Deatil
import Detail from '../views/Detail.vue'
// 路由规则
{
    path:'/detail:id',
    name:'Detail',
    component:Detail
  },

编辑 Detail.vue 的内容

template>
    <div class="detail">
        <router-link to="/">文章列表</router-link>
        <h2>{{post.title}}</h2>
        <div>{{post.content}}</div>
    </div>
</template>
<script>
export default {
    data:function(){
        return{
            posts:[
                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 () {
    // 获取传递过来的id
    let post_id = this.$route.params.id
    // 从 posts 变量中查询 id=post_id 的元素
    let res_post = this.posts.find(item => {
      return item.id == post_id
    })
    this.post=res_post
  }
}
</script>

实现添加文章

<router-link to="/add">添加</router-link>

// 引入Add
import Add from '../views/Add.vue'
// 路由规则
{
    path:'/add',
    name:'Add',
    component:Add
  },

<template>
    <div class="add">
        <form action="">
            <div>
                <label for="title">标题：</label>
                <input type="text" id="title" v-model="title">
            </div>
            <div>
                <label for="content">内容：</label>
                <textarea name="" id="content" style="width:500px;height:250px;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>

实现待编辑页面

<router-link :to="{name:'Edite',params:{id:item.id}}">编辑</router-link> 

在 index.js 中引入，并编写路由规则：

// 引入 Edite
import Edite from '../views/Edite.vue'
// 编写路由规则
{
    path:'/edite/:id',
    name:'Edite',
    component:Edite
  },

<template>
    <div class="edite">
        <form action="">
            <div>
                <label for="title">标题：</label>
                <input type="text" id="title" v-model="title">
            </div>
            <div>
                <label for="content">内容：</label>
                <textarea name="" id="content" style="width:500px;height:250px;resize:none" v-model="content"></textarea>
            </div>
            <input type="button" value="提交">
        </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()}
            ],
            post:{},
            title:'',
            content:''

        }
    },
    created:function(){
        let post_id=this.$route.params.id
        let post_res=this.posts.find(item=>{
            return item.id==post_id
        })
        this.title=post_res.title
        this.content=post_res.content
    }
}
</script>

删除

<a href="javascript:;" @click="delData(item.id)">删除</a>

用 a 标签，javascript:; 禁止刷新

在 List.vue 中直接写删除事件：

methods:{
        delData:function(post_id){
            this.posts.forEach((item,index)=>{
                if(item.id==post_id){
                    this.posts.splice(index,1)
                }
            })
        }
    }