vue2+Vue CLI脚手架创建项目+路由配置详细步骤前言：简单的项目其实没必要用开源项目框架来开发，一些封装很完善的

前言： 简单的项目其实没必要用开源项目框架来开发，一些封装很完善的项目有些内置配置和文件会占用很大打包体积，代码有冗余，删除的不干净，还是直接用脚手架创建新项目，按照需求安装依赖配置想要的东西，才会更简洁，便于维护，下面是vue2搭配脚手架直接创建项目的过程。

一、先完成环境准备

‌安装 Node.js‌

下载 Node.js 18+ LTS 版本（Vue 2 兼容性最佳）

安装后验证安装是否成功：

    node -v   # 最好是 v18.x.x
    npm -v    # 最好是 9.x.x

国内用户配置镜像加速->提升下载速度-节约网络带宽成本：

    npm config set registry https://registry.npmmirror.com

二、安装 Vue CLI

全局安装脚手架工具‌

npm install -g @vue/cli

或使用淘宝镜像加速

cnpm install -g @vue/cli

验证安装：
```
vue --version  # 需显示 @vue/cli 4.x.x（支持 Vue 2）
```

三、创建项目

‌1. 先初始化项目

vue create my-app-project

‌2. 手动选择配置项--> Manually select features

根据需要勾选初始功能项（下面是核心建议勾选）：

◉ Babel                   # ES6 转译
◉ Router                  # 路由（可选）
◉ Vuex                    # 状态管理（可选）
◉ Linter / Formatter      # 代码规范（推荐 ESLint）

注意： 要选择Vue 2.x 版本（默认可能为 Vue 3，要手动切换）

其他配置： ① 路由模式：history 或 hash（推荐 hash 兼容性更好）② CSS 预处理器：可选 Sass/Scss ③ ESLint 规则：推荐 Standard 或自定义

四、项目大体结构

my-app-project/
├── node_modules/     # 依赖目录
├── public/           # 静态资源
│   └── index.html    # 入口 HTML
├── src/              # 源码目录
│   ├── assets/       # 图片/字体等资源
│   ├── components/   # 公共组件
│   ├── router/       # 路由配置（如选择）
│   ├── store/        # Vuex 状态管理（如选择）
│   ├── views/        # 页面组件
│   ├── App.vue       # 根组件
│   └── main.js       # 入口文件
├── .eslintrc.js      # ESLint 配置
└── package.json      # 依赖管理

五、安装依赖并运行项目

‌进入项目目录并安装依赖‌

cd my-app-project //切换到自己创建的项目内
npm install   //安装依赖

‌运行项目‌
```
npm run serve
```
浏览器访问 http://localhost:8080 查看创建的项目

六、增加依赖和基本路由配置

‌例如项目中要用 Vant UI（移动端） ‌

npm i vant@latest-v2 -D  # 安装 Vant 2.x版本

在 main.js 中全局引入：

import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)   //页面中就可以正常使用了

‌路由配置‌

①路由配置文件（src/router/index.js）

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', component: () => import('../views/About.vue') } //优化加载速度
]

const router = new VueRouter({
  mode: 'history', // 可选hash模式
  routes
});

export default router;

②创建视图页面--在src/views目录下创建对应的文件（如果还未创建）：

// src/views/Home.vue
<template>
  <div class="home">
    <h1>Home页面</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

③在入口文件中挂载路由--修改src/main.js，将路由实例注入 Vue 实例：

// src/main.js 
import Vue from 'vue'; 
import App from './App.vue'; 
import Vant from 'vant'
import 'vant/lib/index.css'
import router from './router'; // 引入路由配置 

Vue.use(Vant)   //页面中就可以正常使用了
Vue.config.productionTip = false; 

new Vue({ 
    router, // 注入路由 
    render: h => h(App)
}).$mount('#app');

④在 App.vue 中添加路由出口--确保根组件包含路由渲染位置：

<!-- src/App.vue -->
<template>
  <div id="app">
    <!-- 导航链接 -->
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    
    <!-- 路由视图渲染位置 -->
    <router-view></router-view>
  </div>
</template>

⑤还可以根据需要配置导航守卫--在router/index.js中可以添加全局导航守卫，例如身份验证：

router.beforeEach((to, from, next) => {
  // 检查是否需要身份验证
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login'); // 未登录则重定向到登录页
  } else {
    next(); // 正常跳转
  }
});

路由配置补充说明

嵌套路由：在路由配置中使用children字段定义子路由
动态路由：使用:id等参数定义动态路径
懒加载：使用() => import('./views/About.vue')实现组件懒加载优化加载性能

七、项目整体注意事项

‌版本兼容性问题‌

Vue 2 需搭配 vue-router@3.x 和 vuex@3.x

升级 CLI 后创建旧版本项目可能报错，建议全局锁定 CLI 版本：
```
npm install -g @vue/cli@4.5.15
```
‌项目中常见问题‌

ESLint 报错‌：在 .eslintrc.js 中调整规则或添加 /* eslint-disable */ 临时屏蔽

‌依赖安装失败‌：删除 node_modules 后重新执行 npm install

*---------------------------欢迎补充 *