Vue.js入门之Vue CLI和图形化界面Vue Ui的使用

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 搭建交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。 

 

一、安装

1、通过 `npm`安装

npm install -g @vue/cli

由于网络问题推荐使用cnpm安装

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 `vue-cli`

cnpm install -g @vue/cli

二、运行

安装好环境后，我们进入代码目录，运行cmd控制台，输入vue ui，即可进入vue的可视化手脚架

三、创建vue打包项目 

1、找到vue项目管理器

2、选择空目录进行创建

3、配置项目

1、选择包管理器为默认（默认即npm）

2、默认预设

3、等待项目创建

 

4、完成创建

可以看到创建好的项目目录

src文件夹为vue.js源代码的目录

四、运行项目

运行 serve （在vue cli 2.x版本中是dev 这里是一重大改变！）任务，我们可以看到，我们新建的项目已经跑起来了：

此时我们输入 localhost:8080 就可以看到：