创建一个vue项目及其页面路由配置
创建一个vue项目及其页面路由配置本文章适用于小白第一次接触vue项目的创建及其基础配置
·
创建一个vue项目及其页面路由配置
文章目录
前言
本文章适用于小白第一次接触vue项目的创建及其基础配置
一、如何创建一个vue项目
1.node.js和vue-cli安装
nodejs下载地址:https://nodejs.org/en/download
vue-cli安装: npm install -g vue-cli
2.项目创建
安装命令(示例):
vue create name(项目名称)
3.安装路由
安装命令(选择其一就可):
npm install vue-router
npm i vue-router -S(需要手动添加vue-router版本"vue-router": "^3.5.3")
二、页面路由配置
1.创建一个test页面
test.vue
<template>
<div>
我是test页面
</div>
</template>
<script>
export default {
name: 'test',
data() {
return {
//可以对指定属性或data数组进行数据传递在页面中显示
};
},
mounted() {
//在这发起后端请求,拿回数据,配合路由钩子做一些事情,也可以在打开当前页面执行methods里面的方法,例如:
this.test()
},
methods: {
//这里是写各种不同的方法函数,这些方法可以理解为是一个属性,因为调用这个方法的时候,最终返回的是一个值
test(){
console.log("hello")
}
},
};
</script>
<style lang="scss" scoped>
</style>
2.创建一个Router文件夹,然后创建一个index.js文件
在一个页面跳转到另外一个页面的路由配置,index.js 代码如下(示例):
import Vue from 'vue'
import Router from 'vue-router'
import test from '../components/test'//导入组件
Vue.use(Router);
export default new Router({
routes:[
{
path:'/test',
name:'test',
component:test
} //新创建的组件在其后面进行路由配置
]
})
3.main.js配置路由router文件添加
main.js 代码如下(示例):
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './Router' //调用index.js的配置:
Vue.use(VueRouter);//通过 Vue.use() 明确地安装路由功能
Vue.config.productionTip = false
new Vue({
router, //引用router
render: h => h(App)
}).$mount('#app')
4.App.vue中路由展示
<template>
<div id="app">
<router-view/> //路由展示
</div>
</template>
三、项目启动和页面展示
1.项目启动
npm run serve
2.页面展示
http://localhost:8081/#/test(记得在http://localhost:8081/后面加test
总结
基于本人自学vue基础所得,若有不对之处还望广大大佬们多多指导,谢谢!!!
更多推荐
已为社区贡献1条内容
所有评论(0)