vue2 项目架构--初始化（一）

项目目录结构划分

 

src/
├── api/                # 接口请求模块
│   ├── request.js      # axios封装
│   ├── user.js         # 用户相关接口
│   └── ...
├── assets/             # 静态资源
│   ├── images/         # 图片资源
│   ├── icons/          # 图标资源
│   └── styles/         # 样式文件
│       ├── index.scss  # 全局样式入口
│       ├── variables.scss # 全局变量
│       └── mixins.scss # 混合样式
├── components/         # 公共组件
│   ├── common/         # 通用组件
│   │   ├── Button/
│   │   └── ...
│   └── business/       # 业务组件
├── directive/          # 自定义指令
├── filters/            # 过滤器
├── layout/             # 布局组件
│   ├── index.vue       # 布局入口
│   ├── Header.vue      # 头部
│   ├── Sidebar.vue     # 侧边栏
│   └── Footer.vue      # 底部
├── mixins/             # 混入
├── router/             # 路由配置
│   ├── index.js        # 路由入口
│   └── modules/        # 路由模块
├── store/              # Vuex状态管理
│   ├── index.js        # store入口
│   ├── getters.js      # 全局getters
│   └── modules/        # 状态模块
├── utils/              # 工具函数
│   ├── auth.js         # 权限相关
│   ├── errorCode.js    # 错误码
│   └── ...
├── views/              # 页面视图
│   ├── dashboard/      # 仪表盘
│   ├── login/          # 登录页
│   ├── error-page/     # 错误页面
│   └── ...
├── App.vue             # 根组件
└── main.js             # 入口文件

 

初始化步骤

1. 创建项目

# 安装Vue CLI
npm install -g @vue/cli

# 创建项目
vue create my-project

 

2. 安装核心依赖

# 安装UI组件库
npm i element-ui -S

# 安装HTTP请求库
npm i axios -S

# 安装工具库
npm i lodash -S

# 安装开发依赖
npm i compression-webpack-plugin clean-webpack-plugin -D

 

3. 配置环境变量
   在项目根目录创建：

 

• .env.development 开发环境配置
• .env.production 生产环境配置
• .env.test 测试环境配置

示例（.env.development）

NODE_ENV=development
VUE_APP_BASE_API=/api
VUE_APP_TITLE=我的应用

 

具体代码

vue2 项目创建参考 vue-element-admin

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录
cd vue-element-admin

# 安装依赖
npm install

# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com

# 本地开发 启动项目
npm run dev

项目目录会被创建