1、下载安装node.js
下载地址https://nodejs.org/dist/
建议下载17+
版本因为用到vue-router4
需要8.0以上的npm
2、使用vite
安装vue3
npm init vite@latest vue3_project -- --template vue
cd vue3_project
npm install
npm run dev
3、安装vue-router
停止项目运行
ctrl+c
安装vue-router
npm install vue-router@4
打开main.js
配置router
引入router
import router from './router';
app.use(router)
在src
目录下创建router
目录新建index.js
文件,配置如下
import {
createRouter,
createWebHashHistory
} from "vue-router/dist/vue-router";
import index from '../components/index/index.vue'
import welcome from '../components/index/welcome.vue'
const routes = [{
path:'/',
component:index
},
{
path:'/welcome',
component:welcome
}]
const router = createRouter({
history:createWebHashHistory(),
routes
})
export default router
在components
目录下新建index目录并且新建两个vue
文件
打开终端运行
在App.vue
根组件添加路由占位符标签
<router-view></router-view>