javascript: vue create project in WebStorm
先安装路由包:
npm install vue-router
route/index.js
import { createRouter, createWebHistory ,createWebHashHistory} from 'vue-router' import HomeView from '../views/HomeView.vue' import AboutView from "../views/AboutView.vue"; const router = createRouter({ history: import.meta.env.DEV ? createWebHashHistory() : createWebHistory(), routes: [ { path: '/', name: 'index', component: HomeView }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (About.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import('../views/AboutView.vue') } ] }) export default router
app.vue
<script setup> import HelloWorld from './components/HelloWorld.vue' //import VueRouter from 'vue-router' import { RouterLink, RouterView } from 'vue-router' </script> <template> <header> <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /> <div class="wrapper"> <HelloWorld msg="You did it! Geovin Du" /> </div> </header> <nav> <RouterLink to="/">Home</RouterLink> <RouterLink to="/about">About</RouterLink> </nav> <RouterView /> </template> <style scoped> header { line-height: 1.5; } .logo { display: block; margin: 0 auto 2rem; } @media (min-width: 1024px) { header { display: flex; place-items: center; padding-right: calc(var(--section-gap) / 2); } .logo { margin: 0 2rem 0 0; } header .wrapper { display: flex; place-items: flex-start; flex-wrap: wrap; } } </style>
views/HomeView.vue
<script setup> import TheWelcome from '../components/TheWelcome.vue' </script> <template> <main> <TheWelcome /> </main> </template> <script> export default { name: "HomeView" } </script>
views/AboutView.vue
<template> <div class="about"> <h1>This is an about page</h1> <p>i am geovindu</p> </div> </template> <script> export default { name: "AboutView" } </script> <style scoped> @media (min-width: 1024px) { .about { min-height: 100vh; display: flex; align-items: center; } } </style>
main.js
import './assets/main.css' import { createApp } from 'vue' import App from './App.vue' import router from './route' const app = createApp(App) app.use(router) app.mount('#app')
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文)