Vue CLI(Vue 脚手架)

一、介绍

vue CLI

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

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

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

CLI

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。

二、安装

   （1）旧版本（不建议安装）

        1.x 或 2.x 版本通过下面指令安装

npm install -g vue-cli

   （2）新版本

        3.x 及以上版本通过下面指令安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

      注意：

        1、如果你已经安装了旧版本，需先卸载旧版本

        2、安装新版本需要将 node.js 升级成 v8.9 或更高版本。推荐 v10 以上的版本

        3、安装完成之后，可以通过下面的指令，查看安装的版本是否正确

vue --version

  三、创建一个项目

        1、运行以下命令来创建一个项目

                语法： vue create 项目名

vue create hello-world

        2、配置项目

        你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

     

        这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

 选项说明：

选择vue版本

 选择一个linter/formatter配置

配置的位置 (1.放同一个文件夹 2.放 package.json 文件内 )

 是否保存配置信息

 然后CLI就会去创建项目,成功后会出现下面的两个命令

$ cd hello
$ npm run serve

 依次输入这两条命令就可以运行项目了