当前位置：首页 > news >正文

vue create创建 Vue-router 工程

news 来源：原创 2025/5/16 17:55:24

参考
创建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)
> Less
  Stylus

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 demo2
 npm 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>