Скачать vue boilerplate template - vue boilerplate template Загрузка исходного кода

vue boilerplate template

Другие категории

vue-boilerplate-template V2.0.0

Скачать

Шаблонный шаблон Vue

?(vue webpack vuex vue-router vue-i18n element-ui) из коробки

? Хороший шаблон для создания проекта Medium Plus Vue.js(2.*)

中文 Вики

Цель и философия

О том, как создавать средние (+) проекты VUE , предоставьте некоторые рекомендации, основанные на прошлом опыте. Последний шаблон Vue, основанный на vue-cli3 имеет открытый исходный код: Awesome-vue-cli3-example. Если вы обратите на него внимание, я считаю, что это очень полезно ?

Предварительные условия

Node.js (>=4.x, предпочтительно 8.x), Npm версии 4+ (предпочтительно Yarn) и Git.

Демо

Онлайн-демонстрационная страница

Преимущество

На основе сборки vue-cli . Сделайте дополнительную оптимизацию, чтобы облегчить использование vue.
Уже включено множество часто используемых библиотек, таких как vue-i18n , axios , lodash ...
Имеются статьи с некоторым опытом о Vue , такие как: 如何写一手漂亮的 Vue. И до сих пор обновляется.
Сделайте дополнительную оптимизацию сборки приложения с помощью WebPack .
- Использование Webpack в качестве альтернативы
- Использование Webpack в качестве альтернативы
- Оптимизируйте свои библиотеки с помощью веб-пакета
- Хороший учебник по Webpack

Использование

 git clone https://github.com/nicejade/vue-boilerplate-template (your-project-name)
cd your-project-name
npm install (npm i / yarn)
npm start / npm run dev / yarn run dev

Перейдите по адресу http://localhost:8080/. Если порт 8080 уже используется на вашей машине, 8082 укажет вам доступный порт (инкрементальный), например, 8081 ... . Конечно, вы можете временно заменить порт с помощью следующей команды:

 PORT=8888 npm run dev

Дополнительное дополнение : Вам необходимо убедиться, что PORT — это команда, которую можно выполнить на вашем компьютере.

Больше команд

 npm run build

Эквивалентный node build.js , инициирует проект сборки.

 npm run build:dll

Эквивалентное выполнение webpack --config build/webpack.dll.conf.js . Дополнительные сведения см. в разделе webpack.DllPlugin.

 npm run jarvis / yarn run jarvis

запустите webpack-jarvis (очень умная панель управления Webpack на основе браузера). В браузере откройте: localhost:1337, он у вас есть.

npm run pretest

Используя nodejs для создания локального сервера: http://localhost:3000/, выполните простой предварительный тест кода после пакета.

 npm run analyz

Плагин Webpack и утилита CLI, которая представляет содержимое пакета в виде удобной интерактивной масштабируемой древовидной карты. Он автоматически откроет этот адрес: http://localhost:8888/.

Список зависимых плагинов

vue2
vue-маршрутизатор
вюекс
vue-i18n
аксиомы
самозагрузка
элемент-UI
Лодаш
~~момент~~ деньжс
js-cookie
... ...

Запрос операции

Ваш сервер может возвращать данные следующего формата, так лучше.

 {
  success: true,
  message: 'err message content',
  value: [
    // Useful data
  ]
}

Во внешнем интерфейсе вы можете обработать запрос следующим образом:

 let params = {
  // Interface required parameters
}
this.isLoading = true
this.$apis.moduleName.getProfile(params).then(result => {
  // Handle the correct data you received
}).catch(error => {
  this.$message.error(`Error: ${error}`)
}).fin(() => {
  this.isLoading = false
})

Благодаря такой внимательности шаблону удалось единообразно обрабатывать запросы, поэтому его можно использовать настолько легко, что, конечно, вы можете при необходимости изменить свой собственный в файле helper/ajax.js .