проект строительных лесов vue-cli3.0 (вант)

Vant

Построение среды проекта vue

1. Проект строительных лесов vue-cli3.0

1. Установите node.js

Официальный сайт:nodejs.org/en/

2. Установите vue-cli 3.0

npm install -g @vue/cli

Проверьте версию после успешной установки: vue -V (заглавная V)

3. Создайте проект

Создайте проект в каталоге, в котором вы хотите создать проект (WeChat: имя проекта)

vue create project-name

По умолчанию настройка по умолчанию

Ручной выбор функций пользовательской конфигурации Да Да

4. Выберите пользовательскую конфигурацию

Пробел переключает выбранное состояние

Babel: поддерживает преобразование синтаксиса es6

TypeScript: расширенный набор js, предоставленный Microsoft.

Поддержка прогрессивных веб-приложений (PWA): прогрессивные веб-приложения.

Маршрутизатор: маршрутизация

Vuex: Vuex — это шаблон управления состоянием + библиотека для приложений Vue.js.

Препроцессоры CSS: препроцессоры Sass/Less

Линтер/форматтер: проверка стиля кода

Модульное тестирование: поддерживает модульное тестирование

Тестирование E2E: поддержка тестирования E2E

5. Выберите предварительную компиляцию css, здесь я выбираю меньше

6. Инструмент определения грамматики, здесь я выбираю ESLint + Standard config

7. Выберите метод проверки грамматики, здесь я выбираю Lint при сохранении

8. Место хранения конфигурационного файла, я выбираю поместить его в отдельную папку

9. Записывать ли конфигурацию: введите N, чтобы не записывать, если вы введете Y, вам нужно ввести имя для сохранения.

10. После подтверждения дождитесь загрузки зависимых модулей

11. Запустите проект

cd project-name // 进入项目根目录
npm run serve // 运行项目

Удалите ненужные структуры:

1. Удалите файлы проекта src/cpomponents.

2. Удалите изображение под активами

3. Удалите favicon.icon под publicc

Временные изменения на странице:

src/App.vue:

<template>
  <div id="app">
    <home></home>
  </div>
</template>
<script>
import home from "./views/Home";
export default {
  components: {
    home
  }
};
</script>
<style lang="less">
</style>

src/views/Home.vue:

<template>
  <div class="home">home</div>
</template>

<script>
export default {
  name: "home",

};
</script>

12. Библиотека асинхронных запросов axios.js

1. Установка:

Установите Axios в проекте wechat

npm install --save axios
2. Введение:

1. Изменитьsrc/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 1.引入axios
import axios from 'axios'

Vue.config.productionTip = false

// 2.把axios绑定到vue实例的属性$axios
Vue.prototype.$axios = axios

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
3. Введение в тест
Исправлятьsrc/App.vue 
<template>
  <div id="app">
    <home></home>
  </div>
</template>
<script>
import home from "./views/Home";
export default {
  components: {
    home
  }
};
</script>
<style lang="less">
</style>
Изменить src/views/Home.vue
<template>
  <div class="home">home</div>
</template>

<script>
export default {
  name: "home",
  mounted() {
    this.$axios
      .get("https://www.easy-mock.com/mock/5d395ce7fa347e75e540dbeb/zl/Update")
      .then(res => {
        console.log(res);
        
      });
  }
};
</script>

13. Введите значок шрифта iconfont

Официальный сайт:www.iconfont.cn/

1. Загрузите значок шрифта, который вы добавили

2. Скачать значок шрифта в SRC / активах после папки IconFont (их новый) внутри

3. Тестовая модификация

Представлено в src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入iconfont的样式
import './assets/iconfont/iconfont.css'

// 1.引入axios
import axios from 'axios'

Vue.config.productionTip = false

// 2.把axios绑定到vue实例的属性$axios
Vue.prototype.$axios = axios

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Изменить в src/views/Home.vue

<template>
  <div class="home">home
    <div class="iconfont icon-iconfonthome0"></div>
  </div>
</template>

<script>
export default {
  name: "home",
  mounted() {
    this.$axios
      .get("https://www.easy-mock.com/mock/5d395ce7fa347e75e540dbeb/zl/Update")
      .then(res => {
        console.log(res);
        
      });
  }
};
</script>
4. Эффекты

14. Внедрить вант (фреймворк пользовательского интерфейса)

1. Установите вант
npm i vant -S
2. Ввести компоненты

Установить плагин

npm i babel-plugin-import -D

Настраивается в babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

Настраивается в src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入iconfont的样式
import './assets/iconfont/iconfont.css'
// 引入Vant UI组件的样式
import 'vant/lib/index.css'
// 1.引入axios
import axios from 'axios'

Vue.config.productionTip = false

// 2.把axios绑定到vue实例的属性$axios
Vue.prototype.$axios = axios

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
3. Проверьте эффект

src/views/Home.vue

<template>
  <div class="home">
    home
    <div class="iconfont icon-iconfonthome0"></div>
    <van-button type="primary">主要按钮</van-button>
  </div>
</template>

<script>
import Vue from "vue";
import { Button } from "vant";
Vue.use(Button);
export default {
  name: "home",
  mounted() {
    this.$axios
      .get("https://www.easy-mock.com/mock/5d395ce7fa347e75e540dbeb/zl/Update")
      .then(res => {
        console.log(res);
      });
  }
};
</script>
<style lang="less" scoped>
</style>

15. Рем адаптация

Стили в Ванте используются по умолчаниюpxВ качестве единицы, если вам нужно использоватьremUnit, рекомендуется следующие два инструмента:

1.postcss-pxtorem — это плагин postcss, который может преобразовывать единицы измерения в бэр.

npm install postcss-pxtorem --save-dev

2.lib-flexible используется для установки контрольного значения rem

npm i lib-flexible --save
Настроить в postcss.config.js
module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}
Импорт скачанного гибкого файла в main.js
// 引入lib-flexible
import 'lib-flexible/flexible'
Категории