Vue安装及Vue-cli脚手架安装及使用

Vue.js是什么?

• Vue.js是一套构建用户界面的渐进式框架。
• Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
• Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue.js安装

1. 独立版本

   我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

2. 使用CDN方法(也是用 <script> 标签引入，免去下载步骤)

   这里有三个CDN：

   • Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
   • unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
   • cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

3. npm安装vue（推荐）

在用 Vue.js 构建大型应用时推荐使用 npm安装：(默认已经安装nodejs，附上nodejs下载地址和nodejs安装教程）

先认识一下npm是什么：
npm其实是Node.js的包管理工具（package manager)。npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。那么npm究竟在哪？其实它已经在Node.js安装的时候顺带装好了。

检查一下是否已经安装npm

//命令行查看一下版本
G:\>npm -v
6.7.0

npm安装vue

# 最新稳定版
$ npm install vue                -->确保已经安装nodejs

那么Vue-cli又是什么？

Vue 提供了一个官方的 CLI，为单页面应用快速搭建 (SPA) 繁杂的脚手架。CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。更多详情可查阅 Vue CLI 的文档。

安装Vue-cli3.0

cmd命令行下执行如下命令

G:\vueTest>npm install -g @vue/cli

如果你看到别的文章写的安装命令是：

npm install -g vue-cli

• 千万别那样做,因为vue-cli是基于1.x或者2.x。
• Vue-cli 的包名称由 vue-cli 改成了 @vue/cli
• 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或
  yarn global remove vue-cli 卸载它。

PS：如果npm下载过慢，可以选择npm换源：换源教程

安装完成后cmd命令行检查版本

G:\vueTest>vue -V
@vue/cli 4.0.5

创建项目

创建项目方法1：Vue-cli3.0命令行下创建新项目

Step1: cmd命令行下执行如下命令（hello-word为自定义项目名称）

 vue create hello-world

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

Vue CLI v4.0.5
? Please pick a preset:
  demo (babel, router, vuex)
> default (babel, eslint)
  Manually select features

这里我们选择默认的设置，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。
Step3: 创建项目成功

🎉  Successfully created project hello-world.
👉  Get started with the following commands:

 $ cd hello-world
 $ npm run serve

Step4：运行项目

G:\vueTest>cd hello-world
G:\vueTest\hello-world>npm run serve

> hello-world@0.1.0 serve G:\vueTest\hello-world
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin
 DONE  Compiled successfully in 5577ms                                                                          19:21:30

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.18.45.72:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

创建项目方法2：图形界面创建新项目（推荐，基于Vue-cli3.0）

Step1：通过 vue ui 命令以图形化界面创建和管理项目

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程,如下图所示，按步骤来创建项目。

Step2：创建项目完成后：
查看项目名是否正确–>点击任务–>点击运行（需等待编译完成）–>点击启动app，即完成启动项目。

创建项目方法3：基于Vue-cli1.x或2.x创建新项目

Step1:
创建一个基于 webpack 模板的新项目：（mytest为自定义项目名称）

 G:\vueTest>vue init webpack mytest

  Command vue init requires a global addon to be installed.
  Please run npm install -g @vue/cli-init and try again.

这里因为我们已经安装了Vue-cli3.x，但是Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具（即@vue/cli-init）：

G:\vueTest>npm install -g @vue/cli-init

接着，重复Step1，这里需要进行一些配置，默认回车即可。

G:\vueTest>vue init webpack mytest

'git' is not recognized as an internal or external command,
operable program or batch file.
? Project name mytest
? Project description A Vue.js project
? Author Blackspace
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No				-->这里建议选择No
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) no   -->这里建议选择No

   vue-cli · Generated "mytest".

# Project initialization finished!
# ========================

To get started:

  cd mytest
  npm install (or if using yarn: yarn)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

Step2:–>运行项目

G:\vueTest>cd mytest						-->进入项目目录
G:\vueTest\mytest>npm intall				-->安装依赖
G:\vueTest\mytest>npm run dev				-->运行项目

网址栏输入localhost:8080,成功。