iTaster admin template

index

• generalize
• Install
• use
• renew
• Configuration
• Architecture
• Known issues
• license

generalize

Modified admin based on vue-cli's Webpack4.x template. Please do not download it. The preliminary code does not have any functions. It is purely for fun and practice.

Update instructions

• 2018/6/19 Upgrade webpack, use webpack4 and recommend the new plug-in mini-css-extract-plugin

Install

 ＃克隆该项目
git clone https://github.com/iTaster/webpack4-template

# 安装依赖关系
npm install

# 编译开发环境
npm run dev

By default, http://localhost:1988/ is automatically opened.

use

 # 编译生产环境
npm run build

# 构建生产环境
npm run build --report

renew

To ensure subsequent updates of project modules

 # 检测模块
npm outdated

# 更新模块
npm update

# 删除 node_modules 文件
npm install rimraf -g
rimraf node_modules

The npm outdated command will check your installed modules and tell you which ones are out of date.

Specific information includes: the currently installed version (Current), the version you should update to (Wanted), and the latest version in the repository (Latest).

Configuration

1. If you want to upload the dist folder, just delete /dist in the ignored file configuration ( .gitignore file).

2. By default, resource files compiled and processed by webpack will be stored in the static folder. If you only want to store them in the root file directory, modify the build.assetsSubDirectory parameter under config/index.jx to leave it blank. But not recommended! In this way, some image paths will be wrong when packaging. It is recommended that resources less than 10kb and some svg icons (things that generally will not be changed) are placed in the src/assets folder, and others are placed in the static folder.

3. By default, the css/js files packaged have source map , which are very useful for debugging code in the development environment. However, it is not recommended in the compilation and production environment. Modify the config/index.js file and change the value of build.productionSourceMap to: false .

4. If the code is running on the server and you don't want to have #/ in the address bar, you need to delete mode: 'history' annotation in router/index.js (backend configuration is also required, otherwise the page will refresh 404); if the page needs to use anchor jumps Go to the specified location and delete the scrollBehavior annotation.

5. It comes with autoprefixer plug-in. Writing css code directly in the vue file will automatically add the prefix.

Architecture

The following directory structure is recommended in large single-page development:

src
    ├── README.md
    ├── assets                  // 全局资源目录
    │    ├── images            // 图片
    │    ├── css               // CSS 样式表
    │    └── fonts             // 自定义字体文件
    ├── components              // 公共组件目录
    │    ├── NavMenu.vue
    │    ├── Slider.vue
    │    └── ...
    ├── directives               // 公共指令
    ├── filters                  // 公共过滤器
    ├── i18n                     // 国际化
    │    ├── index.js           // 入口文件
    │    ├── zh.js
    │    └── en.js
    ├── router                   // 路由
    │    └── index.js
    ├── store                    // 状态管理
    │    ├── index.js        
    │    └── ...
    ├── views                    // 页面视图
    │    ├── login
    │    │    ├── index.vue
    │    │    ├── LoginForm.vue
    │    │    └── LoginSocial.vue
    │    ├── home
    │    │    ├── index.vue
    │    │    ├── HomeBanner.vue
    │    │    └── ...
    │    └── ...
    ├── App.vue                // 默认程序入口
    └── main.js

advantage:

• If you want to use /login in another project, just copy or move it to the /components directory.

• As long as you have installed any external dependencies and you have defined the same loader in the configuration, the project should run fine.

Known issues

• There is a bug in hiding the left sidebar

contribute

You can contribute freely to this project by submitting issues and/or pull requests. This project is test driven, so please remember that every change and new feature should be covered by tests

license

This project is licensed under MIT.