Разработка Vue с помощью VSCode
Visual Studio Code (VS Code) — это бесплатный редактор кода с открытым исходным кодом, разработанный Microsoft, который поддерживает множество языков программирования и предоставляет такие возможности, как подсветка синтаксиса, интеллектуальное автодополнение кода, рефакторинг кода и отладка.
Visual Studio Code имеет встроенную поддержку основных строительных блоков Vue.js: HTML, CSS и JavaScript.
В VS Code есть встроенный терминал, который позволяет запускать такие инструменты командной строки, как npm и yarn, прямо в редакторе, что делает сборку и управление проектом удобными.
Если вы хотите получить более богатую среду разработки Vue.js, вы можете установить расширения Volar и Volar for TypeScript, которые обеспечивают IntelliSense для Vue.js.
Если вы ещё не знаете VS Code или не установили его, можете обратиться к:Учебник по VSCode。
Создание проекта Vue
Откройте терминал или командную строку и введите следующую команду:
npm create vue@latest
Система предложит вам ввести имя проекта. Здесь я ввожуexample-vue3-app：
Vue.js - The Progressive JavaScript Framework ? 请输入项目名称： › example-vue3-app
После этого появятся некоторые параметры. Вы можете выбрать их по своему усмотрению или просто нажимать Enter до конца:
Vue.js - The Progressive JavaScript Framework > 请输入项目名称： … example-vue3-app > 是否使用 TypeScript 语法？ … 否 / 是 > 是否启用 JSX 支持？ … 否 / 是 > 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是 > 是否引入 Pinia 用于状态管理？ … 否 / 是 > 是否引入 Vitest 用于单元测试？ … 否 / 是 > 是否要引入一款端到端（End to End）测试工具？ › 不需要 > 是否引入 ESLint 用于代码质量检测？ › 否 正在初始化项目 /Users/tianqixin/example-vue3-app... 项目初始化完成，可执行以下命令： cd example-vue3-app npm install npm run dev
После создания проекта войдите в папку проекта и установите зависимости:
cd example-vue3-app npm install
Установка зависимостей также может занять несколько минут.
Введите следующую команду, чтобы быстро запустить ваше приложение Vue:
npm run dev
Откройте http://localhost:5173 в браузере, и отобразится следующее:
Нажмите Ctrl+C, чтобы остановить сервер vue-cli-service.
Открыть проект Vue в VS Code
Из терминала или командной строки перейдите в созданную нами папку проекта Vue, example-vue3-app, а затем используйтеcodeкоманду, чтобы открыть проект в VS Code:
cd example-vue3-app code .
VS Code запустится и отобразит ваш проект Vue в проводнике, как показано ниже:
Просто выберите установку.
После установки файлы .vue распознаются как файлы Vue.js и поддерживают следующие языковые функции:
- Подсветка синтаксиса
- Сопоставление скобок
- Описание при наведении
IntelliSense
При вводе кода в App.vue вы увидите IntelliSense для HTML, CSS и синтаксиса, специфичного для Vue.js (например, v-bind, v-for).
В разделе script вы также можете увидеть подсказки по функциям JavaScript, связанным с Vue.js, например, для свойства computed.
Go to Definition, Peek Definition
Благодаря установленному расширению Volar VS Code поддерживает языковую службу Vue.js.
Поместите курсор на App, щелкните правой кнопкой мыши и выберите Peek Definition, чтобы просмотреть информацию об определении, или нажмите сочетание клавиш⌥F12。
Вы увидите всплывающее окно с информацией об определении App.
НажмитеEsc, чтобы закрыть окно Peek.
Изменить и запустить "Hello World"
В App.vue замените текст пользовательского атрибута msg компонента HelloWorld на "Hello World!":
Пример
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="Hello World!" />
</div>
</header>
<main>
<TheWelcome />
</main>
</template>
Сохраните файл App.vue (сочетание клавиш⌘SилиCtrl+S), затем перезапустите сервер следующей командой:
npm run dev
В браузере вы увидите, что страница отображает "Hello World!".
