我的项目简介
小编公布本博客的目标是应用 PanJiaChen 大佬的 vue-element-admin、elunez 大佬后有感而发,依据这两位大佬的前端模版编写文档。本次博客预计公布周期预计为 3 个月,公布数量预计在 30~50 篇。心愿各位看客多多珍藏,点赞,评论。特此说明
技术栈
本我的项目采纳 Vue + ElementUI + axios + Vue-Router + Vuex。对于技术选型,我会在下一篇中独自做阐明。
1. 装置 Node
下载地址:https://nodejs.org/en/download/
留神:
下载 LTS 版本。即 Long Term Suppot:长期反对版本
装置并配置胜利:
node -v
npm -v
2. 装置 webpack
webpack 官网文档:https://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-admin-platform
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 // 文档阐明
参考资料
- vue.js
- webpack