VUE环境搭建

兼容性

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。因此，在选型时一定要注意这一点。

环境搭建

Vue的环境搭建有两种方式，一种是直接使用script引入，另外一种就是使用npm的方式搭建

script引入

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

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

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
具体版本自行根据实际需求选择

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

npm安装

使用npm需要nodeJs的环境，首先安装nodeJS。

下载nodeJs安装程序

去nodeJs官网下载安装程序：
https://nodejs.org/en/download/

根据实际情况选择版本，此示例下的的为 Current Latest Features ->Windows Installer(.msi)

安装nodeJs

点击Next

选中“ I accept the terms in the License Agreement” 复选框
点击Next

可根据自己实际需求通过点击 Change按钮改变安装目录，然后点击Next

点击Next

点击Next

点击Install


点击Finish完成安装

在命令行中输入npm，出现如下信息则表示安装成功：

安装cnpm

npm install -g cnpm

安装vue脚手架

这里我们使用cnpm

cnpm install -global vue-cli

或

cnpm install -g vue-cli

使用 vue 脚手架创建一个基于webpack的新项目

Project name ：为项目名称不可以有中文及大写字母；
Project description ：为项目的描述信息；
Author ：作者
Vue build ：vue的编译环境
Install vue-router ： 询问是否使用路由；
Use ESLint to lint your code？：询问是否使用ESLint，ESLint是一个代码检查工具，如是做测试不建议使用；
Set up unit tests ：用于测试时使用；
Setup e2e tests with Nightwatch？ ： 同样是提供给测试人员使用的
Should we run npm install for you after the project has been create? 这里默认是使用npm进行安装，可以通过上下键来选择，本示例选择的是最后一项，“自行手工执行”

进入到项目目录，并使用cnpm安装：

cnpm install

运行项目

cnpm run dev

在浏览器上输入：http://localhost:8080 看到此页面则表示成功：