Vue脚手架的入门基础(一)—— 脚手架搭建

Vue脚手架的入门基础(一)—— 脚手架搭建

  • 0.前言
  • 1.命令安装 VueCLI
  • 2.创建Vue脚手架项目
  • 3.运行Vue脚手架项目

0.前言

1.Vue脚手架就是我们说的Vue CLI (command line interface 命令行接口工具)
2.

1.命令安装 VueCLI

首先默认已经有node环境了,这里提供两条语句下载:

# yarn 下载
yarn global add @vue/cli
# npm 下载
npm install -g @vue/cli

注意,执行npm时候可能会报警告不用在意,如果下载过程中卡住了可以按 Enter。
如果成功安装好,退出当前指令窗口,重开一个新的shell,输入指令 vue可以看到帮助,说明ok了
Vue脚手架的入门基础(一)—— 脚手架搭建_第1张图片

2.创建Vue脚手架项目

进入一个你需要创建项目的文件夹(你也可以用命令cd进,都一样)
Vue脚手架的入门基础(一)—— 脚手架搭建_第2张图片
在地址栏输入cmd直接进入当前目录cmd
Vue脚手架的入门基础(一)—— 脚手架搭建_第3张图片
Vue脚手架的入门基础(一)—— 脚手架搭建_第4张图片
输入vue create {*项目名*}
Vue脚手架的入门基础(一)—— 脚手架搭建_第5张图片
问你选择vue2还是vue3,这边就选vue2了
Vue脚手架的入门基础(一)—— 脚手架搭建_第6张图片
跳出sucess说明成功了
Vue脚手架的入门基础(一)—— 脚手架搭建_第7张图片

3.运行Vue脚手架项目

这边就用webStorm打开了,你直接用命令行进入然后打开也可以
Vue脚手架的入门基础(一)—— 脚手架搭建_第8张图片
打开Terminal,输入运行指令

# yarn 指令
yarn run serve
# npm 指令
npm run serve

Vue脚手架的入门基础(一)—— 脚手架搭建_第9张图片
前端项目启动成功
Vue脚手架的入门基础(一)—— 脚手架搭建_第10张图片
点击查看进入网页,拿下
Vue脚手架的入门基础(一)—— 脚手架搭建_第11张图片

你可能感兴趣的:(Vue,vue.js,vue)