Vue-Vue3.0-Cli脚手架搭建

偏执的太偏执、 2023-05-30 08:49 15阅读 0赞

Vue-Cli3.0官网地址：[https://cli.vuejs.org/zh/][https_cli.vuejs.org_zh]

### 准备 ###

删除已有vue-cli

npm uninstall vue-cli -g

如果命令不能删除，可以手动删除

本人win系统，通过cmd找到vue目录

where vue

结果：

![20191108150502619.png][]

打开、手动删除vue相关包和脚本即可

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9odWFuZ2hhaXRhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9odWFuZ2hhaXRhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1][]

查看是否存在vue

vue -V

### 安装vue-cli3.0 ###

vue create my-project

安装完成脚手架之后

npm run serve

启动项目，默认端口8080

![20191108161918891.png][]

### 比较2.0 ###

通过项目接口对比

![20191108161819433.png][]

vue3.0减少了build 和 config文件夹，其他用法和vue2.0差不多

启动后效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9odWFuZ2hhaXRhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2][]

[https_cli.vuejs.org_zh]: https://cli.vuejs.org/zh/
[20191108150502619.png]: https://img-blog.csdnimg.cn/20191108150502619.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9odWFuZ2hhaXRhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191108150624160.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9odWFuZ2hhaXRhby5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9odWFuZ2hhaXRhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191108150638436.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9odWFuZ2hhaXRhby5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[20191108161918891.png]: https://img-blog.csdnimg.cn/20191108161918891.png
[20191108161819433.png]: https://img-blog.csdnimg.cn/20191108161819433.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9odWFuZ2hhaXRhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191108161904866.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9odWFuZ2hhaXRhby5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70