一、启动命令
npm run serve
二、打包命令
npm run build
三、程序入口
main.js
main.js
import { createApp } from ‘vue‘ import App from ‘./App.vue‘ import router from ‘./router‘ createApp(App).use(router).mount(‘#app‘)
App.vue
<template> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> </template> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #nav { padding: 30px; } #nav a { font-weight: bold; color: #2c3e50; } #nav a.router-link-exact-active { color: #42b983; } </style>
index.html
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We‘re sorry but <%= htmlWebpackPlugin.options.title %> doesn‘t work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
index.js
import { createRouter, createWebHashHistory } from ‘vue-router‘ import Home from ‘../views/Home.vue‘ const routes = [ { path: ‘/‘, name: ‘Home‘, component: Home }, { 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(/* webpackChunkName: "about" */ ‘../views/About.vue‘) } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router