просто ничего или напечатать «Hello World» в вашем первом веб-браузере!

Структура файлов

это файлы, содержащиеся в исходной структуре проекта:

  • index.html
  • src/App.vue
  • src/main.js
  • src/assets/logo.png
  • src/components/HelloWorld.vue

мы можем использовать Vue двумя способами: установить через NPM или установить через интерфейс командной строки.

Установите Vue через NPM

NPM (Node Package Manager) используется для установки пакетов. Вы можете использовать его для установки Vue в новом или существующем проекте.

Вам нужно будет убедиться, что у вас установлен Node.js и есть доступ к NPM. Чтобы проверить, откройте консоль и введите:

> node -v
> npm -v

Обе эти команды должны предоставить вам номера версий. Если они останутся нераспознанными, посетите Nodejs.org и загрузите соответствующий установщик в зависимости от вашей операционной системы. Установите его с помощью параметров по умолчанию и перезагрузите консоль. Теперь вы можете повторно ввести те же команды, и они будут работать.

Во-первых, нам нужно создать новую папку проекта:

> mkdir vue-npm && cd vue-npm

Чтобы сохранить зависимости нашего проекта от того, что мы устанавливаем с помощью NPM, нам нужно создать файл package.json.

Для этого введите следующую команду:

> npm init -y

Будет создан новый файл package.json, и в подсказках будут введены значения по умолчанию -y.

Далее мы будем использовать npm для установки vue:

> npm install vue --save

На этом этапе вы можете создать файл index.html с тем же содержанием, что и в приведенном выше примере CDN, за исключением изменения ‹script .. src на node_modules /vue/dist/vue.js, и он будет работать точно так же.

Однако обычно вы используете что-то вроде Webpack или Gulp в качестве более надежной среды разработки.

Поскольку наш проект не будет настроен таким образом, мы собираемся использовать метод Vue CLI как фактический метод, который мы используем для установки Vue.

— — — — — — — — — — — — — — — — — — — — — — — — — — — -

Установка Vue Cli

Давайте установим Vue cli, выполнив следующую команду в вашем терминале.

npm install -g @vue/cli

Если вы используете Mac, вам нужно добавить sudo перед npm.

Создать проект Vue

После установки vue-cli у вас будет доступ к двоичному файлу vue в командной строке.

Затем создайте наш проект vue, выполнив команду ниже.

vue create my-vueapp      #vue create folder-name

Эта команда загрузит файлы, связанные с нашим проектом, в папку my-vueapp.

После этой команды вам будут предложены разные вопросы:

Выберите вариант manually select features с помощью клавиш со стрелкой вниз и нажмите Enter. ( Совершенно необязательно, если вы не хотите использовать default ).

Vue CLI v3.0.0
? Please pick a preset:
  default (babel, eslint)
❯ Manually select features

Теперь он предложит различные дополнения для добавления в наш проект. Используйте spacebar для выбораCSS Pre-processors, затем нажмите Enter.

? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E TestingSelect the manually select features option by using your down arrow keys and hit enter.

Теперь он попросит выбрать ваш препроцессор CSS с помощью клавиш со стрелками, чтобы выбрать ваш любимый препроцессор. Мы пойдем с SCSS/SASS.

? Pick a CSS pre-processor (PostCSS, Autoprefixer
 and CSS Modules are supported by default): (Use arrow keys)
❯ SCSS/SASS
  LESS
  Stylus

Затем мы выберем ESLint+Prettier вариант для нашего проекта. (Совершенно необязательно, если вы не хотите использовать ESLintwith error prevention only ).

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
❯ ESLint + Prettier

Теперь он предложит с дополнительными опциями lint, выберите опцию Lint on save и нажмите Enter.

? Pick additional lint features
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

Теперь выберите параметр специальные файлы конфигурации.

? Where do you prefer placing config for Babel,
PostCSS, ESLint, etc.?
❯ In dedicated config files
  In package.json

Мы попросим сохранить это как предустановку для будущих проектов, введите N для этого проекта.

Save this as a preset for future projects? (y/N): N

Примечание. Если вы хотите сохранить эти параметры в качестве предустановки, введите: Y, чтобы в следующий раз, когда вы создаете проект vue, вы могли выбрать эту предустановку для быстрого создания проекта vue.

После успешной загрузки файлов, связанных с нашим проектом, в папку my-vueapp, теперь нам нужно изменить наш текущий рабочий каталог, используя команду ниже.

cd my-vueapp

Запуск нашего сервера разработки

Обслуживание нашего проекта vue путем запуска нашего сервера разработки. В вашем терминале выполните следующую команду, чтобы запустить сервер разработки.

npm run serve
Starting GUI... 🌠  Ready on http://localhost:8000

Если вам понравился этот пост, пожалуйста, нажмите кнопку хлопка 👏 несколько раз ниже, чтобы выразить свою поддержку! Кроме того, не стесняйтесь комментировать и оставлять любые отзывы. Не забывай следовать за мной! Я буду там с дополнительными обновлениями и дополнительными функциями с этим…

Следуй за мной https://twitter.com/eshanchattaraj