01-vuecli3安装与配置

结束webpack学习，开始接触脚手架！！！

node是前提—已安装@12.18.3

Vue.js官方脚手架使用了webpack的模板

一、开始安装cli

npm install -g @vue/cli //全局安装 本机安装了4.5.12的版本

淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org

cli3：创建项目：vue create 项目名称

1. vue create vuecli3test

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tZ0uKfNY-1637325089728)(D:\mansoft\有道云笔记\weixinobU7VjpGyuf2I51b3uyOAoln8Lew\4776c4a54e2c49a8a882d18b41f986e7\939acd1f658c46c19a052e1c75cf78b7.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mxBAqdO3-1637325089733)(D:\mansoft\有道云笔记\weixinobU7VjpGyuf2I51b3uyOAoln8Lew\f3709181acb843a5b91fcd546a5a1880\e40af9df64ed40b69b572fcfe8865e36.jpg)]

2.跑cli3项目：npm run serve

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YRHslbfg-1637325089735)(D:\mansoft\有道云笔记\weixinobU7VjpGyuf2I51b3uyOAoln8Lew\02a65b2a8c4c4393b385715198f58c51\5dfa2127113b45f28b3d061ec26ca52b.jpg)]

3.本地服务器搭建好，点击：http://localhost:8080/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B16QFY4f-1637325089737)(D:\mansoft\有道云笔记\weixinobU7VjpGyuf2I51b3uyOAoln8Lew\74b5e0ddf0004f6d8fc43c66349dcc9e\fc412f2d82234b0d9c81f2fe01af83e4.jpg)]

4.搭建成功

二、来到vue ui

1.启动本地服务器**：vue ui**

跳出页面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hqQzZmEy-1637325089738)(D:\mansoft\有道云笔记\weixinobU7VjpGyuf2I51b3uyOAoln8Lew\ed959f69010b46fa8e4c03e125721202\5686bb2b449a42a6b0acea2038ce1f8a.jpg)]

但是同时遇到一个****error：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LyjSDsZb-1637325089739)(D:\mansoft\有道云笔记\weixinobU7VjpGyuf2I51b3uyOAoln8Lew\7f3da612519b4045bedcffa5232596a7\9218941526d74e689cdde4cccbf65190.jpg)]

解决方法：清理npm缓存（已成功解决报错）：npm cache clean --force

2.点击导入可以看到项目目录，可以自由选择：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dnJF1TvF-1637325089742)(D:\mansoft\有道云笔记\weixinobU7VjpGyuf2I51b3uyOAoln8Lew\f3a91ba5d8384df58c3bda99d50afb10\8a9d5021ba4747d5b94af423720990b5.jpg)]

3.选择02-vuecli3test进入后导入文件夹

37325089742)]

3.选择02-vuecli3test进入后导入文件夹

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O8aZF138-1637325089743)(D:\mansoft\有道云笔记\weixinobU7VjpGyuf2I51b3uyOAoln8Lew\17eb7e77925f45d9a20f6ee8bf523545\93ba8056ba644e849a06f9b0b14b3b9b.jpg)]