Vue template web

Vue-template-web is a simple homepage template using vue element-ui

Introduction:

This project is a simple template page and basic structure, which can be easily transformed into some promotional pages, theme pages, official website pages, etc.

Project implementation:

1. Two-way binding scroll anchor page.
2. i8n internationalization support of vue element-ui.
3. Modify the theme color theme.
4. Vuex persistently caches the user's selected theme and language.
5. Used the iconfont font icon library.
6. Encapsulates an axios request.

Project structure:

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

Rendering:

How to run:

-.Clone the project ( git clone https://github.com/pjqdyd/Vue-template-web.git ).

-. Run npm install to download dependencies (if the download is slow: npm install --registry=https://registry.npm.taobao.org ).

-. Run npm run serve to start the project, and visit http://localhost:8080 to browse the page.

-.Run npm run build to compile and package the project.

Notice:

1. The new branch Vue-template-web-cdn uses CDN to load some dependencies, preventing the js file from being too large after packaging and the first screen taking too long to load.

Tested:

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

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

Therefore it is recommended to use the Vue-template-web-cdn branch;

2. After optimizing the scrolling using the window.scrollTo(options) anchor point, pay attention to the browser compatibility: window.scrollTo is compatible. Of course, you can choose the previous submission version to be compatible with other browsers;

hint:

1. The project implements vue element-ui i8n internationalization. Chinese and English switching defines two sets of languages, which are defined under i18n/langs/.

2. Theme change implementation:

Previously, it was implemented with reference to the official skin change case. The color can be changed together with the components of ElementUI. Since this method is more cumbersome and may cause unknown bugs, we currently use directly saving a color value to change the theme, and pass this.$ in the project. store.state.theme can get the theme color value.
(More recommended: You can use css var variables to bind to the root element to change the style).

3. The page anchor scrolling refers to this open source project.

4. The project encapsulates the axios request and binds the global attribute $globalRequest. You can call the asynchronous request method test4() on any page through await this.$globalRequest.test4(arg); refer to the code.

5. If the project finds areas that can be improved, you are welcome to raise an issue for improvement.