相关指令

Mr.Hope ... Vue
大约 2 分钟

# 创建一个项目

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

# vue create

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

vue create hello-world
1

# 使用图形化界面

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

vue ui
1

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

提示

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

# 预置命令

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

# 初始化项目

npm install
1

提示

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

# 更新项目依赖

npm update
1

提示

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

# 启动开发环境

npm run serve
1

提示

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

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

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

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

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

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

# 构建生产环境

npm run build
1

提示

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

# 执行文件提示和文件修复

npm run lint
1

提示

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