目录
脚手架
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
方法查询idfind
方法查询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>