项目简介
小编发布本博客的目的是使用PanJiaChen大佬的vue-element-admin、elunez大佬后有感而发，根据这两位大佬的前端模版编写文档，特此鸣谢。本次博客预计发布周期为3个月，发布数量预计在30～50篇。希望各位看客多多收藏，点赞，评论。特此说明
技术栈
本项目采用Vue + ElementUI + axios + Vue-Router + Vuex。关于技术选型，我会在下一篇中单独做说明。
1. 安装Node
下载地址：nodejs.org/en/download… 注意： 下载LTS版本。即Long Term Suppot： 长期支持版本
安装并配置成功：
node -v
npm -v
2. 安装webpack
webpack官网文档： www.webpackjs.com
npm install --save-dev webpack
注意： 不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。
安装并配置成功：
webpack -v
3. 安装vue-cli
关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
npm install -g @vue/cli
安装并配置成功：
vue -V
4. 初始化项目
vue init webpack <项目名称>
项目配置如下：
5. 启动项目
cd vue-elementui-demo
npm run dev
6. 查看项目目录
- ├── build // 构建相关
- ├── config // 配置相关
- ├── node_modules // npm模块
- ├── src // 源代码。这是我们重点关注的内容
- ├── static // 第三方不打包资源
- ├── .babelrc // babel-loader 配置
- ├── eslintrc.js // eslint 配置项
- ├── .gitignore // git 忽略项
- ├── index.html // html模板
- └── package.json // package.json
- └── README.md // 文档说明
7. 新增项目目录如下：
- ├── build // 构建相关
- ├── config // 配置相关
- ├── src // 源代码
- │ ├── api // 所有请求
- │ ├── assets // 主题 字体等静态资源
- │ │ ├── img // 静态图片
- │ │ ├── css // css文件
- │ ├── components // 全局公用组件
- │ ├── directive // 全局指令
- │ ├── filtres // 全局 filter
- │ ├── icons // 项目所有 svg icons
- │ ├── lang // 国际化 language
- │ ├── mock // 项目mock 模拟数据
- │ ├── router // 路由
- │ ├── store // 全局 store管理
- │ ├── styles // 全局样式
- │ ├── utils // 全局公用方法
- │ ├── vendor // 公用vendor
- │ ├── views // view
- │ ├── App.vue // 入口页面
- │ ├── main.js // 入口 加载组件 初始化等
- │ ├── settings.js // 项目基本设置
- │ ├── permission.js // 权限管理
- ├── static // 第三方不打包资源
- ├── .babelrc // babel-loader 配置
- ├── eslintrc.js // eslint 配置项
- ├── .gitignore // git 忽略项
- ├── favicon.ico // favicon图标
- ├── index.html // html模板
- └── package.json // package.json
- └── README.md // 文档说明
8. 初始化完成
至此，项目目录初始化基本完成，上传git: vue-elementui-dmeo
