VUE环境搭建与安装的方法步骤

Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

三种安装方式

1.直接用

在Vue.js的官网上直接下载vue.js,并在.html中通过<script>标签中引用。

• 开发版本
• 生产版本

在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!

2.CDN

对于制作原型或学习，你可以这样使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'
</script>

你可以在 cdn.jsdelivr.net/npm/vue 浏览 NPM 包的源代码。

Vue 也可以在 unpkg 和 cdnjs 上获取 (cdnjs 的版本更新可能略滞后)。

请确认了解不同构建版本并在你发布的站点中使用生产环境版本，把 vue.js 换成 vue.min.js。这是一个更小的构建，可以带来比开发环境下更快的速度体验。

3.NPM（推荐）

在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

首先，先列出我们接下来需要的东西：

• node.js环境（npm包管理器）
• vue-cli 脚手架构建工具
• cnpm npm的淘宝镜像

1). 从node.js官网下载并安装node，安装过程很简单，一直点下一步就ok了，安装完之后，我们通过打开命令行工具（win+R）,输入

    node -v 命令，查看node的版本，若出现相应的版本号，则说明你安装成功了。

npm包管理器，是集成在node中的，所以安装了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息。

2).安装cnpm

到目前为止，node的环境已经安装完成，npm 包管理器也有了，由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm.

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

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org ，等待，由于我已经安装过了，这里显示更新。

完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝npm镜像官网。

3).vue-cli 脚手架构建工具

npm install -g vue-cli 

在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。

安装完成后，我们需要准备的环境和工具都准备好了，我们依次检查一下。

如果提示找不到命令，需要配置vue的环境变量。
默认安装位置是在：C:\Users\xianyi\AppData\Roaming\npm

Users后面一级替换成你的用户名
在系统环境变量path后添加 ;C:\Users\xianyi\AppData\Roaming\npm
然后再查看vue版本和webpack版本

5).初始化一个vue项目

新建一个vue-project文件
在命令行中运行命令 vue init webpack firstApp（初始化一个完整版的项目）

输入命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了。

• Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了firstapp
• Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
• Author：作者，如果你有配置git的作者，他会读取。
• Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
• Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n（建议），如果你是大型团队开发，最好是进行配置。
• setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
• Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n
  运行初始化命令的时候会让用户输入几个基本的配置选项，如项目名称、项目描述、作者信息，对于有些不明白或者不想填的信息可以一直按回车去填写就好了，等待一会，就会显示创建项目创建成功，如下图:

创建成功后，我们进入项目目录

在当前目录打开命令行，执行cnpm install 安装项目依赖的包。

安装完成之后，我们到自己的项目中去看，会多一个node_modules文件夹，这里面就是我们所需要的依赖包资源。

4).运行项目

在项目目录中，运行命令 npm run dev （npm run start），会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

访问http://localhost:8080,出现vue的logo

4.在idea中搭建vue开发环境

1).在idea中打开刚才创建的vue项目

2).setting->plugins->Browse reponsitories 安装vue.js,安装完成重启idea

３).在idea->terminal控制台中启动项目

至此，vue的安装介绍到这里。
参考资料：vue.js 三种方式安装(vue-cli)