创建一个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基础所得，若有不对之处还望广大大佬们多多指导，谢谢！！！