1. 前提条件
检查node环境
vue cli使用需要用到node.js,检查node.js是否安装成功
# 查看node版本
node -v
# 查看npm版本
npm -v
安装vue-cli
npm install -g @vue/cli
安装完成之后,通过vue命令来验证是否安装成功
2. 创建vue项目
第一步:vue create 项目名
由上图,我们可以看到,有三个选项 ①默认配置Vue2; ②默认配置Vue3; ③自定义配置;
第二步:可以根据自己的实际情况选择,本次创建项目我选择自定义配置
初始配置
修改后
第三步:版本选择,选择2.x版本
第四步:路由是否采用history模式,输入n
第五步:配置文件存放地选择,选择 In package.json
第六步:是否保存以上配置步骤的选项为今后所有项目的默认配置,选择不保存。因为不同项目需要的组件可能不一样。
第七步:执行创建项目,如下图所示,表示创建成功
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ITrvG5iZ-1623945587909)(https://gitee.com/bamaw/picbed/raw/master/20210617235054.png)]
3. 启动创建好vue脚手架项目
进入到项目根目录下
cd hello-world
执行启动命令
npm run serve
最后,浏览器输入本地地址,端口号为8080
到这里,简单的vue脚手架项目搭建完成。