Vue template web

Vue-template-web — это простой шаблон домашней страницы, использующий vue element-ui.

Введение:

Этот проект представляет собой простую страницу-шаблон и базовую структуру, которую можно легко преобразовать в рекламные страницы, тематические страницы, страницы официального сайта и т. д.

Реализация проекта:

1. Якорная страница прокрутки с двусторонней привязкой.
2. Поддержка интернационализации vue element-ui.
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() на любой странице с помощью await this.$globalRequest.test4(arg);

5. Если в проекте найдутся области, которые можно улучшить, вы можете поднять вопрос об улучшении.