Vue-cli3。十、创建项目

1.环境要求

安装Vue-cli3.x的先决条件：Node.js

以Windows为例安装Node.js，百度的“Node.js官网”或者“Node.js中文网”。如无特殊要求，下载安装LTS版(长期支持版，已满足Vue CLI官网要求的版本要求)

接下来的一路，一般不需要更改默认安装设置

安装后，您可以在开始菜单中找到一个名为Node.js的文件夹，如下所示

注意：js基础代码(不是DOM等相关代码)可以直接在Node.js * *中运行

我们需要使用的是Node.js命令提示符

2.命令行界面安装：

官方订单npm安装-g @vue/cli

注意：@不能少，要少@安装的版本是1.x和2.x，而不是3.x，如果已经安装了旧版本，需要先卸载旧版本，再安装新版本。

卸载命令npm卸载旧版本的vue-cli -g

增加：vue-cli 3.x卸载命令npmunstall @ vue/CLI-g(必要时可用)

国内下载速度相对较慢

检查npm的当前下载映像，命令是：npm获取注册表

结果https://registry.npmjs.org/

如果不喜欢慢下载，可以切换到淘宝镜像或者直接安装cnpm，替换淘宝镜像。命令如下：

Npm配置集注册表http://registry.npm.taobao.org/npm安装-gcnpm-注册表=https://registry.npm.taobao.org正在等待安装完成

2.1使用脚手架创建项目

建议先考虑项目文件夹的存放位置，输入相关位置，以桌面为例

Cd桌面如果不需要更改位置，请跳过；如果需要返回上级目录光盘.其他cmd命令可以自行百度

创建项目的两种方法：

首先，直接创建命令行

Create project命令：vue create project名称可以自行命名，但请注意不能有大写字母，否则会报错：警告：名称不能再包含大写字母

Vue create learn 接下来，系统会询问您选择哪种配置(将显示所有已保存的配置，并且仅首次显示默认(babel、eslint)和手动选择功能)

您可以选择之前创建的配置，也可以选择官方默认配置或手动选择)

选择手动选择功能将显示以下内容

箭头键控制上下空格的选择，全选，我反转选择

选择通用功能/插件后，按enter键将允许您选择细分的功能

例如，在Linter/Formatter下：

保存时的代码检测

Babel、PostCSS、ESLint等配置文件都存储在自己的配置文件中。

SCSS/萨斯，LASS和手写笔可在选择一个CSS预处理器(CSS

有TS、PWA、Roter(vue路由管理；SPA必须带)、Vuex(vue状态管理)、测试(单元测试、E2E测试)等。所有这些都可以根据需要选择

最后，系统会询问您是否将其保存为未来项目的默认配置。如果您保存它，您需要输入一个名称

等待项目创建.

创建项目后，按照提示输入项目并启动项目

cd学习进入后Npm运行服务

两个地址都可以访问，第二个地址不能从外部访问。应该是端口映射做得不好，那么这个地址是做什么用的呢？

第二，通过图形用户界面创建

下载vue-cli3.x后，进入项目存放位置后进入vue ui，浏览器中会打开vue项目仪表盘(非首次用户界面)

使用GUI创建项目后，再次打开会直接进入旧的项目管理界面，如上图

如果需要创建另一个项目，可以在左上角的下拉菜单中选择“Vue项目经理”返回首页

创建——“在此创建一个新项目——”输入项目文件夹名称(关闭时没有git建议)——“下一步，

您可以选择自己创建的配置、官方配置或手动配置

手动配置如下图所示，可根据需要选择。前面已经提到了相关的介绍

注意：如果有下拉框，必须先选中，否则无法进入下一步

最后，单击创建并等待

最终和CMD截图如下

如果您想在浏览器中启动，请启动菜单栏右侧的应用程序—— >任务—— >任务面板—— >服务—— >运行——(从左到右单击红色)

也可以从命令行启动，命令与上面描述的相同

至此，以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。