这篇博客只描述vue-cli (终端建立vue项目后的使用) ，使用vue项目框架前建议先去官网看视频学习基本的指令，也可以后面再学。
建立项目后要先搞明白项目的目录都有什么用，可以看菜鸟教程的图片，主要是了解配置文件跟编写代码的位置
目录
- 一. 使用npm或cnpm
- 二. router+嵌套router+router重定向
- 1. router
- 2. 嵌套router
- 3.router重定向
- 三. 传递参数
- 四. 路由钩子
- 五. 使用Axios
一. 使用npm或cnpm
没有使用过vue项目的系统：
(1) 先安装node.js
下面步骤记得以管理员身份打开的cmd
(2) 选择使用淘宝镜像
npm install -g cnpm --registry=https://registry.npmmirror
(3) 全局安装 vue-cli
cnpm install --global vue-cli
(4) 创建一个基于 webpack 模板的新项目
vue init webpack my-project
(5) 进入项目，初始化并运行：
cd my-project
cnpm install
cnpm run dev
(6) 打包 Vue 项目
npm run build
二. router+嵌套router+router重定向
注意自己使用vue-router的版本，4.0以上的版本与4.0以下的版本存在区别。
4.0以下的版本包的使用为：
4.0以上为：
本人开发使用4.0以下的本版，具体情况遇到再具体解决。
创建项目的过程中如果没有选择自动下载router,那就手动下载：
npm install vue-router --save-dev
npm不行就用cnpm,版本可以自行添加，我在package.json文件中找到
“vue-router”: “^3.0.7”,
修改版本为3.0.7，
再运行
npm install
1. router
建一个文件夹router,夹一个index.js编写router配置
import vue from 'vue'
import Router from 'vue-router' //1. 导入路由
import Content from "../components/Content"; //这个是一个vue内容页
vue.use(Router) //2. 安装路由
export default new Router({ //3.实例路由
routes:[ //编写路由信息
{
//网页路径
path:'/content',
//名称
name:'content',
//跳转到
component:Content
}
]
})
把路由引入main.js,main.js是程序的一个入口
引入的路由配置命名为小写开头
import Vue from 'vue'
import App from './App'
import router from './router'//导入路由
Vue.config.productionTip = false
new Vue({
el: '#app',
//配置路由
router,
components: { App },
template: '<App/>'
})
App为第一个Vue文件，在这个文件实现页面信息的跳转跟展示
跳转html前端使用
<link …
vue使用
<router-link to=“/content” 。。。。
展示使用**<router-view 。。。。**
<template>
<div id="app">
<p>主页</p>
<router-link to="/content">内容</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</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>
内容页面
<template>
<div>
第二页
</div>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped>
</style>
2. 嵌套router
建1–n个vue界面自定义内容
在router配置文件index.js中的主url下加入嵌套url
最后在主url页面中添加router跳转及显示
为了做得好看一点可以去element-ui官网中抄：
我抄了一个界面
然后就是找地方插入router-link 跟 router-view
不要忘记安装element-ui仓库
根据官网介绍使用
3.router重定向
在内容页（url是：/content）,发起重定向请求（url是：/gohome）跳回首页（url是：/home）
在router配置文件中添加路由index.js
三. 传递参数
- 添加参数
在路由配置文件中添加
{
path:"/user_list/:date/:name/:address",
name:'UserList',
component:UserList,
props:true
},
- 编写router-link传参
<router-link :to="{name:'UserList',params:{date:'2022-08-06',name:'用户列表',address:'朝阳'}}">用户列表</router-link>
- 取出参数展示
<template>
<div>
{{$route.params.date}}<!--第二步-->
{{name}}
{{address}}
</div>
</template>
<script>
export default {
name: "UserList",
props:['date','name','address']//第一步
}
</script>
<style scoped>
</style>
四. 路由钩子
查看官网API
<template>
<div>
{{$route.params.date}}<!--第二步-->
{{name}}
{{address}}
</div>
</template>
<script>
export default {
name: "UserList",
props:['date','name','address'],//第一步
beforeRouteEnter: (to, from, next) => {//举例的第一个钩子
console.log("进入路由之前");
next();
},
beforeRouteLeave: (to, from, next) => {//举例的第二个钩子
console.log("关闭路由之后");
next();
}
}
</script>
<style scoped>
</style>
五. 使用Axios
先安装axios
项目中开发时一般先方测试版的数据文件
要建立专用目录
文件存放于该目录下可以在网页直接访问json数据
http://localhost:8080/static/mock/data.json
Axios获取参数：
<template>
<div>
{{ $route.params.date }}
{{ name }}
{{ address }}
</div>
</template>
<script>
export default {
name: "UserList",
props: ['date', 'name', 'address'],//第一步
beforeRouteEnter: (to, from, next) => {
console.log("进入路由之前");
next(vm => { //执行一下函数
vm.getData()
})
},
methods: {
getData: function () {
this.axios({
method: 'get',
url: 'http://localhost:8080/static/mock/data.json'
}).then(function (response) {
console.log(response) //打印一下获取的数据
})
}
}
}
</script>
<style scoped>
</style>
更多推荐
跟菜鸟教程快速搭建并简单使用Vue
发布评论