本文详细介绍了使用Vue脚手架创建项目的过程，包括起步、手动创建项目、图形化创建项目的步骤。接着，通过实例展示了如何编写博客项目，包括列表展示、详情页、添加、编辑和删除功能的实现。在实现过程中，讲解了如何传递和接收ID，以及相关组件和路由的配置方法。
目录
脚手架
1、起步
安装：
-
win+R 输入cmd
-
运行命令
npm install -g @vue/cli安装中：
安装完成：
2、创建项目
选择好文件夹，按住shift+右键，选择在此处打开 Powershell 窗口
-
在命令行敲命令来创建项目
vue create 项目名称这时候会跳转到选择项中
-
此次项目依次选择：Manually select features —— Choose Vue version，Babel，Router —— 2.x —— No —— In dedicated config files —— No
-
等待就自动安装好了。
-
安装好后，运行命令
# 先进入项目里面 项目名为 hello-world cd hello-world # 运行下面命令启动 npm run serve运行完毕后，会启动下面地址，证明成功了
点击上面的 http://localhost:8080/ 会自动跳转到下面页面
这时候创建项目已经完成
3、图形化也可以创建项目
运行命令
vue ui
这时候会自己打开网页图形化创建页面，具体操作没研究透，只做了解。
补充：
查看vue版本号命令：
vue -V
卸载vue命令：
npm uninstall @vue/cli -g
博客项目编写（数据写死在前台）
1、列表展示和详情页（博客）
展示实现的步骤
-
在views文件夹下创建展示，添加，修改组件
-
编写展示组件代码
<template> <div class="list"> <table> <thead> <tr> <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:'早上好',create_time:Date.now()}, {id:2,title:'中午好',create_time:Date.now()}, {id:3,title:'晚上好',create_time:Date.now()}, ] } } } </script> -
创建路由规则，在router文件下找到index.js文件。在这里引入
import Vue from 'vue' import VueRouter from 'vue-router' import List from '../views/List.vue' Vue.use(VueRouter) const routes = [ { path:'/', name:'List', component:List } ] const router = new VueRouter({ routes }) export default router这时候再次打开页面就会看到当时在
List.vue中写的内容
展示暂告一段落，下面是点击详情链接
详情的实现步骤
-
在
List.vue文件中添加链接标签
-
在
views文件夹下新建Detail.vue文件，并进行编写
<template> <div class="detail">详情</div> </template> -
在
index.js文件中引入，并编写路由规则
-
这时候就能跳转了
-
没有创建数据库，直接在
Detail.vue文件中，也放了一份数据。
-
详情页点击跳转，如何把id传过去
在
index.js配置详情路由里添加/detail/:id，
这种
/:的方式，访问的时候就不用问号，直接斜杠就行
-
如何接收传过来的id？【1】
要链接到一个命名路由，可以给
router-link的to属性传一个对象：<router-link :to="{name:'Detail',params:{id:item.id}}">详情</router-link>里面的
name:'Detail'对应的是index.js里配置的路由规则名
效果：
-
如何接收传过来的id？【2】
filter方法查询id
find方法查询id
两者的区别：
filter：返回一个数组find：只返回第一个值 -
实现展示
代码：
<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:[ {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事件，只要组件一加载，直接执行 created:function(){ // console.log(this.$route.params.id); // 传递获取过来的id let post_id=this.$route.params.id // 从 posts 变量中查询 id=post_id 的元素 let res_post = this.posts.find(item=>{ return item.id==post_id }) // console.log(post); this.post=res_post } } </script>效果：
2、实现添加
-
在展示组件中添加新增按钮
<router-link to="/add">新增</router-link> -
在
index.js文件中配置路由规则
-
Add.vue文件中的代码
代码：
<template> <div class="box"> <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:400px;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(){ // console.log(this.title,this.content); this.posts.push({id:4,title:this.title,content:this.content}) console.log(this.posts); } } } </script>
3、实现编辑
获取编辑内容
-
Edite.vue页面内容
代码：
<template> <div> <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:400px;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()}, ], title:'', content:'', post:{} // 查找到的符合条件的文章对象 } }, 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>
4、实现删除
代码：
<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){
// console.log(post_id);
this.posts.forEach((item,index)=>{
if(item.id == post_id){
this.posts.splice(index,1)
}
})
}
}
}
</script>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
