vue3学习1.0---安装以及路由切换

90 阅读 0 评论 60 点赞

我是靠谱客的博主落寞小猫咪，这篇文章主要介绍vue3学习1.0---安装以及路由切换，现在分享给大家，希望可以做个参考。

1.安装vue脚手架使用过vue2，需要卸载！

复制代码

1
2
3
输入 npm uninstall vue-cli -g 回车
输入 yarn global remove vue-cli 回车

2.安装脚手架：

复制代码

1
2
npm install -g @vue/cli 回车运行即可

3.创建项目

自己创建文件然后

复制代码

1
2
 vue create demo

就创建好了！
接下来就yarn 或者npm install
yarn serve 或者 npm run serve

4.路由变换

1.安装路由

复制代码

1
2
npm install vue-router@4

2.新建页面

创建 view目录，然后在view目录下创建两个 vue页面文件
在这里插入图片描述
自定义内容

3、创建路由配置文件

新建 router目录，然后在 router目录下新建 index.js和routes.js文件
index.js 文件内容如下

复制代码

1
2
3
4
5
6
7
8
9
10
11
import {createRouter, createWebHistory} from 'vue-router'
import routes from './routes'

const router = createRouter({
    history: createWebHistory(), 
    routes
})

export default router

4.routes.js文件内容如下

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const routes = [
    {
        name: 'login',
        path: '/',
        component: () => import('@/view/XXX')
    },
    {
        name: 'home',
        path: '/home',
        component: () => import('@/view/XXX')
    },
    
];

export default routes

5.在 main.js中配置路由

复制代码

1
2
3
4
5
6
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
//注意use要在mount之前
createApp(App).use(router).mount('#app')