相关指令

创建一个项目

在尝试了单文件的快速开发后，我们就可以开始真正创建一个项目。

vue create

运行以下命令来创建一个新项目:

vue create hello-world

使用图形化界面

您也可以通过 vue ui 命令以图形化界面创建和管理项目:

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将您引导至项目创建的流程。

提示

对于新手，推荐先使用图形化界面

预置命令

使用 vue create 创建的项目带有一系列预置指令。

初始化项目

npm install

提示

若日后项目编译出问题后一般能够通过重新执行此命令恢复正常。

更新项目依赖

npm update

提示

在拉取最新代码后发现 package.json 文件发生变动时使用，该命令会将所有依赖升级到 package.json 中指定的版本。

启动开发环境

npm run serve

提示

该指令会创建一个开发环境。开发环境其实就是开发时提供的一个代码错误提示与页面展示窗口，终端会显示编译状态与错误、浏览器会显示文件编译后的效果。

开发环境启动后，vue-cli 会对项目文件进行实时编译，并搭载一个临时服务器加载编译后的网页，并监听文件改动执行实时编译。

此时可在浏览器通过 http://localhost:8080 直接访问网页。

在对项目的任何文件进行更改并保存后，vue-cli 会自动编译需要更新的文件，使得临时服务器的网页与编译器内的文件最终效果保持一致。

也就是说，在启动开发环境下，浏览器所展示的网页状态就是编译器中正在编辑的网页状态，在编译器做任何修改后改动会立即更新在网页中。

使用 ctrl + c 组合键并输入 y 按回车来终止开发环境。

构建生产环境

npm run build

提示

执行构建，将构建成功的网页文件输出至 /dist 目录

执行文件提示和文件修复

npm run lint

提示

执行代码错误提示与修复功能，推荐使用 ESLint + @typescript-eslint/parser 检查。