前言：Vue-cli环境搭建

1.1 安装nodejs

下载 nodejs 20.19.4，下载对应的系统安装包安装即可

1.2 安装vue-cli

安装vue-cli：命令行执行：npm install -g @vue/cli

2.1 修改镜像站：npm install -g cnpm --registry=https://registry.npmmirror.com/
2.2 执行完毕后会多一个安装包的命令 cnpm 且使用的镜像源是指定的
2.3 使用cnpm安装vue-cli: cnpm install -g @vue/cli
3.创建vue项目：vue create 项目名称，会在当前目录下创建项目

---

一、项目创建

1.1 创建项目

vue create 项目名称  # 会在当前目录下创建项目

1.2 项目配置

• 选项: Manually select features
• 含义: 手动选择项目所需的特性，而非使用默认预设
• 使用场景: 适合需要自定义配置的项目
  

1.3 第三方组件配置

选择操作：上下箭头移动光标到对应的配置，按下【空格】键，即可选中或取消

• 选项: Babel, Router, Vuex
• 含义:
  • Babel: JavaScript编译器，将ES6+代码转换为向后兼容版本
  • Router: Vue官方路由管理器，用于构建单页面应用
  • Vuex: Vue官方状态管理模式，提供集中式状态管理
    

1.4 选择版本

• 选项: 2.x
• 含义: 选择Vue.js的2.x版本
• 对比Vue 3:
  • 兼容性更好，支持IE11
  • 成熟度高，插件生态完善
  • 学习曲线更平缓
    

1.5 路由模式选择 + 配置文件位置

• 选项: Yes (Use history mode)
• 含义:
  • 使用HTML5 History API，URL无#符号（如/home而非/#/home）
• 服务器配置要求:
  • 需配置服务器将未知路由重定向到index.html
  • Apache: .htaccess中添加FallbackResource /index.html
  • Nginx: try_files $uri $uri/ /index.html;
• 选项: In package.json
• 含义: 将所有配置文件集成在package.json中
• 替代方案:
  • “在专用配置文件中”：生成独立的babel.config.js、eslintrc.js等文件
• 优缺点:
  • 优点：配置集中管理
  • 缺点：package.json文件体积增大

1.6 保存预设配置

• 选项: No
• 含义: 不保存当前配置作为以后项目的预设

选择 N 即可

1.6 包管理器

1.7 创建成功

---

二、目录结构预览

your-project/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/           # 静态资源
│   ├── components/        # 组件
│   ├── views/             # 路由视图
│   ├── store/             # Vuex状态管理
│   │   └── index.js       # Vuex入口文件
│   ├── router/            # 路由
│   │   └── index.js       # 路由配置
│   ├── App.vue            # 根组件
│   └── main.js            # 应用入口
├── package.json           # 项目配置
└── vue.config.js          # Vue CLI配置（可选）

---

三、技术栈特点

3.1 路由系统 (Vue Router)

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history', // 使用history模式
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/views/About.vue') // 路由懒加载
    }
  ]
})

3.2 状态管理 (Vuex)

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

---

四、最佳实践建议

1. 项目启动:

   pnpm install    # 安装依赖
   pnpm serve      # 启动开发服务器
   pnpm build      # 打包生产环境应用
   

2. 代码规范:

   • 安装ESLint扩展
   • 在package.json中添加以下配置:

   "eslintConfig": {
     "root": true,
     "env": {
       "node": true
     },
     "extends": [
       "plugin:vue/essential",
       "eslint:recommended"
     ],
     "parserOptions": {
       "parser": "babel-eslint"
     },
     "rules": {}
   }
   

3. 性能优化:

   // vue.config.js
   module.exports = {
     productionSourceMap: false, // 关闭source map
     configureWebpack: {
       optimization: {
         splitChunks: {
           chunks: 'all'
         }
       }
     }
   }
   

---

五、结果展示

通过上述配置，您已创建一个具备以下功能的企业级Vue应用：

• Vue 2.x - 成熟稳定的Vue版本
• 路由功能 - 支持history模式的无刷新导航
• 状态管理 - Vuex提供的数据集中管理能力
• 现代JavaScript - Babel的ES6+支持
• 高效包管理 - PNPM的快速安装能力

这个配置特别适合开发大型企业应用，它提供了良好的开发体验、路由管理和状态管理模式。

如果您计划将项目部署到生产环境，请记得按照历史模式要求配置您的Web服务器。

• Vue 2.x - 成熟稳定的Vue版本
• 路由功能 - 支持history模式的无刷新导航
• 状态管理 - Vuex提供的数据集中管理能力
• 现代JavaScript - Babel的ES6+支持
• 高效包管理 - PNPM的快速安装能力

这个配置特别适合开发大型企业应用，它提供了良好的开发体验、路由管理和状态管理模式。

如果您计划将项目部署到生产环境，请记得按照历史模式要求配置您的Web服务器。