1.介绍

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

2.安装

打开CMD(命令行工具),输入npm install -g @vue/cli,安装vue cli 3.0,通过vue --version检查vue cli的版本。
Vue CLI 3.x开发环境搭建

3.创建项目

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

4.运行项目

通过npm run serve,就可以运行vue项目
Vue CLI 3.x开发环境搭建
UI界面
Vue CLI 3.x开发环境搭建

5.GUI管理项目

vue cli 3.0新增了图形界面的项目管理工具,通过在cmd中输入vue ui指令就可以在浏览器打开这个项目管理界面
Vue CLI 3.x开发环境搭建
UI界面
Vue CLI 3.x开发环境搭建

6.关于vue cli 2.0

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

相关文章: