Vue template web

Vue-template-web은 vue element-ui를 사용하는 간단한 홈페이지 템플릿입니다.

소개:

이 프로젝트는 간단한 템플릿 페이지와 기본 구조로 일부 홍보 페이지, 테마 페이지, 공식 웹사이트 페이지 등으로 쉽게 변형될 수 있습니다.

프로젝트 구현:

1. 양방향 바인딩 스크롤 앵커 페이지.
2. vue element-ui의 i8n 국제화 지원.
3. 테마 색상 테마를 수정합니다.
4. Vuex는 사용자가 선택한 테마와 언어를 지속적으로 캐시합니다.
5. iconfont 글꼴 아이콘 라이브러리를 사용했습니다.
6. Axios 요청을 캡슐화합니다.

프로젝트 구조:

 src
 ├─assets                静态资源,图片,iconfont图标字体存放目录
 ├─components            公共组件目录
 ├─i18n                  vue element-ui的i8n国际化支持
 ├─router                路由模块
 ├─store                 vuex的模块,公共的state, mutations方法
 ├─utils                 工具类模块,包含http,本地缓存等.
 ├─views                 各个page页面的存放目录
 ├─App.vue               入口组件,挂载入口
 └─main.js               main入口js文件,引入全局使用的库、公共的样式和方法

표현:

실행 방법:

-.프로젝트를 복제합니다( git clone https://github.com/pjqdyd/Vue-template-web.git ).

-. npm install 실행하여 종속성을 다운로드합니다(다운로드가 느린 경우: npm install --registry=https://registry.npm.taobao.org ).

-. npm run serve 실행하여 프로젝트를 시작하고, http://localhost:8080 방문하여 페이지를 탐색하세요.

npm run build 실행하여 프로젝트를 컴파일하고 패키징합니다.

알아채다:

1. 새로운 브랜치 Vue-template-web-cdn은 CDN을 사용하여 일부 종속성을 로드하므로 패키징 후 js 파일이 너무 커지고 첫 번째 화면을 로드하는 데 너무 오래 걸리는 것을 방지할 수 있습니다.

테스트됨:

 master分支运行npm run build后dist文件夹大小为_4M_左右;

Vue-template-web-cdn分支打包后的dist文件夹减少至_100kb_左右;

따라서 Vue-template-web-cdn 분기를 사용하는 것이 좋습니다.

2. window.scrollTo(options) 앵커 포인트를 사용하여 스크롤을 최적화한 후 브라우저 호환성에 주의하세요. window.scrollTo는 호환됩니다. 물론 이전 제출 버전을 선택하여 다른 브라우저와 호환되도록 할 수도 있습니다.

힌트:

1. 이 프로젝트는 vue element-ui i8n 국제화를 구현합니다. 중국어와 영어 전환은 i18n/langs/ 아래에 정의된 두 가지 언어 세트를 정의합니다.

2. 테마 변경 구현:

이전에는 공식 스킨 변경 사례를 참고하여 구현했는데, ElementUI의 컴포넌트와 함께 색상을 변경할 수 있습니다. 이 방법은 더 번거롭고 알 수 없는 버그가 발생할 수 있으므로 현재는 색상 값을 직접 저장하여 테마를 변경하는 방법을 사용하고 있습니다. , 프로젝트에 this.$를 전달하면 store.state.theme에서 테마 색상 값을 얻을 수 있습니다.
(추가 권장 사항: CSS var 변수를 사용하여 루트 요소에 바인딩하여 스타일을 변경할 수 있습니다.)

3. 페이지 앵커 스크롤링은 이 오픈 소스 프로젝트를 나타냅니다.

4. 프로젝트는 axios 요청을 캡슐화하고 전역 속성 $globalRequest를 바인딩합니다. 코드를 참조하여 모든 페이지에서 비동기 요청 메서드 test4()를 호출할 수 있습니다.

5. 프로젝트를 통해 개선할 수 있는 부분이 발견되면 개선 문제를 제기할 수 있습니다.