Недавно я пишу проект торгового центра с открытым исходным кодом с Vue3.После открытого исходного кода каждый может использовать готовый исходный код проекта крупного торгового центра Vue3, чтобы практиковать свои навыки.В настоящее время он находится в стадии разработки, и используется Vant3.0 в процессе, поэтому я организовал эту статью, рассказ о том, как использовать Vue3.0 + Vant 3.0 для создания начального проекта.
Предыдущий обзор:«Vue3 здесь, план реконструкции торгового центра с открытым исходным кодом Vue3 официально запущен! 》
Как мы все знаем, Vue 3.0 был выпущен в течение короткого времени, но на рынке не так много библиотек компонентов Vue UI, которые могут быстро реагировать.Ant Design of Vue,Vant, миграция этих двух библиотек компонентов относительно завершена, могут быть небольшие упущения, но это не влияет на общую ситуацию, вы можете перейти в их репозиторий Github, чтобы поднять Issues.
Далее я возьму вас за ручную сборку библиотеки компонентов Vant, последней маршрутизацииVue-Router 4.0, последний плагин управления состояниемVuex 4.0один изVue 3.0Семенной проект.
Создать проект
Существует три формы создания проекта
- Vue-Cli
- Vite
- Webpack
В этой статье будет использоватьсяViteСоздайте проект, ведь это инструмент упаковки, над написанием которого вы так усердно работали.В непроизводственной среде мы стараемся играть с последними вещами (невозможно не научиться).
Инициализируем проект по туториалу, приведенному в официальном документе, вот отечественная ускоренная версия Amwayкитайский документ, Официальная китайская версия веб-сайта, по-видимому, является сервером, развернутым за границей. Он очень, очень медленно открывается в Китае, что сильно влияет на обучение.
использоватьNPM:
$ npm init vite-app vant-v3
$ cd vant-v3
$ npm install
$ npm run dev
использоватьyarn:
$ yarn create vite-app vant-v3
$ cd vant-v3
$ yarn
$ yarn dev
Лично я предпочитаю использовать пряжу, потому что она быстрее.Для студентов, которым нравится npm, рекомендуется добавить зеркало Taobao и установить с помощью cnpm, который также очень быстр.
В процессе выполнения вышеуказанных операций лично я чувствую, что это очень быстро.
Инициализируйте каталог проекта следующим образом:
Внимательные и невнимательные студенты обнаружат, что файл ввода, похоже, изменился.
Да, это изменилось, V2 — это форма инициализации экземпляра, а V3 — функциональный стиль.
// Vue2.0
new Vue({
render: h => h(App)
}).$mount('#app')
// Vue3.0
import { createApp } from 'vue'
createApp(App).mount('#app')
Добавить маршрутизацию Vue-Router 4.0
You Da выпускает официальную версиюVue 3.0Как я сказал позже, периферийные плагины не были хорошо адаптированы и обновлены.
Действительно, покаVue-Router 4.0ещеbeta.13, то есть постарайтесь не использовать его в производственной средеbetaВерсия плагина, есть еще некоторые неизвестные мелкие проблемы, которые не были решены.
Но обычно у нас есть краткий обзор наших собственных проектов.Далее давайте установим плагин маршрутизации.
yarn add vue-router@next
Как и V2, нам также нужноsrcновый каталогrouterпапка, добавитьindex.jsдокумент.
код показывает, как показано ниже:
// src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
// createRouter 创建路由实例
const router = createRouter({
history: createWebHashHistory(), // hash模式：createWebHashHistory，history模式：createWebHistory
routes: [
{
path: '/',
component: Home
}
]
})
// 抛出路由实例, 在 main.js 中引用
export default router
Давайте создадим еще одинsrc/views/Home.vueПозволять/Пути могут отображать содержимое:
<template>
<div>我是十四</div>
</template>
<script>
export default {
}
</script>
с последующимApp.vueдобавить в файлrouter-viewКомпонент, компонент страницы, которому соответствует маршрут рендеринга:
<template>
<!-- 和 vue-router3 一样，展示路由的组件的地方 -->
<router-view />
</template>
<script>
export default {
name: 'App'
}
</script>
Позвольте мне объяснить здесьVue-Router 3.xа такжеVue-Router 4.0другое место.
Первый — объявить экземпляр маршрута в форме:
// Vue-Router 3.x
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: [
// 路由配置不变
]
})
// Vue-Router 4.0
const router = createRouter({
history: createWebHashHistory(), // hash模式：createWebHashHistory，history模式：createWebHistory
routes: [
{
path: '/',
component: Home
}
]
})
Во-вторых, как его использовать:
// Vue-Router 3.x
export default {
methods: {
goToHome() {
this.$router.push('Home')
}
}
}
// Vue-Router 4.0
import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter()
const goToHome = () => router.push('Home')
return { goToHome }
}
}
бегатьyarn devОткройте браузер, как показано ниже:
Добавить библиотеку компонентов пользовательского интерфейса Vant
VantЯ уже запустил версию 3.0, поехалиОфициальный сайтМожно посмотреть как установить.
Все будет хорошо, я научу тебя.
Первым шагом должна быть его установка, код выглядит следующим образом:
yarn add vant@next -S
После добавления мы добавим подключаемые модули, которые вводятся по запросу (рекомендуется использовать импорт по запросу, чтобы уменьшить упоминания кода):
yarn add babel-plugin-import -D
Добавьте в корневой каталог проектаbabel.config.jsСледующим образом:
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
существуетmain.jsВведите компонент, код выглядит следующим образом:
import { createApp } from 'vue'
import { Button } from 'vant';
import App from './App.vue'
import router from './router'
import 'vant/lib/index.css'; // 全局引入样式
import './index.css'
const app = createApp(App) // 创建实例
app.use(Button) // 注册组件
app.use(router)
app.mount('#app')
существуетsrc/views/Home.vueПросто добавьте компонент, код выглядит следующим образом:
<template>
<div>我是十四</div>
<van-button type="primary" size="large">大号按钮</van-button>
</template>
<script>
export default {
}
</script>
В этот момент обновите браузер, эффект будет таким, как показано ниже:
Мобильная рем-адаптация
Если это веб-страница на стороне ПК, нет необходимости делать rem-адаптацию, но для разработки H5 необходимо сделать rem.VantЧиновник также предоставил нам план, как показано ниже:
Адаптируем и установим их согласно предоставленному нам официальному решению:
yarn add lib-flexible -S
yarn add postcss-pxtorem -D
здесь
lib-flexibleОн используется веб-страницей для адаптации размера шрифта html, поэтому его необходимо установить в зависимостях. А postcss-pxtorem используется при преобразовании единиц px в единицы rem во время компиляции, поэтому его можно установить в devDependencies.
После установки нам нужноmain.jsпредставлятьlib-flexible, добавьте следующий код:
import { createApp } from 'vue'
import { Button } from 'vant';
import 'lib-flexible/flexible'
import App from './App.vue'
import router from './router'
import 'vant/lib/index.css'; // 全局引入样式
import './index.css'
const app = createApp(App) // 创建实例
app.use(Button) // 注册组件
app.use(router)
app.mount('#app')
Затем нам нужно настроить единицу измерения px на единицу измерения rem.
Сначала ошибся, объявив в корневом каталоге.postcssrc.jsдокумент, но в настоящее времяViteСозданный проект больше не поддерживает эту форму файла конфигурации, но требуетpostcss.config.jsфайл, содержание конфигурации выглядит следующим образом:
// postcss.config.js
// 用 vite 创建项目，配置 postcss 需要使用 post.config.js，之前使用的 .postcssrc.js 已经被抛弃
// 具体配置可以去 postcss-pxtorem 仓库看看文档
module.exports = {
"plugins": {
"postcss-pxtorem": {
rootValue: 37.5, // Vant 官方根字体大小是 37.5
propList: ['*'],
selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
}
}
}
Датьsrc/views/Home.vueДив в файле — это стиль, проверьте, удалась ли адаптация rem:
<template>
<div class="demo">我是十四</div>
<van-button type="primary" size="large">大号按钮</van-button>
</template>
<script>
export default {
}
</script>
<style scoped>
.demo {
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
Если это показано выше, конфигурация вступила в силу.
Вот еще один небольшой момент, на который стоит обратить внимание:Нет необходимости преобразовывать px в rem, вы можете использовать PX в верхнем регистре в качестве единицы измерения.
Он не преобразуется в единицы rem во время компиляции, его также можноselectorBlackListобъявленное имущество.noremИмена классов с префиксом также не преобразуются.
конец
Приведенное выше содержимое VUE3.0 + VANT3.0 + Vue-маршрутизатор 4.0 мобильная часть, исходный код был открыт для GitHubvue3-examplesНа складе адрес склада:GitHub.com/новый Bee-Ltd/…, Этот репозиторий будет время от времени обновлять различные знания, связанные с Vue3.0, и различные советы по интеграции Demo и Vue3. Вы можете обратить на это внимание. Если у вас есть какие-либо предложения, вы можете оставить мне сообщение.