项目前端（一）、vue项目中引入vue-router路由组件

1、在项目根目录下，执行 npm install vue-vouter

是否成功引入router路由组件，我们可以查看package.json文件中dependencies标签下是否有vue-router内容，如果有表示引入成功。

2、在项目src文件夹下添加router文件夹

3、在router文件夹下添加index.js文件，内容如下

router/index.js

// 引入vue-router
import {createRouter, createWebHistory} from "vue-router";

//引入组件写登录组件
import PageLogin from '../components/Login'

// 定义routes路由数组，多个路由需要使用,号进行分隔
const routes=[
   {
        path: '',
        component: PageLogin
    }
]

// 实例化VueRouter并将routes添加进去
const router = createRouter({
    //history为router模式
    history: createWebHistory(),
    // ES6简写，等于routes：routes
    routes
});

// 抛出这个这个实例对象方便外部读取以及访问
export default router

4、在main.js中引入router

import { createApp } from 'vue'
import App from './App.vue'
//引入路由组件
import router from './router/index.js'

const app = createApp(App)
app.use(router)
app.mount('#app')

//createApp(App).use(router).mount('#app')

5、设置路由首页

vue3解决运行是语法报错

在文件vue.config.js中添加 lintOnSave: false

npm引入组件说明

安装指定版本号
npm install -save xxx@1.0.3

安装项目到项目目录下，不会将模块依赖写入devDependencies或dependencies。
npm install xxx：

-g的意思是将模块安装到全局，不是安装到当前目录的项目下
npm install -g xxx:

-save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。
npm install -save xxx:

-save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。
npm install -save-dev xxx:


删除模块，但不删除模块留在package.json中的对应信息
npm uninstall xxx:

删除模块，同时删除模块留在package.json中dependencies下的对应信息
npm uninstall xxx --save

删除模块，同时删除模块留在package.json中devDependencies下的对应信息
npm uninstall xxx --save-dev
------------------------------
dependencies：运行时的依赖，发布后，生产环境下需要用的模块（生产）。
devDependencies：开发时的依赖。开发时使用，发布时用不到它（测试）。