iTaster admin template

색인

• 일반화하다
• 설치하다
• 사용
• 고쳐 쓰다
• 구성
• 건축학
• 알려진 문제
• 특허

일반화하다

vue-cli의 Webpack4.x 템플릿을 기반으로 수정된 관리자입니다. 예비 코드는 순전히 재미와 연습을 위한 것입니다.

업데이트 지침

• 2018/6/19 webpack 업그레이드, webpack4 사용 및 새로운 플러그인 mini-css-extract-plugin 권장

설치하다

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

# 安装依赖关系
npm install

# 编译开发环境
npm run dev

기본적으로 http://localhost:1988/은 자동으로 열립니다.

사용

 # 编译生产环境
npm run build

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

고쳐 쓰다

프로젝트 모듈의 후속 업데이트를 보장하려면

 # 检测模块
npm outdated

# 更新模块
npm update

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

npm outdated 명령은 설치된 모듈을 확인하고 어떤 모듈이 오래된 것인지 알려줍니다.

구체적인 정보에는 현재 설치된 버전(현재), 업데이트해야 하는 버전(원함), 저장소의 최신 버전(최신)이 포함됩니다.

구성

1. dist 폴더를 업로드하려면 무시된 파일 구성( .gitignore 파일)에서 /dist 삭제하면 됩니다.

2. 기본적으로 webpack 에서 컴파일하고 처리한 리소스 파일은 static 폴더에 저장됩니다. 루트 파일 디렉터리에만 저장하려면 config/index.jx 아래의 build.assetsSubDirectory 매개 변수를 비워 두세요. 하지만 추천하지 않습니다! 이런 식으로 패키징할 때 일부 이미지 경로가 잘못될 수 있습니다. 10kb 미만의 리소스와 일부 svg 아이콘(일반적으로 변경되지 않는 것)은 src/assets 폴더에 배치하고 나머지는 static 에 배치하는 것이 좋습니다. 접는 사람.

3. 기본적으로 패키지된 css/js 파일에는 개발 환경에서 코드를 디버깅하는 데 매우 유용한 source map 이 있지만, 컴파일 및 프로덕션 환경에서는 권장되지 않습니다. config/index.js 파일을 수정하고 값을 변경합니다. build.productionSourceMap 을 다음으로 변경: false .

4. 코드가 서버에서 실행 중이고 주소 표시줄에 #/ 표시하지 않으려면 router/index.js 에서 mode: 'history' 주석을 삭제해야 합니다(백엔드 구성도 필요합니다. 그렇지 않으면 페이지 404를 새로 고칩니다. 페이지에서 앵커 점프를 사용해야 하는 경우 지정된 위치로 이동하여 scrollBehavior 주석을 삭제합니다.

5. autoprefixer 플러그인과 함께 제공됩니다. vue 파일에 직접 CSS 코드를 작성하면 접두사가 자동으로 추가됩니다.

건축학

대규모 단일 페이지 개발에는 다음 디렉터리 구조가 권장됩니다.

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

이점:

• 다른 프로젝트에서 /login을 사용하려면 /comComponents 디렉터리로 복사하거나 이동하면 됩니다.

• 외부 종속성을 설치하고 구성에 동일한 로더를 정의했다면 프로젝트는 제대로 실행될 것입니다.

알려진 문제

• 왼쪽 사이드바를 숨기는 버그가 있습니다

기여하다

이슈 및/또는 끌어오기 요청을 제출하여 이 프로젝트에 자유롭게 기여할 수 있습니다. 이 프로젝트는 테스트 중심이므로 모든 변경 사항과 새로운 기능은 테스트를 통해 다루어져야 한다는 점을 기억하세요.

특허

이 프로젝트는 MIT 라이선스를 받았습니다.