Vue2 - 使用 Vue脚手架（Vue CLI）开发

官方文档：https://cli.vuejs.org/zh/

• Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。

• CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

第一步（仅第一次执行）：打开终端，全局安装@vue/cli。

npm install -g @vue/cli

备注：若出现下载缓慢请配置 npm 淘宝镜像：

npm config set registry https://registry.npm.taobao.org

第二步：创建一个Vue项目

在终端cd到你要创建项目的父目录下，然后使用vue命令创建项目

vue create xx你的项目名字（需要全小写）xx

例如：我cd到study文件下，在study文件夹下创建Vue项目，项目名字“myfirstvue”。回车。

接下来是选择，项目是预设。根据情况选择，我想创建的是Vue2版本，这里选择Vue2。回车。

等待直至，创建成功。在编译器（WebStorm）中的项目目录如下：

模板项目的结构：

├── node_modules 
├── public 
│ ├── favicon.ico: 页签图标 
│ └── index.html: 主页面
├── src 
│ ├── assets: 存放静态资源 
│ │ └── logo.png 
│ │── component: 存放组件 
│ │ └── HelloWorld.vue 
│ │── App.vue: 汇总所有组件 
│ │── main.js: 入口文件 
├── .gitignore: git 版本管制忽略的配置 
├── babel.config.js: babel 的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件 
├── package-lock.json：包版本控制文件

第三步：cd到项目下，启动项目（即启动服务），命令如下:

npm run serve

执行结果成功如上，默认端口是8080，点击可跳页面，如下。