Vue CLI 3.x开发环境搭建

1,237 阅读1分钟

1.介绍

Vue CLI目前已经发展到了3.0,本文将介绍如何通过Vue Cli 3.0搭建Vue项目的开发环境。如果你还未接触过Vue Cli,请先配置好Node.js的开发环境,本文默认你已经使用过了Vue Cli 2.0。

2.安装

打开CMD(命令行工具),输入npm install -g @vue/cli,安装vue cli 3.0,通过vue --version检查vue cli的版本。

3.创建项目

通过vue create hello-world,可以创建一个名为hello-world的vue项目;
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。
选择完项目的基本配置后,即可生成项目。
项目文件夹

4.运行项目

通过npm run serve,就可以运行vue项目
UI界面

5.GUI管理项目

vue cli 3.0新增了图形界面的项目管理工具,通过在cmd中输入vue ui指令就可以在浏览器打开这个项目管理界面
UI界面

6.关于vue cli 2.0

Vue CLI >= 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project