vue create创建 Vue-router 工程

参考
创建vue项目的两种方式：vue-create与vite
https://www.cnblogs.com/reverse-x/p/16806534.html

Vue2 脚手架创建工程测试程序
https://blog.csdn.net/wowocpp/article/details/146590400

在上面的基础上
cd .\vue2-demo\

vue create demo2

在这里插入图片描述

Vue CLI v5.0.8
? Please pick a preset:Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) 
> Manually select features

选择
Manually select features

选择

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert
selection, and <enter> to proceed)
>(*) Babel( ) TypeScript( ) Progressive Web App (PWA) Support(*) Router( ) Vuex(*) CSS Pre-processors( ) Linter / Formatter( ) Unit Testing( ) E2E Testing

Linter / Formatter 是干嘛的

? Check the features needed for your project: Babel, Router, CSS Pre-processors      
? Choose a version of Vue.js that you want to start the project with 3.x
> 2.x

选择Vue2

? Check the features needed for your project: Babel, Router, CSS Pre-processors      
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

如果选择了vue-router的话会弹出一个选项，问你是否需要安装历史模式的路由，选N 因为要用哈希模式的路由
选择Css书写格式

? Check the features needed for your project: Babel, Router, CSS Pre-processors      
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
> LessStylus

config

? Check the features needed for your project: Babel, Router, CSS Pre-processors      
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
> In package.json

config

? Save this as a preset for future projects? (y/N) N

 cd demo2npm run serve

Home页面

在这里插入图片描述

About 页面

在这里插入图片描述

main.js

在这里插入图片描述

App.vue

在这里插入图片描述

添加一个 Hi.vue

<template><div id="hi"><h1>Hi.vue组件</h1></div>
</template>
<script>
export default {name: "Hi",
};
</script>
<style scoped>
</style>

router/index.js

import Hi from '../components/Hi'{path: '/hi',name: 'Hi',component: Hi}

App.vue

<template><div id="app"><nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link>|<router-link to="/hi">Hi</router-link></nav><router-view /></div>
</template>