Vue 脚手架笔记

最新推荐文章于 2024-07-21 19:21:16 发布

原创最新推荐文章于 2024-07-21 19:21:16 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

该博客介绍了如何更改npm镜像源为淘宝源，以加速下载。接着详细讲解了如何全局安装Vue CLI，创建一个新的Vue项目，并进行自由配置，包括选择Vue版本和路由模式。最后，说明了如何启动项目并确认其创建成功，提供了本地和局域网访问地址。

脚手架

更改国内镜像

运行 npm i nrm -g 全局安装 nrm 包；
使用 nrm ls 查看当前所有可用的镜像源地址以及当前所使用的镜像源地址；
使用 nrm use taobao 切换不同的镜像源地址；

安装

npm install -g @vue/cli

使用

在 code 文件下 shift + 鼠标右键，在此处打开 Powershell- vue create + 项目名称
选择最后一个，自由配置模板 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6aQ0bpMa-1648000206896)(C:\Users\86158\AppData\Roaming\Typora\typora-user-images\image-20220322202938768.png)]$
空格键选中/取消选中 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UVJkCXKT-1648000206897)(C:\Users\86158\AppData\Roaming\Typora\typora-user-images\image-20220323083359860.png)]$
选择 vue 版本 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ur31pPEo-1648000206897)(C:\Users\86158\AppData\Roaming\Typora\typora-user-images\image-20220323083621627.png)]$
路由模式，选择 n，默认为 hash 模式，选择 y 后需要对服务器进行配置 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZWSHfUnq-1648000206898)(C:\Users\86158\AppData\Roaming\Typora\typora-user-images\image-20220323083801580.png)]$
是否新建单独配置文件，选择第一个，把相关的配置信息写道单独的配置文件中 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9LIzr9LO-1648000206899)(C:\Users\86158\AppData\Roaming\Typora\typora-user-images\image-20220323083826635.png)]$
选择 n ，不保存为模板 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3btNXJ1O-1648000206900)(C:\Users\86158\AppData\Roaming\Typora\typora-user-images\image-20220323084036485.png)]$
启动项目 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GOG9Hjz7-1648000206901)(C:\Users\86158\AppData\Roaming\Typora\typora-user-images\image-20220323091236857.png)]$
- 打开 VsCode 终端
- 运行 npm run serve
- 打开地址，如果可以正常访问，代表创建成功
  - 第一个是本机地址
  - 第二个是局域网地址