Установка Vue.js

1. Автономная версия

Мы можем напрямую скачать vue.min.js с официального сайта Vue.js и использовать тег<script>для его подключения.

Скачать Vue.js

2. Использование метода CDN

Ниже рекомендуются два относительно стабильных зарубежных CDN. Пока не найден особенно хороший отечественный CDN, поэтому пока всё ещё рекомендуется скачать локально.

ByteDance CDN (внутренний)

<div id="app"> <p>{{ message }}</p> </div>

Попробуйте »

unpkg (рекомендуется)

<div id="app"> <p>{{ message }}</p> </div>

Попробуйте »

cdnjs

<div id="app"> <p>{{ message }}</p> </div>

Попробуйте »

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 install vue

Инструмент командной строки

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

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author example <[email protected]>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

Перейдите в проект, установите и запустите: 

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

После успешного выполнения приведённых выше команд перейдите по адресу http://localhost:8080/, результат вывода будет следующим:

Примечание:Vue.js не поддерживает IE8 и более ранние версии IE.

Сборка проекта Vue

Используйте следующую команду для сборки проекта Vue:

npm run build

После завершения выполнения в проекте Vue будет создан каталогdist. Обычно он содержит файл index.html и каталог static. Каталог static содержит статические файлы js, css и каталог images.

Если напрямую дважды щёлкнуть index.html, чтобы открыть его в браузере, страница может оказаться пустой. Чтобы она отображалась правильно, можно изменить пути к файлам js и css в файле index.html.

Например, когда мы открываем файл dist/index.html, мы видим, что пути являются абсолютными:

<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>

Мы изменяем пути к js и css на относительные:

<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>

Таким образом, можно напрямую дважды щёлкнуть файл dist/index.html и увидеть результат в браузере.

Редактор

VS Code

VS Code (полное название Visual Studio Code) — это бесплатный кроссплатформенный редактор кода с открытым исходным кодом, выпущенный Microsoft.

VS Code поддерживает Windows, macOS и Linux, обладает мощными возможностями и гибкой расширяемостью.

Руководство по VS Code:https://www.example.com/vscode/vscode-tutorial.html

Кроме того, у китайских Alibaba и ByteDance также есть AI IDE, разработанные на основе VS Code:

  • Alibaba Qoder:https://qoder.com/

    • Другие расширения