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:开发时的依赖。开发时使用,发布时用不到它(测试)。