01-vuecli3安装与配置
结束webpack学习,开始接触脚手架!!!
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)]