javascript: vue create project in WebStorm

 

先安装路由包：

?

1	npm install vue-router

　　

 

 

 route/index.js

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<script setup> import TheWelcome from '../components/TheWelcome.vue' </script> <template>     <main>         <TheWelcome />     </main> </template>   <script> export default {     name: "HomeView" } </script>

　　

views/AboutView.vue

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13

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')