Установка Vue3
1. Автономная версия
Мы можем напрямую скачать последнюю версию с официального сайта Vue.js и использовать её с<script>-тегом для её импорта.
2. Использование метода CDN
Ниже рекомендуются два относительно стабильных CDN из-за рубежа. В Китае мы пока не нашли хороший, поэтому всё ещё рекомендуется скачивать их локально.
-
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js
-
Staticfile CDN (Китай) : https://cdn.staticfile.net/vue/3.0.5/vue.global.js
-
unpkg：https://unpkg.com/vue@3/dist/vue.global.js, будет соответствовать последней версии, опубликованной в npm.
Мы можем использовать версию сборки ES-модуля, чтобы создать более современную и модульную среду разработки:
Пример
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
message: 'Hello EXAMPLE!'
}
}
}).mount('#app')
</script>
Попробуйте »
3. Метод NPM
Поскольку установка через npm медленная, в этом руководстве используется зеркало Taobao и его команда cnpm. Инструкции по установке и использованию см.:Использование зеркала Taobao NPM。
Версия npm должна быть больше 3.0. Если она ниже этой версии, её необходимо обновить:
# 查看版本 $ npm -v 2.3.0 #升级 npm cnpm install npm -g # 升级或安装 cnpm npm install cnpm -g
При создании больших приложений с помощью Vue.js рекомендуется устанавливать через cnpm. cnpm хорошо работает с модульными сборщиками Webpack или Browserify. Затем выполните следующую команду в командной строке:
# 最新稳定版 $ npm init vue@latest
Эта команда установит и запустит create-vue — официальный инструмент для создания каркаса проектов Vue.
<hr> <h2>Инструмент командной строки</h2> <p>Vue.js предоставляет официальный инструмент командной строки, который можно использовать для быстрого создания больших одностраничных приложений.</p> <p>Для Vue 3 следует использовать Vue CLI v4.5, доступный в npm как @vue/cli. Для обновления необходимо переустановить последнюю версию @vue/cli глобально:</p> <pre># Установить vue-cli глобально yarn global add @vue/cli # или cnpm install -g @vue/cli</pre> <p>После установки проверьте версию:</p> <pre> $ vue --version @vue/cli 4.5.11 </pre><p>Затем выполните в проекте Vue:</p><pre>vue upgrade --next</pre> <p><strong>Примечание:</strong> vue-cli 3.x и vue-cli 2.x используют одну и ту же команду vue. Если вы ранее установили vue-cli 2.x, он будет заменён на Vue-cli 3.x.</p> <p>Если вам всё ещё нужно использовать старую версию функции vue init, можно установить инструмент-мост глобально:</p> <pre>npm install -g @vue/cli-init # Результат выполнения vue init будет таким же, как в [email protected] vue init webpack my-project</pre> <h3>Создание проекта</h3> <p>В следующем примере мы используем команду vue init для создания проекта. Вы увидите запросы о дополнительных функциях, таких как поддержка TypeScript и тестирования:</p>$ npm init vue@latest Need to install the following packages: [email protected] Ok to proceed? (y) y Vue.js - The Progressive JavaScript Framework # 这里需要进行一些配置，项目名输入 example-vue3-test，其他默认回车即可 -> Project name: … example-vue3-test -> Add TypeScript? … No / Yes -> Add JSX Support? … No / Yes -> Add Vue Router for Single Page Application development? … No / Yes -> Add Pinia for state management? … No / Yes -> Add Vitest for Unit Testing? … No / Yes -> Add an End-to-End Testing Solution? › No -> Add ESLint for code quality? … No / Yes Scaffolding project in /Users/example/example-test/example-vue3/example-vue3-test... Done. Now run: cd example-vue3-test npm install npm run dev
Если вы не уверены, включать ли какую-либо функцию, просто нажмите Enter, чтобы выбрать «Нет».
После создания проекта установите зависимости и запустите сервер разработки, выполнив следующие шаги:
$ cd example-vue3-test $ npm install $ npm run dev VITE v4.3.4 ready in 543 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h to show help
После успешного выполнения вышеуказанных команд, посетитеhttp://localhost:5173/, результат вывода показан ниже:
Примечание:Vue.js не поддерживает IE8 и более ранние версии IE.
Использование графического интерфейса
Мы можем использовать командуvue ui, чтобы открыть графический интерфейс для создания проектов и управления ими:
vue ui
Выполнение вышеуказанной команды откроет графический интерфейс в браузере для руководства созданием проекта:
Vite
Vite — это инструмент сборки для веб-разработки. Благодаря нативному подходу импорта ES-модулей, он обеспечивает молниеносно быстрый запуск холодного сервера.
Выполнив следующую команду в терминале, вы можете использовать Vite для быстрого создания проекта Vue. Синтаксис следующий:
npm init vite-app <project-name>
Создание проекта example-vue3-test2:
$ npm init vite-app example-vue3-test2
Запуск проекта:
$ cd example-vue3-test2 $ cnpm install $ cnpm run dev > [email protected] dev /Users/example/example-test/vue3/example-vue3-test2 > vite [vite] Optimizable dependencies detected: vue Dev server running at: > Local: http://localhost:3000/
Откройтеhttp://localhost:3000/, отображение выглядит следующим образом:
