新建vue-cli项目

最新推荐文章于 2024-08-04 17:07:40 发布

我想做阿信

最新推荐文章于 2024-08-04 17:07:40 发布

阅读量265

点赞数 1

分类专栏： vue 文章标签： vue vue-cli

本文链接：https://blog.csdn.net/qq_42909053/article/details/108064047

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

说明

以下为安装好vue-cli3以上脚手架后的操作。没有安装的可以自行百度安装。

1. 命令提示符（黑窗口）新建

1.1 在指定目录打开命令提示符

在地址栏输入：cmd+回车
打开cmd

1.2 输入新建vue-cli项目命令

新建vue-cli项目命令vue create project-name
例如我们新建项目名为create-project-by-cmd

vue create create-project-by-cmd

1.3 选择项目需要的配置

这里可以通过方向键和回车选择default（默认）或者Manually select features（手动创建）。默认项目有babel，eslint两个配置（具体含义下边会解释），手动创建则手动选择配置。
在这里插入图片描述
选择第二个

手动配置选项，可通过方向键上下移动，空格键选择或取消，回车键确认并进行下一步

我们这里仅仅是为了学新建项目，而新建项目，所以只选了第一个。在实际做项目时要根据项目的需求去选。当然，漏选的东西，在建完项目之后，还是可以进行安装的。
选择后进入下边界面：
在这里插入图片描述
一般选择第一个，配置单独放个文件

这个根据自己的需要选择。我这选择的n，接下来就会去新建项目了。
新建中的项目

安装好的项目

我们按照提示进入项目目录，启动项目。

启动后的项目
在这里插入图片描述
浏览器打开看看。

项目目录结构：

2. vue ui 新建(vue-cli 3以上)

可以选择任意位置打开命令提示符，新建项目时再选择路径。但是ui界面切换路径特别慢
也可以在指定位置打开命令提示符，新建项目时会自动进入此路径，不需要切换，推荐使用这种方法
打开命令提示符后，运行命令：

vue ui

2.1 启动图形化界面中：

在这里插入图片描述
启动后会自动打开浏览器进入图形化界面：

2.2 新建项目

点击创建：
在这里插入图片描述
点击在此创建新项目
输入项目名称，并配置，然后点击下一步

2.3 选择项目需要的配置

接下来基本和命令提示做一样的选择，不在解释。
在这里插入图片描述

这个时候我们的ui界面显示：

而打开ui界面的命令提示符：则正在下载项目

安装成功后的界面：
在这里插入图片描述

2.4 图形化界面解释

在这里我们可以，使用图形化界面去管理插件、依赖、配置、任务（启动、停止、打包项目）。
如启动项目：点击运行就可以了
在这里插入图片描述
运行成功，会在右下角通知

可以看他的运行状态：

也可以在新的页面访问：

当我们想关闭时，只需要把命令提示符关了就行了：

--------------------------------------------------分隔符--------------------------------------------------
参考资料：
脚手架官网：https://cli.vuejs.org/zh/guide/
如何用 vue-cli 4.0 创建项目：https://blog.csdn.net/Joe0217/article/details/103097114
PWA(Progressive Web App)入门系列：（一）PWA简单介绍：https://www.cnblogs.com/tlnshuju/p/7295002.html
vue cli3 初始化项目步骤：https://www.cnblogs.com/wuqxblog/p/13445965.html
vue-cli3.0新建项目配置：https://www.jianshu.com/p/e98efa36444f
vue- Vue-Cli脚手架工具安装 -创建项目：https://cloud.tencent.com/developer/article/1520021