просто ничего или напечатать «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 Testing
Select 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